feat: Fluent UI Outlook Lite + connections mockup

node_modules/@fluentui/react-tree/lib/components/TreeItemLayout/useTreeItemLayoutStyles.styles.js

@@ -0,0 +1,146 @@
+'use client';
+
+import { __resetStyles, __styles, mergeClasses } from '@griffel/react';
+import { tokens, typographyStyles } from '@fluentui/react-theme';
+import { useTreeContext_unstable } from '../../contexts/treeContext';
+import { treeItemLevelToken } from '../../utils/tokens';
+import { useTreeItemContext_unstable } from '../../contexts/treeItemContext';
+export const treeItemLayoutClassNames = {
+  root: 'fui-TreeItemLayout',
+  iconBefore: 'fui-TreeItemLayout__iconBefore',
+  main: 'fui-TreeItemLayout__main',
+  iconAfter: 'fui-TreeItemLayout__iconAfter',
+  expandIcon: 'fui-TreeItemLayout__expandIcon',
+  aside: 'fui-TreeItemLayout__aside',
+  actions: 'fui-TreeItemLayout__actions',
+  selector: 'fui-TreeItemLayout__selector'
+};
+const useRootBaseStyles = /*#__PURE__*/__resetStyles("ryb8khq", null, [".ryb8khq{display:flex;align-items:center;min-height:32px;box-sizing:border-box;grid-area:layout;}", ".ryb8khq:hover{color:var(--colorNeutralForeground2Hover);background-color:var(--colorSubtleBackgroundHover);}", ".ryb8khq:hover .fui-TreeItemLayout__expandIcon{color:var(--colorNeutralForeground3Hover);}", ".ryb8khq:active{color:var(--colorNeutralForeground2Pressed);background-color:var(--colorSubtleBackgroundPressed);}", ".ryb8khq:active .fui-TreeItemLayout__expandIcon{color:var(--colorNeutralForeground3Pressed);}"]);
+/**
+ * Styles for the root slot
+ */
+const useRootStyles = /*#__PURE__*/__styles({
+  leaf: {
+    uwmqm3: ["f1k1erfc", "faevyjx"]
+  },
+  branch: {
+    uwmqm3: ["fo100m9", "f6yw3pu"]
+  },
+  medium: {
+    Bahqtrf: "fk6fouc",
+    Be2twd7: "fkhj508",
+    Bhrd7zp: "figsok6",
+    Bg96gwp: "f1i3iumi"
+  },
+  small: {
+    sshi5w: "f1pha7fy",
+    Bahqtrf: "fk6fouc",
+    Be2twd7: "fy9rknc",
+    Bhrd7zp: "figsok6",
+    Bg96gwp: "fwrc4pm"
+  },
+  subtle: {},
+  "subtle-alpha": {
+    Jwef8y: "f146ro5n",
+    ecr2s2: "fkam630"
+  },
+  transparent: {
+    De3pzq: "f1c21dwh",
+    Jwef8y: "fjxutwb",
+    ecr2s2: "fophhak"
+  }
+}, {
+  d: [".f1k1erfc{padding-left:calc(var(--fluent-TreeItem--level, 1) * var(--spacingHorizontalXXL));}", ".faevyjx{padding-right:calc(var(--fluent-TreeItem--level, 1) * var(--spacingHorizontalXXL));}", ".fo100m9{padding-left:calc((var(--fluent-TreeItem--level, 1) - 1) * var(--spacingHorizontalXXL));}", ".f6yw3pu{padding-right:calc((var(--fluent-TreeItem--level, 1) - 1) * var(--spacingHorizontalXXL));}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".f1pha7fy{min-height:24px;}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}"],
+  h: [".f146ro5n:hover{background-color:var(--colorSubtleBackgroundLightAlphaHover);}", ".fjxutwb:hover{background-color:var(--colorTransparentBackgroundHover);}"],
+  a: [".fkam630:active{background-color:var(--colorSubtleBackgroundLightAlphaPressed);}", ".fophhak:active{background-color:var(--colorTransparentBackgroundPressed);}"]
+});
+/**
+ * Styles for the action icon slot
+ */
+const useActionsBaseStyles = /*#__PURE__*/__resetStyles("rzvs2in", "r17h8a29", [".rzvs2in{display:flex;margin-left:auto;position:relative;z-index:1;grid-area:aside;padding:0 var(--spacingHorizontalS);}", ".r17h8a29{display:flex;margin-right:auto;position:relative;z-index:1;grid-area:aside;padding:0 var(--spacingHorizontalS);}"]);
+/**
+ * Styles for the action icon slot
+ */
+const useAsideBaseStyles = /*#__PURE__*/__resetStyles("r1825u21", "rezy0yk", [".r1825u21{display:flex;margin-left:auto;align-items:center;z-index:0;grid-area:aside;padding:0 var(--spacingHorizontalM);gap:var(--spacingHorizontalXS);}", ".rezy0yk{display:flex;margin-right:auto;align-items:center;z-index:0;grid-area:aside;padding:0 var(--spacingHorizontalM);gap:var(--spacingHorizontalXS);}"]);
+/**
+ * Styles for the expand icon slot
+ */
+const useExpandIconBaseStyles = /*#__PURE__*/__resetStyles("rh4pu5o", null, [".rh4pu5o{display:flex;align-items:center;justify-content:center;min-width:24px;box-sizing:border-box;color:var(--colorNeutralForeground3);flex:0 0 auto;padding:var(--spacingVerticalXS) 0;}"]);
+/**
+ * Styles for the content slot
+ */
+const useMainBaseStyles = /*#__PURE__*/__resetStyles("rklbe47", null, [".rklbe47{padding:0 var(--spacingHorizontalXXS);}"]);
+/**
+ * Styles for the before/after icon slot
+ */
+const useIconBaseStyles = /*#__PURE__*/__resetStyles("rphzgg1", null, [".rphzgg1{display:flex;align-items:center;color:var(--colorNeutralForeground2);line-height:var(--lineHeightBase500);font-size:var(--fontSizeBase500);}"]);
+const useIconBeforeStyles = /*#__PURE__*/__styles({
+  medium: {
+    z189sj: ["f7x41pl", "fruq291"]
+  },
+  small: {
+    z189sj: ["ffczdla", "fgiv446"]
+  }
+}, {
+  d: [".f7x41pl{padding-right:var(--spacingHorizontalXS);}", ".fruq291{padding-left:var(--spacingHorizontalXS);}", ".ffczdla{padding-right:var(--spacingHorizontalXXS);}", ".fgiv446{padding-left:var(--spacingHorizontalXXS);}"]
+});
+const useIconAfterStyles = /*#__PURE__*/__styles({
+  medium: {
+    uwmqm3: ["fruq291", "f7x41pl"]
+  },
+  small: {
+    uwmqm3: ["fgiv446", "ffczdla"]
+  }
+}, {
+  d: [".fruq291{padding-left:var(--spacingHorizontalXS);}", ".f7x41pl{padding-right:var(--spacingHorizontalXS);}", ".fgiv446{padding-left:var(--spacingHorizontalXXS);}", ".ffczdla{padding-right:var(--spacingHorizontalXXS);}"]
+});
+/**
+ * Apply styling to the TreeItemLayout slots based on the state
+ */
+export const useTreeItemLayoutStyles_unstable = state => {
+  'use no memo';
+
+  const {
+    main,
+    iconAfter,
+    iconBefore,
+    expandIcon,
+    root,
+    aside,
+    actions,
+    selector
+  } = state;
+  const rootStyles = useRootStyles();
+  const rootBaseStyles = useRootBaseStyles();
+  const actionsBaseStyles = useActionsBaseStyles();
+  const asideBaseStyles = useAsideBaseStyles();
+  const mainBaseStyles = useMainBaseStyles();
+  const expandIconBaseStyles = useExpandIconBaseStyles();
+  const iconBaseStyles = useIconBaseStyles();
+  const iconBeforeStyles = useIconBeforeStyles();
+  const iconAfterStyles = useIconAfterStyles();
+  const size = useTreeContext_unstable(ctx => ctx.size);
+  const appearance = useTreeContext_unstable(ctx => ctx.appearance);
+  const itemType = useTreeItemContext_unstable(ctx => ctx.itemType);
+  root.className = mergeClasses(treeItemLayoutClassNames.root, rootBaseStyles, rootStyles[appearance], rootStyles[size], rootStyles[itemType], root.className);
+  main.className = mergeClasses(treeItemLayoutClassNames.main, mainBaseStyles, main.className);
+  if (expandIcon) {
+    expandIcon.className = mergeClasses(treeItemLayoutClassNames.expandIcon, expandIconBaseStyles, expandIcon.className);
+  }
+  if (iconBefore) {
+    iconBefore.className = mergeClasses(treeItemLayoutClassNames.iconBefore, iconBaseStyles, iconBeforeStyles[size], iconBefore.className);
+  }
+  if (iconAfter) {
+    iconAfter.className = mergeClasses(treeItemLayoutClassNames.iconAfter, iconBaseStyles, iconAfterStyles[size], iconAfter.className);
+  }
+  if (actions) {
+    actions.className = mergeClasses(treeItemLayoutClassNames.actions, actionsBaseStyles, actions.className);
+  }
+  if (aside) {
+    aside.className = mergeClasses(treeItemLayoutClassNames.aside, asideBaseStyles, aside.className);
+  }
+  if (selector) {
+    selector.className = mergeClasses(treeItemLayoutClassNames.selector, selector.className);
+  }
+  return state;
+};