feat: Fluent UI Outlook Lite + connections mockup

node_modules/@fluentui/react-nav/lib/components/sharedNavStyles.styles.js

@@ -0,0 +1,149 @@
+'use client';
+
+import { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';
+import { tokens, typographyStyles } from '@fluentui/react-theme';
+import { __resetStyles, __styles } from '@griffel/react';
+// Styles shared by several nav components.
+export const navItemTokens = {
+  defaultDrawerWidth: 260,
+  indicatorOffset: 16,
+  indicatorWidth: 4,
+  indicatorHeight: 20,
+  backgroundColor: tokens.colorNeutralBackground4,
+  backgroundColorHover: tokens.colorNeutralBackground4Hover,
+  backgroundColorPressed: tokens.colorNeutralBackground4Pressed,
+  animationTokens: {
+    animationDuration: tokens.durationFaster,
+    animationFillMode: 'both',
+    animationTimingFunction: tokens.curveLinear
+  },
+  transitionTokens: {
+    transitionDuration: tokens.durationFaster,
+    transitionTimingFunction: tokens.curveLinear,
+    transitionProperty: 'background'
+  }
+};
+/**
+ * Styles for the root slot
+ * Shared across NavItem, NavCategoryItem, NavSubItem, and AppItem
+ */
+export const useRootDefaultClassName = /*#__PURE__*/__resetStyles("rdi7s9k", "r94071", [".rdi7s9k{display:flex;text-transform:none;position:relative;justify-content:start;align-items:flex-start;text-align:left;gap:var(--spacingVerticalL);padding:var(--spacingVerticalMNudge) var(--spacingHorizontalS) var(--spacingVerticalMNudge) var(--spacingHorizontalMNudge);background-color:var(--colorNeutralBackground4);border-radius:var(--borderRadiusMedium);color:var(--colorNeutralForeground2);text-decoration-line:none;border:none;box-sizing:border-box;cursor:pointer;transition-duration:var(--durationFaster);transition-timing-function:var(--curveLinear);transition-property:background;width:100%;font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase300);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase300);}", ".rdi7s9k:hover{background-color:var(--colorNeutralBackground4Hover);}", ".rdi7s9k:focus-visible{outline:var(--strokeWidthThick) solid var(--colorStrokeFocus2);outline-offset:calc(var(--strokeWidthThick) * -1);}", ".r94071{display:flex;text-transform:none;position:relative;justify-content:start;align-items:flex-start;text-align:right;gap:var(--spacingVerticalL);padding:var(--spacingVerticalMNudge) var(--spacingHorizontalMNudge) var(--spacingVerticalMNudge) var(--spacingHorizontalS);background-color:var(--colorNeutralBackground4);border-radius:var(--borderRadiusMedium);color:var(--colorNeutralForeground2);text-decoration-line:none;border:none;box-sizing:border-box;cursor:pointer;transition-duration:var(--durationFaster);transition-timing-function:var(--curveLinear);transition-property:background;width:100%;font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase300);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase300);}", ".r94071:hover{background-color:var(--colorNeutralBackground4Hover);}", ".r94071:focus-visible{outline:var(--strokeWidthThick) solid var(--colorStrokeFocus2);outline-offset:calc(var(--strokeWidthThick) * -1);}"]);
+export const useSmallStyles = /*#__PURE__*/__styles({
+  root: {
+    Byoj8tv: 0,
+    uwmqm3: 0,
+    z189sj: 0,
+    z8tnut: 0,
+    B0ocmuz: ["f1434i56", "f1jkyjtc"]
+  }
+}, {
+  d: [[".f1434i56{padding:var(--spacingVerticalXS) var(--spacingHorizontalS) var(--spacingVerticalXS) var(--spacingHorizontalMNudge);}", {
+    p: -1
+  }], [".f1jkyjtc{padding:var(--spacingVerticalXS) var(--spacingHorizontalMNudge) var(--spacingVerticalXS) var(--spacingHorizontalS);}", {
+    p: -1
+  }]]
+});
+/**
+ * Styles for the content slot (children)
+ * Shared across NavItem, NavCategoryItem, NavSubItem, and AppItem
+ */
+export const useContentStyles = /*#__PURE__*/__styles({
+  selected: {
+    Bahqtrf: "fk6fouc",
+    Be2twd7: "fkhj508",
+    Bhrd7zp: "fl43uef",
+    Bg96gwp: "f1i3iumi"
+  }
+}, {
+  d: [".fk6fouc{font-family:var(--fontFamilyBase);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}"]
+});
+/**
+ * French fry styles
+ * Shared across NavItem, NavCategoryItem, and NavSubItem
+ */
+export const useIndicatorStyles = /*#__PURE__*/__styles({
+  base: {
+    E3zdtr: "f1mdlcz9",
+    xr36ep: "fpil94b",
+    B67388b: "f90z1up",
+    Bitv4sc: "f2ic3ny",
+    Br128sd: "f1xz7mvd",
+    rjyhj6: "f3i5gj0",
+    Bjyk6c5: "fi4v1pz",
+    Dlnsje: "f1tvrmnx",
+    a2br6o: "f1p1ggug",
+    d9w3h3: 0,
+    B3778ie: 0,
+    B4j8arr: 0,
+    Bl18szs: 0,
+    Blrzh8d: "f3b9emi",
+    Bsft5z2: "f13zj6fq",
+    vikyaa: 0,
+    Brlscjf: 0,
+    vvp1qr: 0,
+    t65l24: "f1ak99p5",
+    rc3c53: "fmnu42u"
+  }
+}, {
+  d: [".f1mdlcz9::after{position:absolute;}", ".fpil94b::after{animation-duration:var(--durationFaster);}", ".f90z1up::after{animation-fill-mode:both;}", ".f2ic3ny::after{animation-timing-function:var(--curveLinear);}", ".f1xz7mvd::after{animation-name:f1ayorr4;}", ".f3i5gj0::after{-webkit-margin-start:-16px;margin-inline-start:-16px;}", ".fi4v1pz::after{background-color:var(--colorCompoundBrandForeground1);}", ".f1tvrmnx::after{height:20px;}", ".f1p1ggug::after{width:4px;}", [".f3b9emi::after{border-radius:var(--borderRadiusCircular);}", {
+    p: -1
+  }], ".f13zj6fq::after{content:\"\";}"],
+  k: ["@keyframes f1ayorr4{0%{background:transparent;}100%{background:var(--colorCompoundBrandForeground1);}}"],
+  m: [["@media (forced-colors: active){.f1ak99p5::after{outline:solid 2px var(--colorTransparentStroke);}}", {
+    p: -1,
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.fmnu42u::after{outline-offset:-2px;}}", {
+    m: "(forced-colors: active)"
+  }]]
+});
+/**
+ * Styles for the icon slot
+ * Shared across NavItem, NavCategoryItem, and NavSubItem
+ * We use the grid trick to stack the filled and regular icons on top of each other
+ */
+export const useIconStyles = /*#__PURE__*/__styles({
+  base: {
+    mc9l5x: "f13qh94s",
+    zoa1oz: "fngvled",
+    sshi5w: "f16gbxbe",
+    Bf4jedk: "f11u7vat",
+    Bt984gj: "f1w4ww9t",
+    Brf1p80: "f4d9j23",
+    B68tc82: 0,
+    Bmxbyg5: 0,
+    Bpg54ce: "f1a3p1vp",
+    B9gejnh: 0,
+    yr4pdu: 0,
+    Bvkmzld: 0,
+    mqdk8l: 0,
+    Gbjhqp: "f1uiug86",
+    obb2bi: "fwrh02z",
+    D0sxk3: "f16u1re",
+    Esdz9e: 0,
+    Bqil8sh: 0,
+    Bbom3er: 0,
+    djjtid: 0,
+    mz70lj: "f1jsjwoh",
+    t6yez3: "f8bsbmo"
+  },
+  selected: {
+    C9vb3z: "f5rs5gh",
+    ux3ctl: "f1ioc1t6",
+    Ba906uv: "fey0lwf",
+    D0sxk3: "fxoiby5",
+    hndn0g: "fnh0dvc",
+    cw2nnk: "fp7jrvw",
+    Bkztwl0: "fdt4y6x",
+    H8nmoi: "fvl64og",
+    ipgedg: "ffh1t26"
+  }
+}, {
+  d: [".f13qh94s{display:grid;}", ".fngvled{grid-template-areas:overlay-area;}", ".f16gbxbe{min-height:20px;}", ".f11u7vat{min-width:20px;}", ".f1w4ww9t{align-items:top;}", ".f4d9j23{justify-content:center;}", [".f1a3p1vp{overflow:hidden;}", {
+    p: -1
+  }], [".f1uiug86 .fui-Icon-filled{grid-area:overlay-area;}", {
+    p: -1
+  }], ".fwrh02z .fui-Icon-filled{color:transparent;}", ".f16u1re .fui-Icon-filled{display:none;}", [".f1jsjwoh .fui-Icon-regular{grid-area:overlay-area;}", {
+    p: -1
+  }], ".f8bsbmo .fui-Icon-regular{display:inline;}", ".f5rs5gh .fui-Icon-filled{animation-duration:var(--durationFaster);}", ".f1ioc1t6 .fui-Icon-filled{animation-fill-mode:both;}", ".fey0lwf .fui-Icon-filled{animation-timing-function:var(--curveLinear);}", ".fxoiby5 .fui-Icon-filled{display:inline;}", ".fnh0dvc .fui-Icon-filled{animation-name:f9t3kp0;}", ".fp7jrvw .fui-Icon-regular{animation-duration:var(--durationFaster);}", ".fdt4y6x .fui-Icon-regular{animation-fill-mode:both;}", ".fvl64og .fui-Icon-regular{animation-timing-function:var(--curveLinear);}", ".ffh1t26 .fui-Icon-regular{animation-name:fvunsy5;}"],
+  k: ["@keyframes f9t3kp0{0%{opacity:0;color:transparent;}100%{opacity:1;color:var(--colorNeutralForeground2BrandSelected);}}", "@keyframes fvunsy5{0%{opacity:1;color:var(--colorNeutralForeground2);}100%{opacity:0;color:transparent;}}"]
+});