@crossed/ui/lib/commonjs/styles/typography.js

A universal & performant styling library for React Native, Next.js & React

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);
var typography_exports = {};
__export(typography_exports, {
  fontColorStyles: () => fontColorStyles,
  fontSizeStyles: () => fontSizeStyles,
  fontWeightStyles: () => fontWeightStyles,
  headingTemplateStyles: () => headingTemplateStyles,
  sizeTemplateStyles: () => sizeTemplateStyles
});
module.exports = __toCommonJS(typography_exports);
var import_styled = require("@crossed/styled");
const headingTemplateStyles = (0, import_styled.createStyles)(() => ({
  xl: { base: { fontSize: 32, lineHeight: 36, fontWeight: "900" } },
  lg: { base: { fontSize: 24, lineHeight: 32, fontWeight: "800" } },
  md: { base: { fontSize: 18, lineHeight: 24, fontWeight: "700" } }
}));
const sizeTemplateStyles = (0, import_styled.createStyles)(() => ({
  default: {
    base: { fontSize: 14, lineHeight: 24, fontWeight: "400" },
    media: { md: { fontSize: 16, lineHeight: 24, fontWeight: "400" } }
  },
  md: {
    base: { fontSize: 11, lineHeight: 16, fontWeight: "400" },
    media: { md: { fontSize: 14, lineHeight: 20, fontWeight: "400" } }
  },
  sm: {
    base: { fontSize: 11, lineHeight: 16, fontWeight: "400" },
    media: { md: { fontSize: 12, lineHeight: 16, fontWeight: "400" } }
  }
}));
const fontSizeStyles = (0, import_styled.createStyles)(() => ({
  xs: { base: { fontSize: 11, lineHeight: 14 } },
  sm: { base: { fontSize: 14, lineHeight: 17 } },
  md: {
    base: {
      fontSize: 16,
      lineHeight: 20
    }
  },
  lg: { base: { fontSize: 18, lineHeight: 23 } },
  xl: { base: { fontSize: 24, lineHeight: 30 } },
  h6: { base: { fontSize: 28, lineHeight: 36 } },
  h5: { base: { fontSize: 32, lineHeight: 40 } },
  h4: { base: { fontSize: 36, lineHeight: 46 } },
  h3: { base: { fontSize: 40, lineHeight: 50 } },
  h2: { base: { fontSize: 44, lineHeight: 56 } },
  h1: { base: { fontSize: 48, lineHeight: 60 } }
}));
const fontWeightStyles = (0, import_styled.createStyles)((t) => ({
  xs: {
    base: { fontWeight: t.font.fontWeight.xs },
    media: { md: { fontWeight: t.font.fontWeight.xs } }
  },
  sm: {
    base: { fontWeight: t.font.fontWeight.sm },
    media: { md: { fontWeight: t.font.fontWeight.sm } }
  },
  md: {
    base: { fontWeight: t.font.fontWeight.md },
    media: { md: { fontWeight: t.font.fontWeight.md } }
  },
  lg: {
    base: { fontWeight: t.font.fontWeight.lg },
    media: { md: { fontWeight: t.font.fontWeight.lg } }
  },
  xl: {
    base: { fontWeight: t.font.fontWeight.xl },
    media: { md: { fontWeight: t.font.fontWeight.xl } }
  },
  h6: {
    base: { fontWeight: t.font.fontWeight.h6 },
    media: { md: { fontWeight: t.font.fontWeight.h6 } }
  },
  h5: {
    base: { fontWeight: t.font.fontWeight.h5 },
    media: { md: { fontWeight: t.font.fontWeight.h5 } }
  },
  h4: {
    base: { fontWeight: t.font.fontWeight.h4 },
    media: { md: { fontWeight: t.font.fontWeight.h4 } }
  },
  h3: {
    base: { fontWeight: t.font.fontWeight.h3 },
    media: { md: { fontWeight: t.font.fontWeight.h3 } }
  },
  h2: {
    base: { fontWeight: t.font.fontWeight.h2 },
    media: { md: { fontWeight: t.font.fontWeight.h2 } }
  },
  h1: {
    base: { fontWeight: t.font.fontWeight.h1 },
    media: { md: { fontWeight: t.font.fontWeight.h1 } }
  }
}));
const fontColorStyles = (0, import_styled.createStyles)((t) => ({
  primary: { base: { color: t.colors.text.primary } },
  secondary: { base: { color: t.colors.text.secondary } },
  default: { base: { color: t.colors.text.primary } },
  info: { base: { color: t.colors.info.primary } },
  warning: { base: { color: t.colors.warning.primary } },
  error: { base: { color: t.colors.error.primary } },
  success: { base: { color: t.colors.success.primary } },
  brand: { base: { color: t.colors.text.brand } },
  invert: { base: { color: t.colors.text.invert } }
}));
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  fontColorStyles,
  fontSizeStyles,
  fontWeightStyles,
  headingTemplateStyles,
  sizeTemplateStyles
});
//# sourceMappingURL=typography.js.map