@redacto.io/consent-sdk-react 4.0.0 → 5.1.0

package/src/RedactoPrivacyCenter/styles/pcStyles.ts

@@ -0,0 +1,813 @@
+/**
+ * Privacy Center SDK Inline Styles
+ * 
+ * All styles use CSS custom properties for theme support.
+ * These styles are completely isolated and won't conflict with host app styles.
+ */
+
+// Helper to get CSS variable value
+const getVar = (varName: string): string => `var(${varName})`;
+
+export const pcStyles = {
+  // Layout utilities
+  flex: {
+    display: 'flex',
+  },
+  flexCol: {
+    display: 'flex',
+    flexDirection: 'column',
+  },
+  flexRow: {
+    display: 'flex',
+    flexDirection: 'row',
+  },
+  itemsCenter: {
+    alignItems: 'center',
+  },
+  itemsStart: {
+    alignItems: 'flex-start',
+  },
+  itemsEnd: {
+    alignItems: 'flex-end',
+  },
+  justifyCenter: {
+    justifyContent: 'center',
+  },
+  justifyBetween: {
+    justifyContent: 'space-between',
+  },
+  justifyEnd: {
+    justifyContent: 'flex-end',
+  },
+  justifyStart: {
+    justifyContent: 'flex-start',
+  },
+  gapXs: {
+    gap: getVar('--pc-spacing-xs'),
+  },
+  gapSm: {
+    gap: getVar('--pc-spacing-sm'),
+  },
+  gapMd: {
+    gap: getVar('--pc-spacing-md'),
+  },
+  gapLg: {
+    gap: getVar('--pc-spacing-lg'),
+  },
+  gapXl: {
+    gap: getVar('--pc-spacing-xl'),
+  },
+  wFull: {
+    width: '100%',
+  },
+  hFull: {
+    height: '100%',
+  },
+  wScreen: {
+    width: '100vw',
+  },
+  hScreen: {
+    height: '100vh',
+  },
+  textCenter: {
+    textAlign: 'center',
+  },
+  textLeft: {
+    textAlign: 'left',
+  },
+  textRight: {
+    textAlign: 'right',
+  },
+  overflowHidden: {
+    overflow: 'hidden',
+  },
+  overflowAuto: {
+    overflow: 'auto',
+  },
+  overflowXAuto: {
+    overflowX: 'auto',
+  },
+  overflowYAuto: {
+    overflowY: 'auto',
+  },
+
+  // Typography
+  text: {
+    fontFamily: getVar('--pc-font-family'),
+    fontSize: getVar('--pc-font-size-base'),
+    lineHeight: 1.5,
+    color: getVar('--pc-text-primary'),
+    margin: 0,
+    padding: 0,
+    boxSizing: 'border-box',
+  },
+  textXs: {
+    fontSize: getVar('--pc-font-size-xs'),
+  },
+  textSm: {
+    fontSize: getVar('--pc-font-size-sm'),
+  },
+  textBase: {
+    fontSize: getVar('--pc-font-size-base'),
+  },
+  textLg: {
+    fontSize: getVar('--pc-font-size-lg'),
+  },
+  textXl: {
+    fontSize: getVar('--pc-font-size-xl'),
+  },
+  text2xl: {
+    fontSize: getVar('--pc-font-size-2xl'),
+  },
+  text3xl: {
+    fontSize: getVar('--pc-font-size-3xl'),
+  },
+  fontWeightNormal: {
+    fontWeight: getVar('--pc-font-weight-normal'),
+  },
+  fontWeightMedium: {
+    fontWeight: getVar('--pc-font-weight-medium'),
+  },
+  fontWeightSemibold: {
+    fontWeight: getVar('--pc-font-weight-semibold'),
+  },
+  fontWeightBold: {
+    fontWeight: getVar('--pc-font-weight-bold'),
+  },
+  textPrimary: {
+    color: getVar('--pc-text-primary'),
+  },
+  textSecondary: {
+    color: getVar('--pc-text-secondary'),
+  },
+  textTertiary: {
+    color: getVar('--pc-text-tertiary'),
+  },
+  textInverse: {
+    color: getVar('--pc-text-inverse'),
+  },
+  textDisabled: {
+    color: getVar('--pc-text-disabled'),
+  },
+
+  // Title styles
+  title: {
+    fontFamily: getVar('--pc-font-family'),
+    fontWeight: getVar('--pc-font-weight-bold'),
+    color: getVar('--pc-text-primary'),
+    margin: 0,
+    padding: 0,
+    lineHeight: 1.2,
+  },
+  titleH1: {
+    fontSize: getVar('--pc-font-size-3xl'),
+  },
+  titleH2: {
+    fontSize: getVar('--pc-font-size-2xl'),
+  },
+  titleH3: {
+    fontSize: getVar('--pc-font-size-xl'),
+  },
+  titleH4: {
+    fontSize: getVar('--pc-font-size-lg'),
+  },
+  titleH5: {
+    fontSize: getVar('--pc-font-size-base'),
+  },
+  titleH6: {
+    fontSize: getVar('--pc-font-size-sm'),
+  },
+
+  // Button styles
+  button: {
+    fontFamily: getVar('--pc-font-family'),
+    fontSize: getVar('--pc-font-size-base'),
+    fontWeight: getVar('--pc-font-weight-medium'),
+    borderRadius: getVar('--pc-border-radius-md'),
+    padding: '0.4375rem 0.875rem',
+    minHeight: '2.25rem',
+    border: 'none',
+    cursor: 'pointer',
+    transition: getVar('--pc-transition-base'),
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: getVar('--pc-spacing-sm'),
+    boxSizing: 'border-box',
+    outline: 'none',
+  },
+  buttonPrimary: {
+    backgroundColor: getVar('--pc-primary'),
+    color: getVar('--pc-text-inverse'),
+  },
+  buttonPrimaryHover: {
+    backgroundColor: getVar('--pc-primary-hover'),
+  },
+  buttonSecondary: {
+    backgroundColor: getVar('--pc-secondary'),
+    color: getVar('--pc-text-inverse'),
+  },
+  buttonOutline: {
+    backgroundColor: 'transparent',
+    border: `1px solid ${getVar('--pc-border-color')}`,
+    color: getVar('--pc-text-primary'),
+  },
+  buttonText: {
+    backgroundColor: 'transparent',
+    border: 'none',
+    color: getVar('--pc-primary'),
+    padding: '0.125rem 0.375rem',
+    minHeight: 'unset',
+  },
+  buttonDanger: {
+    backgroundColor: getVar('--pc-error'),
+    color: getVar('--pc-text-inverse'),
+  },
+  buttonSm: {
+    fontSize: getVar('--pc-font-size-sm'),
+    padding: '0.3125rem 0.625rem',
+    minHeight: '2rem',
+  },
+  buttonLg: {
+    fontSize: getVar('--pc-font-size-lg'),
+    padding: '0.625rem 1.125rem',
+    minHeight: '2.5rem',
+  },
+  buttonDisabled: {
+    opacity: 0.5,
+    cursor: 'not-allowed',
+    pointerEvents: 'none',
+  },
+
+  // Input styles
+  input: {
+    fontFamily: getVar('--pc-font-family'),
+    fontSize: getVar('--pc-font-size-base'),
+    color: getVar('--pc-text-primary'),
+    backgroundColor: getVar('--pc-bg-primary'),
+    border: `1px solid ${getVar('--pc-border-color')}`,
+    borderRadius: getVar('--pc-border-radius-md'),
+    padding: '0.4375rem 0.625rem',
+    minHeight: '2.25rem',
+    width: '100%',
+    boxSizing: 'border-box',
+    outline: 'none',
+    transition: getVar('--pc-transition-base'),
+  },
+  inputFocus: {
+    borderColor: getVar('--pc-border-color'),
+    boxShadow: 'none',
+    outline: 'none',
+  },
+  inputDisabled: {
+    backgroundColor: getVar('--pc-bg-tertiary'),
+    color: getVar('--pc-text-disabled'),
+    cursor: 'not-allowed',
+  },
+  inputError: {
+    borderColor: getVar('--pc-error'),
+  },
+  inputSm: {
+    fontSize: getVar('--pc-font-size-sm'),
+    padding: '0.3125rem 0.5rem',
+    minHeight: '2rem',
+  },
+  inputLg: {
+    fontSize: getVar('--pc-font-size-lg'),
+    padding: '0.625rem 0.875rem',
+    minHeight: '2.5rem',
+  },
+  inputLabel: {
+    display: 'block',
+    fontSize: getVar('--pc-font-size-sm'),
+    fontWeight: getVar('--pc-font-weight-medium'),
+    color: getVar('--pc-text-primary'),
+    marginBottom: getVar('--pc-spacing-xs'),
+  },
+  inputWrapper: {
+    display: 'flex',
+    flexDirection: 'column',
+    width: '100%',
+  },
+  inputPrefix: {
+    display: 'flex',
+    alignItems: 'center',
+    paddingLeft: getVar('--pc-spacing-sm'),
+    paddingRight: getVar('--pc-spacing-sm'),
+    color: getVar('--pc-text-secondary'),
+  },
+  inputSuffix: {
+    display: 'flex',
+    alignItems: 'center',
+    paddingLeft: getVar('--pc-spacing-sm'),
+    color: getVar('--pc-text-secondary'),
+  },
+  inputWithPrefix: {
+    display: 'flex',
+    alignItems: 'center',
+    border: `1px solid ${getVar('--pc-border-color')}`,
+    borderRadius: getVar('--pc-border-radius-md'),
+    backgroundColor: getVar('--pc-bg-primary'),
+  },
+
+  // Textarea styles (extends input)
+  textarea: {
+    fontFamily: getVar('--pc-font-family'),
+    fontSize: getVar('--pc-font-size-base'),
+    color: getVar('--pc-text-primary'),
+    backgroundColor: getVar('--pc-bg-primary'),
+    border: `1px solid ${getVar('--pc-border-color')}`,
+    borderRadius: getVar('--pc-border-radius-md'),
+    padding: '0.5rem 0.625rem',
+    width: '100%',
+    minHeight: '90px',
+    resize: 'vertical',
+    boxSizing: 'border-box',
+    outline: 'none',
+    transition: getVar('--pc-transition-base'),
+  },
+
+  // Checkbox styles
+  checkbox: {
+    width: '20px',
+    height: '20px',
+    cursor: 'pointer',
+    margin: 0,
+    padding: 0,
+    boxSizing: 'border-box',
+  },
+  checkboxSm: {
+    width: '16px',
+    height: '16px',
+  },
+  checkboxLabel: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: getVar('--pc-spacing-sm'),
+    cursor: 'pointer',
+    fontSize: getVar('--pc-font-size-base'),
+    color: getVar('--pc-text-primary'),
+  },
+
+  // Select/Dropdown styles
+  select: {
+    fontFamily: getVar('--pc-font-family'),
+    fontSize: getVar('--pc-font-size-base'),
+    color: getVar('--pc-text-primary'),
+    backgroundColor: getVar('--pc-bg-primary'),
+    border: `1px solid ${getVar('--pc-border-color')}`,
+    borderRadius: getVar('--pc-border-radius-md'),
+    padding: '0.4375rem 0.625rem',
+    minHeight: '2.25rem',
+    width: '100%',
+    cursor: 'pointer',
+    boxSizing: 'border-box',
+    outline: 'none',
+    transition: getVar('--pc-transition-base'),
+  },
+  selectFocus: {
+    borderColor: getVar('--pc-border-color-focus'),
+  },
+  selectOption: {
+    padding: '0.4375rem 0.625rem',
+    cursor: 'pointer',
+    color: getVar('--pc-text-primary'),
+    backgroundColor: getVar('--pc-bg-primary'),
+    whiteSpace: 'nowrap',
+  },
+  selectOptionHover: {
+    backgroundColor: getVar('--pc-bg-hover'),
+  },
+  selectDropdown: {
+    position: 'absolute',
+    left: 0,
+    width: 'auto',
+    minWidth: 'auto',
+    maxWidth: 'max-content',
+    backgroundColor: getVar('--pc-bg-primary'),
+    border: `1px solid ${getVar('--pc-border-color')}`,
+    borderRadius: getVar('--pc-border-radius-md'),
+    boxShadow: getVar('--pc-shadow-lg'),
+    zIndex: 1000,
+    maxHeight: '300px',
+    overflowY: 'auto',
+    transition: 'background-color 0.3s ease, border-color 0.3s ease',
+    boxSizing: 'border-box',
+  },
+
+  // Modal styles
+  modalOverlay: {
+    position: 'fixed',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: getVar('--pc-bg-overlay'),
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    zIndex: 1050,
+    padding: getVar('--pc-spacing-md'),
+    boxSizing: 'border-box',
+  },
+  modal: {
+    backgroundColor: getVar('--pc-bg-primary'),
+    borderRadius: getVar('--pc-border-radius-lg'),
+    boxShadow: getVar('--pc-shadow-xl'),
+    maxWidth: '90vw',
+    maxHeight: '90vh',
+    overflow: 'auto',
+    position: 'relative',
+    display: 'flex',
+    flexDirection: 'column',
+    boxSizing: 'border-box',
+  },
+  modalSm: {
+    width: '400px',
+  },
+  modalMd: {
+    width: '600px',
+  },
+  modalLg: {
+    width: '800px',
+  },
+  modalXl: {
+    width: '1000px',
+  },
+  modalHeader: {
+    padding: getVar('--pc-spacing-lg'),
+    borderBottom: `1px solid ${getVar('--pc-border-color')}`,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+  modalBody: {
+    padding: getVar('--pc-spacing-lg'),
+    flex: 1,
+    overflow: 'auto',
+  },
+  modalFooter: {
+    padding: getVar('--pc-spacing-lg'),
+    borderTop: `1px solid ${getVar('--pc-border-color')}`,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'flex-end',
+    gap: getVar('--pc-spacing-sm'),
+  },
+  modalCloseButton: {
+    background: 'none',
+    border: 'none',
+    cursor: 'pointer',
+    padding: getVar('--pc-spacing-xs'),
+    color: getVar('--pc-text-secondary'),
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: getVar('--pc-border-radius-sm'),
+  },
+
+  // Table styles
+  table: {
+    width: '100%',
+    borderCollapse: 'collapse',
+    fontFamily: getVar('--pc-font-family'),
+    fontSize: getVar('--pc-font-size-base'),
+  },
+  tableHeader: {
+    backgroundColor: getVar('--pc-bg-secondary'),
+  },
+  tableHeaderCell: {
+    padding: '0.625rem 0.75rem',
+    textAlign: 'left',
+    fontSize: getVar('--pc-font-size-sm'),
+    fontWeight: getVar('--pc-font-weight-medium'),
+    color: getVar('--pc-text-primary'),
+    borderBottom: `1px solid ${getVar('--pc-border-color')}`,
+  },
+  tableRow: {
+    borderBottom: `1px solid ${getVar('--pc-border-color')}`,
+    transition: getVar('--pc-transition-fast'),
+  },
+  tableRowHover: {
+    backgroundColor: getVar('--pc-bg-hover'),
+  },
+  tableCell: {
+    padding: '0.625rem 0.75rem',
+    fontSize: getVar('--pc-font-size-sm'),
+    color: getVar('--pc-text-primary'),
+  },
+
+  // Badge styles — pill-shaped, light bg matching text, no border, generous padding (reference style)
+  badge: {
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: '0.25rem 0.625rem',
+    borderRadius: '9999px',
+    fontSize: getVar('--pc-font-size-xs'),
+    fontWeight: 600,
+    lineHeight: 1,
+    boxSizing: 'border-box',
+    minWidth: 0,
+  },
+  badgeSuccess: {
+    backgroundColor: 'rgba(16, 185, 129, 0.1)',
+    color: getVar('--pc-success'),
+  },
+  badgeError: {
+    backgroundColor: 'rgba(239, 68, 68, 0.1)',
+    color: getVar('--pc-error'),
+  },
+  badgeWarning: {
+    backgroundColor: 'rgba(245, 158, 11, 0.1)',
+    color: getVar('--pc-warning'),
+  },
+  badgeInfo: {
+    backgroundColor: 'rgba(59, 130, 246, 0.1)',
+    color: getVar('--pc-info'),
+  },
+  badgeSecondary: {
+    backgroundColor: getVar('--pc-bg-tertiary'),
+    color: getVar('--pc-text-primary'),
+  },
+  badgeSm: {
+    fontSize: '0.75rem',
+    padding: '0.1875rem 0.5rem',
+  },
+
+  // Loader/Spinner styles
+  loader: {
+    display: 'inline-block',
+    border: '3px solid',
+    borderColor: `${getVar('--pc-border-color')} transparent ${getVar('--pc-border-color')} transparent`,
+    borderRadius: '50%',
+    animation: 'pc-spin 1s linear infinite',
+  },
+  loaderSm: {
+    width: '16px',
+    height: '16px',
+    borderWidth: '2px',
+  },
+  loaderMd: {
+    width: '24px',
+    height: '24px',
+    borderWidth: '3px',
+  },
+  loaderLg: {
+    width: '40px',
+    height: '40px',
+    borderWidth: '4px',
+  },
+  loaderPrimary: {
+    borderColor: `${getVar('--pc-primary')} transparent ${getVar('--pc-primary')} transparent`,
+  },
+  loaderInfo: {
+    borderColor: `${getVar('--pc-info')} transparent ${getVar('--pc-info')} transparent`,
+  },
+
+  // Tooltip styles
+  tooltip: {
+    position: 'absolute',
+    backgroundColor: '#1f2937',
+    color: '#ffffff',
+    padding: '0.5rem 0.75rem',
+    borderRadius: getVar('--pc-border-radius-md'),
+    fontSize: getVar('--pc-font-size-sm'),
+    zIndex: 1070,
+    pointerEvents: 'none',
+    whiteSpace: 'nowrap',
+    boxShadow: getVar('--pc-shadow-lg'),
+  },
+  tooltipArrow: {
+    position: 'absolute',
+    width: 0,
+    height: 0,
+    borderStyle: 'solid',
+  },
+
+  // ActionIcon styles
+  actionIcon: {
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: getVar('--pc-spacing-xs'),
+    borderRadius: getVar('--pc-border-radius-sm'),
+    cursor: 'pointer',
+    border: 'none',
+    backgroundColor: 'transparent',
+    color: getVar('--pc-text-primary'),
+    transition: getVar('--pc-transition-fast'),
+  },
+  actionIconHover: {
+    backgroundColor: getVar('--pc-bg-hover'),
+  },
+  actionIconSm: {
+    padding: '0.1875rem',
+    width: '22px',
+    height: '22px',
+  },
+  actionIconMd: {
+    padding: '0.25rem',
+    width: '28px',
+    height: '28px',
+  },
+  actionIconOutline: {
+    border: `1px solid ${getVar('--pc-border-color')}`,
+  },
+  actionIconDisabled: {
+    opacity: 0.5,
+    cursor: 'not-allowed',
+  },
+
+  // Accordion styles
+  accordion: {
+    border: `1px solid ${getVar('--pc-border-color')}`,
+    borderRadius: getVar('--pc-border-radius-md'),
+    overflow: 'hidden',
+  },
+  accordionHeader: {
+    padding: getVar('--pc-spacing-md'),
+    backgroundColor: getVar('--pc-bg-primary'),
+    cursor: 'pointer',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    transition: getVar('--pc-transition-base'),
+  },
+  accordionHeaderHover: {
+    backgroundColor: getVar('--pc-bg-hover'),
+  },
+  accordionBody: {
+    padding: getVar('--pc-spacing-md'),
+    backgroundColor: getVar('--pc-bg-secondary'),
+    borderTop: `1px solid ${getVar('--pc-border-color')}`,
+  },
+
+  // Avatar styles
+  avatar: {
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: '50%',
+    backgroundColor: getVar('--pc-primary'),
+    color: getVar('--pc-text-inverse'),
+    fontWeight: getVar('--pc-font-weight-semibold'),
+  },
+  avatarSm: {
+    width: '24px',
+    height: '24px',
+    fontSize: getVar('--pc-font-size-xs'),
+  },
+  avatarMd: {
+    width: '32px',
+    height: '32px',
+    fontSize: getVar('--pc-font-size-sm'),
+  },
+  avatarLg: {
+    width: '48px',
+    height: '48px',
+    fontSize: getVar('--pc-font-size-base'),
+  },
+
+  // Empty state styles
+  empty: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: getVar('--pc-spacing-2xl'),
+    color: getVar('--pc-text-secondary'),
+    textAlign: 'center',
+  },
+  emptyIcon: {
+    fontSize: getVar('--pc-font-size-3xl'),
+    marginBottom: getVar('--pc-spacing-md'),
+    opacity: 0.5,
+  },
+  emptyText: {
+    fontSize: getVar('--pc-font-size-base'),
+    color: getVar('--pc-text-secondary'),
+  },
+
+  // Container styles
+  container: {
+    width: '100%',
+    maxWidth: '100%',
+    marginLeft: 'auto',
+    marginRight: 'auto',
+    paddingLeft: getVar('--pc-spacing-md'),
+    paddingRight: getVar('--pc-spacing-md'),
+  },
+  containerSm: {
+    maxWidth: '640px',
+  },
+  containerMd: {
+    maxWidth: '768px',
+  },
+  containerLg: {
+    maxWidth: '1024px',
+  },
+  containerXl: {
+    maxWidth: '1280px',
+  },
+
+  // Card styles
+  card: {
+    backgroundColor: getVar('--pc-bg-primary'),
+    borderRadius: getVar('--pc-border-radius-lg'),
+    boxShadow: getVar('--pc-shadow-sm'),
+    padding: getVar('--pc-spacing-lg'),
+    border: `1px solid ${getVar('--pc-border-color')}`,
+  },
+
+  // Spacing utilities
+  pXs: { padding: getVar('--pc-spacing-xs') },
+  pSm: { padding: getVar('--pc-spacing-sm') },
+  pMd: { padding: getVar('--pc-spacing-md') },
+  pLg: { padding: getVar('--pc-spacing-lg') },
+  pXl: { padding: getVar('--pc-spacing-xl') },
+  pxXs: { paddingLeft: getVar('--pc-spacing-xs'), paddingRight: getVar('--pc-spacing-xs') },
+  pxSm: { paddingLeft: getVar('--pc-spacing-sm'), paddingRight: getVar('--pc-spacing-sm') },
+  pxMd: { paddingLeft: getVar('--pc-spacing-md'), paddingRight: getVar('--pc-spacing-md') },
+  pxLg: { paddingLeft: getVar('--pc-spacing-lg'), paddingRight: getVar('--pc-spacing-lg') },
+  pyXs: { paddingTop: getVar('--pc-spacing-xs'), paddingBottom: getVar('--pc-spacing-xs') },
+  pySm: { paddingTop: getVar('--pc-spacing-sm'), paddingBottom: getVar('--pc-spacing-sm') },
+  pyMd: { paddingTop: getVar('--pc-spacing-md'), paddingBottom: getVar('--pc-spacing-md') },
+  pyLg: { paddingTop: getVar('--pc-spacing-lg'), paddingBottom: getVar('--pc-spacing-lg') },
+  mXs: { margin: getVar('--pc-spacing-xs') },
+  mSm: { margin: getVar('--pc-spacing-sm') },
+  mMd: { margin: getVar('--pc-spacing-md') },
+  mLg: { margin: getVar('--pc-spacing-lg') },
+  mXl: { margin: getVar('--pc-spacing-xl') },
+  mbXs: { marginBottom: getVar('--pc-spacing-xs') },
+  mbSm: { marginBottom: getVar('--pc-spacing-sm') },
+  mbMd: { marginBottom: getVar('--pc-spacing-md') },
+  mbLg: { marginBottom: getVar('--pc-spacing-lg') },
+  mtXs: { marginTop: getVar('--pc-spacing-xs') },
+  mtSm: { marginTop: getVar('--pc-spacing-sm') },
+  mtMd: { marginTop: getVar('--pc-spacing-md') },
+  mtLg: { marginTop: getVar('--pc-spacing-lg') },
+  mxXs: { marginLeft: getVar('--pc-spacing-xs'), marginRight: getVar('--pc-spacing-xs') },
+  mxSm: { marginLeft: getVar('--pc-spacing-sm'), marginRight: getVar('--pc-spacing-sm') },
+  mxMd: { marginLeft: getVar('--pc-spacing-md'), marginRight: getVar('--pc-spacing-md') },
+  myXs: { marginTop: getVar('--pc-spacing-xs'), marginBottom: getVar('--pc-spacing-xs') },
+  mySm: { marginTop: getVar('--pc-spacing-sm'), marginBottom: getVar('--pc-spacing-sm') },
+  myMd: { marginTop: getVar('--pc-spacing-md'), marginBottom: getVar('--pc-spacing-md') },
+  mlXs: { marginLeft: getVar('--pc-spacing-xs') },
+  mlSm: { marginLeft: getVar('--pc-spacing-sm') },
+  mlMd: { marginLeft: getVar('--pc-spacing-md') },
+  mlLg: { marginLeft: getVar('--pc-spacing-lg') },
+  mrXs: { marginRight: getVar('--pc-spacing-xs') },
+  mrSm: { marginRight: getVar('--pc-spacing-sm') },
+  mrMd: { marginRight: getVar('--pc-spacing-md') },
+  mrLg: { marginRight: getVar('--pc-spacing-lg') },
+  ptXs: { paddingTop: getVar('--pc-spacing-xs') },
+  ptSm: { paddingTop: getVar('--pc-spacing-sm') },
+  ptMd: { paddingTop: getVar('--pc-spacing-md') },
+  ptLg: { paddingTop: getVar('--pc-spacing-lg') },
+  pbXs: { paddingBottom: getVar('--pc-spacing-xs') },
+  pbSm: { paddingBottom: getVar('--pc-spacing-sm') },
+  pbMd: { paddingBottom: getVar('--pc-spacing-md') },
+  pbLg: { paddingBottom: getVar('--pc-spacing-lg') },
+  plXs: { paddingLeft: getVar('--pc-spacing-xs') },
+  plSm: { paddingLeft: getVar('--pc-spacing-sm') },
+  plMd: { paddingLeft: getVar('--pc-spacing-md') },
+  plLg: { paddingLeft: getVar('--pc-spacing-lg') },
+  prXs: { paddingRight: getVar('--pc-spacing-xs') },
+  prSm: { paddingRight: getVar('--pc-spacing-sm') },
+  prMd: { paddingRight: getVar('--pc-spacing-md') },
+  prLg: { paddingRight: getVar('--pc-spacing-lg') },
+  
+  // Border radius
+  borderRadiusSm: getVar('--pc-border-radius-sm'),
+  borderRadiusMd: getVar('--pc-border-radius-md'),
+  borderRadiusLg: getVar('--pc-border-radius-lg'),
+  borderRadiusXl: getVar('--pc-border-radius-xl'),
+  borderRadius2xl: getVar('--pc-border-radius-2xl'),
+  borderRadius3xl: getVar('--pc-border-radius-3xl'),
+  
+  // Border color
+  borderColor: getVar('--pc-border-color'),
+  borderColorHover: getVar('--pc-border-color-hover'),
+  borderColorFocus: getVar('--pc-border-color-focus'),
+  
+  // Shadow
+  shadowSm: getVar('--pc-shadow-sm'),
+  shadowMd: getVar('--pc-shadow-md'),
+  shadowLg: getVar('--pc-shadow-lg'),
+  shadowXl: getVar('--pc-shadow-xl'),
+  
+  // Background utilities
+  bgPrimary: { backgroundColor: getVar('--pc-bg-primary') },
+  bgSecondary: { backgroundColor: getVar('--pc-bg-secondary') },
+  bgTertiary: { backgroundColor: getVar('--pc-bg-tertiary') },
+  
+  // Warning styles
+  warningBg: getVar('--pc-warning-bg'),
+  warningBorder: getVar('--pc-warning-border'),
+  warningText: getVar('--pc-warning-text'),
+  
+  // Color utilities
+  primary: getVar('--pc-primary'),
+  success: getVar('--pc-success'),
+} as const;