feat: Fluent UI Outlook Lite + connections mockup

node_modules/@fluentui/react-rating/lib/components/RatingItem/useRatingItemStyles.styles.raw.js

@@ -0,0 +1,131 @@
+'use client';
+import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
+import { createFocusOutlineStyle } from '@fluentui/react-tabster';
+export const ratingItemClassNames = {
+    root: 'fui-RatingItem',
+    selectedIcon: 'fui-RatingItem__selectedIcon',
+    unselectedIcon: 'fui-RatingItem__unselectedIcon',
+    halfValueInput: 'fui-RatingItem__halfValueInput',
+    fullValueInput: 'fui-RatingItem__fullValueInput'
+};
+/**
+ * Styles for the root slot
+ */ const useStyles = makeStyles({
+    root: {
+        position: 'relative',
+        ...createFocusOutlineStyle({
+            style: {},
+            selector: 'focus-within'
+        })
+    },
+    small: {
+        fontSize: '12px',
+        width: '12px',
+        height: '12px'
+    },
+    medium: {
+        fontSize: '16px',
+        width: '16px',
+        height: '16px'
+    },
+    large: {
+        fontSize: '20px',
+        width: '20px',
+        height: '20px'
+    },
+    'extra-large': {
+        fontSize: '28px',
+        width: '28px',
+        height: '28px'
+    }
+});
+const useInputBaseClassName = makeResetStyles({
+    position: 'absolute',
+    left: 0,
+    top: 0,
+    right: 0,
+    bottom: 0,
+    boxSizing: 'border-box',
+    margin: 0,
+    opacity: 0,
+    cursor: 'pointer',
+    height: '100%'
+});
+const useInputStyles = makeStyles({
+    lowerHalf: {
+        right: '50%'
+    },
+    upperHalf: {
+        left: '50%'
+    }
+});
+const useIndicatorBaseClassName = makeResetStyles({
+    display: 'flex',
+    overflow: 'hidden',
+    color: tokens.colorNeutralForeground1,
+    fill: 'currentColor',
+    pointerEvents: 'none',
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    top: 0,
+    bottom: 0
+});
+const useIndicatorStyles = makeStyles({
+    lowerHalf: {
+        right: '50%',
+        '& > svg': {
+            flex: '0 0 auto'
+        }
+    },
+    upperHalf: {
+        left: '50%',
+        marginLeft: '-50%'
+    },
+    brand: {
+        color: tokens.colorBrandForeground1
+    },
+    marigold: {
+        color: tokens.colorPaletteMarigoldBorderActive
+    },
+    filled: {
+        color: tokens.colorNeutralBackground6,
+        stroke: tokens.colorTransparentStroke,
+        '@media (forced-colors: active)': {
+            color: 'Canvas',
+            stroke: 'CanvasText'
+        }
+    },
+    brandFilled: {
+        color: tokens.colorBrandBackground2
+    },
+    marigoldFilled: {
+        color: tokens.colorPaletteMarigoldBackground2
+    }
+});
+/**
+ * Apply styling to the RatingItem slots based on the state
+ */ export const useRatingItemStyles_unstable = (state)=>{
+    'use no memo';
+    const { color, size, iconFillWidth, appearance } = state;
+    const styles = useStyles();
+    const inputBaseClassName = useInputBaseClassName();
+    const inputStyles = useInputStyles();
+    const indicatorBaseClassName = useIndicatorBaseClassName();
+    const indicatorStyles = useIndicatorStyles();
+    state.root.className = mergeClasses(ratingItemClassNames.root, styles.root, styles[size], state.root.className);
+    if (state.halfValueInput) {
+        state.halfValueInput.className = mergeClasses(ratingItemClassNames.halfValueInput, inputBaseClassName, inputStyles.lowerHalf, state.halfValueInput.className);
+    }
+    if (state.fullValueInput) {
+        state.fullValueInput.className = mergeClasses(ratingItemClassNames.fullValueInput, inputBaseClassName, state.halfValueInput && inputStyles.upperHalf, state.fullValueInput.className);
+    }
+    if (state.unselectedIcon) {
+        state.unselectedIcon.className = mergeClasses(ratingItemClassNames.unselectedIcon, indicatorBaseClassName, appearance === 'filled' && indicatorStyles.filled, color === 'brand' && (appearance === 'filled' ? indicatorStyles.brandFilled : indicatorStyles.brand), color === 'marigold' && (appearance === 'filled' ? indicatorStyles.marigoldFilled : indicatorStyles.marigold), iconFillWidth === 0.5 && indicatorStyles.upperHalf, state.unselectedIcon.className);
+    }
+    if (state.selectedIcon) {
+        state.selectedIcon.className = mergeClasses(ratingItemClassNames.selectedIcon, indicatorBaseClassName, color === 'brand' && indicatorStyles.brand, color === 'marigold' && indicatorStyles.marigold, iconFillWidth === 0.5 && indicatorStyles.lowerHalf, state.selectedIcon.className);
+    }
+    return state;
+};