@likec4/diagram 1.24.0 → 1.25.0

package/src/theme-vars.ts

@@ -1,12 +1,24 @@
 import { themeToVars } from '@mantine/vanilla-extract'
 
 export {
-  easings,
-  transitions,
   vars,
-  whereDark,
-  whereLight,
   xyvars,
 } from './theme-vars.css'
 
+export const rootClassName = 'likec4-diagram-root'
+export const whereNotReducedGraphics = `:where(.${rootClassName}:not([data-likec4-reduced-graphics]))`
+export const whereReducedGraphics = `:where(.${rootClassName}:is([data-likec4-reduced-graphics="true"]))`
+
+export const whereLight = ':where([data-mantine-color-scheme="light"])'
+export const whereDark = ':where([data-mantine-color-scheme="dark"])'
+
+export const easings = {
+  out: 'cubic-bezier(0, 0, 0.40, 1)',
+  inOut: 'cubic-bezier(0.50, 0, 0.2, 1)',
+}
+
+export const transitions = {
+  fast: `all 130ms ${easings.inOut}`,
+}
+
 export const mantine = themeToVars({})

package/src/utils/css.ts

@@ -0,0 +1,7 @@
+export function getVarName(variable: string): string {
+  var matches = variable.match(/^var\((.*)\)$/)
+  if (matches) {
+    return matches[1]!
+  }
+  return variable
+}

package/dist/base/primitives/element/styles.css.js

@@ -1,6 +0,0 @@
-/* empty css                                        */
-/* empty css                          */
-var iconSize = "var(--likec4-icon-size)";
-export {
-  iconSize
-};

package/dist/globals.css.d.ts

@@ -1 +0,0 @@
-export declare const rootClassName = "likec4-diagram-root";

package/dist/globals.css.js

@@ -1,5 +0,0 @@
-/* empty css                           */
-var rootClassName = "likec4-diagram-root";
-export {
-  rootClassName
-};

package/dist/likec4diagram/ui/search/_shared.css.js

@@ -1,5 +0,0 @@
-/* empty css                           */
-var emptyBoX = "_1cfw8gr7";
-export {
-  emptyBoX
-};

package/src/base/primitives/element/styles.css.ts

@@ -1,52 +0,0 @@
-import { defaultTheme } from '@likec4/core'
-import { rem } from '@mantine/core'
-import { createGlobalVar, createVar, globalStyle } from '@vanilla-extract/css'
-import { container } from './ElementNodeContainer.css'
-
-export const textSize = createVar('text-size')
-export const paddingSize = createVar('padding-size')
-export const iconSize = createGlobalVar('likec4-icon-size')
-
-globalStyle(`${container}`, {
-  vars: {
-    [textSize]: rem(defaultTheme.textSizes.md),
-    [paddingSize]: rem(defaultTheme.spacing.md),
-    [iconSize]: '60px',
-  },
-})
-
-globalStyle(`${container}[data-likec4-shape-size="xs"]`, {
-  vars: {
-    [iconSize]: '24px',
-  },
-})
-globalStyle(`${container}[data-likec4-shape-size="sm"]`, {
-  vars: {
-    [iconSize]: '36px',
-  },
-})
-globalStyle(`${container}[data-likec4-shape-size="lg"]`, {
-  vars: {
-    [iconSize]: '82px',
-  },
-})
-globalStyle(`${container}[data-likec4-shape-size="xl"]`, {
-  vars: {
-    [iconSize]: '90px',
-  },
-})
-
-const sizes = ['xs', 'sm', 'lg', 'xl'] as const
-sizes.forEach((size) => {
-  globalStyle(`${container}[data-likec4-text-size="${size}"]`, {
-    vars: {
-      [textSize]: rem(defaultTheme.textSizes[size]),
-    },
-  })
-
-  globalStyle(`${container}[data-likec4-padding="${size}"]`, {
-    vars: {
-      [paddingSize]: rem(defaultTheme.spacing[size]),
-    },
-  })
-})

package/src/globals.css.ts

