Private
Public Access
1
0
Files

99 lines
2.7 KiB
JavaScript

'use client';
import { __resetStyles, __styles, mergeClasses } from '@griffel/react';
import { tokens } from '@fluentui/react-theme';
import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
export const emptySwatchClassNames = {
root: 'fui-EmptySwatch'
};
/**
* Styles for the root slot
*/
const useStyles = /*#__PURE__*/__resetStyles("r1top892", null, [".r1top892{background-color:var(--colorTransparentBackground);border:1px dashed var(--colorNeutralForeground4);}"]);
const useSizeStyles = /*#__PURE__*/__styles({
"extra-small": {
a9b677: "f64fuq3",
Bqenvij: "fjamq6b"
},
small: {
a9b677: "fq4mcun",
Bqenvij: "frvgh55"
},
medium: {
a9b677: "f1w9dchk",
Bqenvij: "fxldao9"
},
large: {
a9b677: "f1szoe96",
Bqenvij: "f1d2rq10"
}
}, {
d: [".f64fuq3{width:20px;}", ".fjamq6b{height:20px;}", ".fq4mcun{width:24px;}", ".frvgh55{height:24px;}", ".f1w9dchk{width:28px;}", ".fxldao9{height:28px;}", ".f1szoe96{width:32px;}", ".f1d2rq10{height:32px;}"]
});
const useShapeStyles = /*#__PURE__*/__styles({
rounded: {
Beyfa6y: 0,
Bbmb7ep: 0,
Btl43ni: 0,
B7oj6ja: 0,
Dimara: "ft85np5",
Bw81rd7: 0,
kdpuga: 0,
dm238s: 0,
B6xbmo0: 0,
B3whbx2: "f2krc9w"
},
circular: {
Beyfa6y: 0,
Bbmb7ep: 0,
Btl43ni: 0,
B7oj6ja: 0,
Dimara: "f44lkw9",
Bw81rd7: 0,
kdpuga: 0,
dm238s: 0,
B6xbmo0: 0,
B3whbx2: "f1062rbf"
},
square: {
Beyfa6y: 0,
Bbmb7ep: 0,
Btl43ni: 0,
B7oj6ja: 0,
Dimara: "f1fabniw",
Bw81rd7: 0,
kdpuga: 0,
dm238s: 0,
B6xbmo0: 0,
B3whbx2: "fj0ryk1"
}
}, {
d: [[".ft85np5{border-radius:var(--borderRadiusMedium);}", {
p: -1
}], [".f2krc9w[data-fui-focus-visible]{border-radius:var(--borderRadiusMedium);}", {
p: -1
}], [".f44lkw9{border-radius:var(--borderRadiusCircular);}", {
p: -1
}], [".f1062rbf[data-fui-focus-visible]{border-radius:var(--borderRadiusCircular);}", {
p: -1
}], [".f1fabniw{border-radius:var(--borderRadiusNone);}", {
p: -1
}], [".fj0ryk1[data-fui-focus-visible]{border-radius:var(--borderRadiusNone);}", {
p: -1
}]]
});
/**
* Apply styling to the EmptySwatch slots based on the state
*/
export const useEmptySwatchStyles_unstable = state => {
'use no memo';
const styles = useStyles();
const sizeStyles = useSizeStyles();
const shapeStyles = useShapeStyles();
var _state_size;
const size = (_state_size = state.size) !== null && _state_size !== void 0 ? _state_size : 'medium';
var _state_shape;
state.root.className = mergeClasses(emptySwatchClassNames.root, styles, sizeStyles[size], shapeStyles[(_state_shape = state.shape) !== null && _state_shape !== void 0 ? _state_shape : 'square'], state.root.className);
return state;
};