@wordpress/components
Version:
UI components for WordPress.
94 lines (92 loc) • 3.97 kB
JavaScript
;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// packages/components/src/utils/config-values.js
var config_values_exports = {};
__export(config_values_exports, {
default: () => config_values_default
});
module.exports = __toCommonJS(config_values_exports);
var import_colors_values = require("./colors-values");
var CONTROL_HEIGHT = "36px";
var CONTROL_PROPS = {
// These values should be shared with TextControl.
controlPaddingX: 12,
controlPaddingXSmall: 8,
controlPaddingXLarge: 12 * 1.3334,
// TODO: Deprecate
controlBoxShadowFocus: `0 0 0 0.5px ${import_colors_values.COLORS.theme.accent}`,
controlHeight: CONTROL_HEIGHT,
controlHeightXSmall: `calc( ${CONTROL_HEIGHT} * 0.6 )`,
controlHeightSmall: `calc( ${CONTROL_HEIGHT} * 0.8 )`,
controlHeightLarge: `calc( ${CONTROL_HEIGHT} * 1.2 )`,
controlHeightXLarge: `calc( ${CONTROL_HEIGHT} * 1.4 )`
};
var config_values_default = Object.assign({}, CONTROL_PROPS, {
colorDivider: "rgba(0, 0, 0, 0.1)",
colorScrollbarThumb: "rgba(0, 0, 0, 0.2)",
colorScrollbarThumbHover: "rgba(0, 0, 0, 0.5)",
colorScrollbarTrack: "rgba(0, 0, 0, 0.04)",
elevationIntensity: 1,
radiusXSmall: "1px",
radiusSmall: "2px",
radiusMedium: "4px",
radiusLarge: "8px",
radiusFull: "9999px",
radiusRound: "50%",
borderWidth: "1px",
borderWidthFocus: "1.5px",
borderWidthTab: "4px",
spinnerSize: 16,
fontSize: "13px",
fontSizeH1: "calc(2.44 * 13px)",
fontSizeH2: "calc(1.95 * 13px)",
fontSizeH3: "calc(1.56 * 13px)",
fontSizeH4: "calc(1.25 * 13px)",
fontSizeH5: "13px",
fontSizeH6: "calc(0.8 * 13px)",
fontSizeInputMobile: "16px",
fontSizeMobile: "15px",
fontSizeSmall: "calc(0.92 * 13px)",
fontSizeXSmall: "calc(0.75 * 13px)",
fontLineHeightBase: "1.4",
fontWeight: "normal",
fontWeightMedium: "499",
// ensures fallback to 400 (instead of 600)
fontWeightHeading: "600",
gridBase: "4px",
elevationXSmall: `0 1px 1px rgba(0, 0, 0, 0.03), 0 1px 2px rgba(0, 0, 0, 0.02), 0 3px 3px rgba(0, 0, 0, 0.02), 0 4px 4px rgba(0, 0, 0, 0.01)`,
elevationSmall: `0 1px 2px rgba(0, 0, 0, 0.05), 0 2px 3px rgba(0, 0, 0, 0.04), 0 6px 6px rgba(0, 0, 0, 0.03), 0 8px 8px rgba(0, 0, 0, 0.02)`,
elevationMedium: `0 2px 3px rgba(0, 0, 0, 0.05), 0 4px 5px rgba(0, 0, 0, 0.04), 0 12px 12px rgba(0, 0, 0, 0.03), 0 16px 16px rgba(0, 0, 0, 0.02)`,
elevationLarge: `0 5px 15px rgba(0, 0, 0, 0.08), 0 15px 27px rgba(0, 0, 0, 0.07), 0 30px 36px rgba(0, 0, 0, 0.04), 0 50px 43px rgba(0, 0, 0, 0.02)`,
surfaceBackgroundColor: import_colors_values.COLORS.white,
surfaceBackgroundSubtleColor: "#F3F3F3",
surfaceBackgroundTintColor: "#F5F5F5",
surfaceBorderColor: "rgba(0, 0, 0, 0.1)",
surfaceBorderBoldColor: "rgba(0, 0, 0, 0.15)",
surfaceBorderSubtleColor: "rgba(0, 0, 0, 0.05)",
surfaceBackgroundTertiaryColor: import_colors_values.COLORS.white,
surfaceColor: import_colors_values.COLORS.white,
transitionDuration: "200ms",
transitionDurationFast: "160ms",
transitionDurationFaster: "120ms",
transitionDurationFastest: "100ms",
transitionTimingFunction: "cubic-bezier(0.08, 0.52, 0.52, 1)",
transitionTimingFunctionControl: "cubic-bezier(0.12, 0.8, 0.32, 1)"
});
//# sourceMappingURL=config-values.js.map