@@ -1,128 +0,0 @@
-import { defaultTheme } from '@likec4/core'
-import { createGlobalTheme, globalStyle } from '@vanilla-extract/css'
-import { scale, toHex } from 'khroma'
-import { keys, omit } from 'remeda'
-import { mantine, vars, whereDark } from './theme-vars'
-
-export const rootClassName = 'likec4-diagram-root'
-
-globalStyle(`.${rootClassName}`, {
-  overflow: 'hidden',
-  position: 'relative',
-  width: '100%',
-  height: '100%',
-  padding: 0,
-  margin: 0,
-  boxSizing: 'border-box',
-  WebkitFontSmoothing: mantine.webkitFontSmoothing,
-  MozOsxFontSmoothing: mantine.mozFontSmoothing,
-})
-globalStyle(`:where(.${rootClassName}) .mantine-ActionIcon-icon .tabler-icon`, {
-  width: '75%',
-  height: '75%',
-})
-
-createGlobalTheme(`.${rootClassName}`, {
-  ...omit(vars, ['optionsPanel', 'navigationPanel', 'safariAnimationHook', 'default']),
-}, {
-  likec4: {
-    font:
-      `var(--likec4-default-font-family,'ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"')`,
-    background: {
-      color: mantine.colors.body,
-      pattern: {
-        color: mantine.colors.gray[4],
-      },
-    },
-  },
-  compound: {
-    font: vars.likec4.font,
-    titleColor: vars.element.loContrast,
-  },
-  element: {
-    font: vars.likec4.font,
-    ...defaultTheme.elements.primary,
-  },
-  relation: {
-    ...defaultTheme.relationships.slate,
-  },
-})
-
-createGlobalTheme(`${whereDark} .${rootClassName}`, {
-  likec4: {
-    background: {
-      pattern: {
-        color: vars.likec4.background.pattern.color,
-      },
-    },
-  },
-}, {
-  likec4: {
-    background: {
-      pattern: {
-        color: mantine.colors.dark[5],
-      },
-    },
-  },
-})
-
-for (const color of keys(defaultTheme.elements)) {
-  createGlobalTheme(`:where([data-likec4-color='${color}'])`, {
-    element: {
-      fill: vars.element.fill,
-      stroke: vars.element.stroke,
-      hiContrast: vars.element.hiContrast,
-      loContrast: vars.element.loContrast,
-    },
-    compound: {
-      titleColor: vars.compound.titleColor,
-    },
-    relation: vars.relation,
-  }, {
-    element: defaultTheme.elements[color],
-    compound: {
-      titleColor: defaultTheme.elements[color].loContrast,
-    },
-    relation: defaultTheme.relationships[color],
-  })
-
-  const compoundDarkColor = (color: string, depth: number) =>
-    toHex(
-      scale(color, {
-        l: -22 - 5 * depth,
-        s: -10 - 6 * depth,
-      }),
-    )
-  const compoundLightColor = (color: string, depth: number) =>
-    toHex(
-      scale(color, {
-        l: -20 - 3 * depth,
-        s: -3 - 6 * depth,
-      }),
-    )
-
-  const compounds = {
-    fill: vars.element.fill,
-    stroke: vars.element.stroke,
-  }
-
-  for (let depth = 1; depth <= 6; depth++) {
-    createGlobalTheme(
-      `:where([data-likec4-color='${color}'][data-compound-depth='${depth}'])`,
-      compounds,
-      {
-        fill: compoundLightColor(defaultTheme.elements[color].fill, depth),
-        stroke: compoundLightColor(defaultTheme.elements[color].stroke, depth),
-      },
-    )
-
-    createGlobalTheme(
-      `${whereDark} :where([data-likec4-color='${color}'][data-compound-depth='${depth}'])`,
-      compounds,
-      {
-        fill: compoundDarkColor(defaultTheme.elements[color].fill, depth),
-        stroke: compoundDarkColor(defaultTheme.elements[color].stroke, depth),
-      },
-    )
-  }
-}