@redacto.io/consent-sdk-react 10.0.0-beta.8 → 10.0.0

package/src/RedactoPrivacyCenter/styles/pcStyles.ts

@@ -1,831 +0,0 @@
-/**
- * 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: 'transparent',
-    color: getVar('--pc-primary'),
-    border: `1px solid ${getVar('--pc-primary')}`,
-  },
-  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'),
-  },
-  // Image avatars (org logos) must NOT sit on the brand-colour fill `avatar` sets:
-  // --pc-info resolves to the org's own primary colour, so a brand-coloured mark on a
-  // transparent background would be invisible against it. Neutral surface + hairline
-  // border instead. border-box keeps the rendered box at the exact avatarSm/Md/Lg size.
-  avatarImage: {
-    backgroundColor: getVar('--pc-bg-shell'),
-    border: `1px solid ${getVar('--pc-border-color')}`,
-    boxSizing: 'border-box',
-    objectFit: 'contain',
-    padding: '3px',
-  },
-  // For an image avatar inside a control that already draws the ring and surface
-  // (the navbar avatar button) — otherwise the two rings nest as concentric circles.
-  avatarImageBare: {
-    backgroundColor: 'transparent',
-    border: 'none',
-  },
-
-  // 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;