@plumile/ui 0.1.130 → 0.1.132

package/lib/esm/theme/publicTheme.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"publicTheme.css.js","names":[],"sources":["../../../src/theme/publicTheme.css.ts"],"sourcesContent":["import { createTheme, style } from '@vanilla-extract/css';\n\nimport { opacity, screens, spacing } from './common.js';\nimport { colors } from './colors.js';\nimport { vars } from './themeContract.css.js';\n\nexport const publicLightThemeValues = {\n  spacing,\n  screens,\n  animation: {\n    none: 'none',\n    spin: 'spin 1s linear infinite',\n    ping: 'ping 1s cubic-bezier(0, 0, 0.2, 1) infinite',\n    pulse: 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',\n    bounce: 'bounce 1s infinite',\n  },\n  colors,\n  backgroundImage: {\n    brandDiagonal: `linear-gradient(135deg, ${colors.brandPrimaryRed}, ${colors.brandSecondaryOrange})`,\n    brandDiagonal125: `linear-gradient(125deg, ${colors.brandPrimaryRed}, ${colors.brandSecondaryOrange})`,\n    brandBackgroundGradient: colors.brandBackgroundGradient,\n    pageShellSurface: `linear-gradient(180deg, ${colors.surfaceSecondary} 0%, ${colors.surfaceMuted} 100%)`,\n    floatingChatSurface: `radial-gradient(circle at 0% 0%, ${colors['brandSecondaryOrange-10']} 0%, transparent 55%), linear-gradient(135deg, ${colors.surface} 0%, ${colors.surfaceSecondary} 100%)`,\n    loadingShimmer: `linear-gradient(90deg, ${colors.surfaceMuted} 0%, ${colors.surfaceSecondary} 45%, ${colors.surfaceMuted} 90%)`,\n    surfaceChrome: `linear-gradient(180deg, ${colors.surface} 0%, ${colors.surfaceSecondary} 100%)`,\n  },\n  borderRadius: {\n    none: '0px',\n    sm: '0.125rem',\n    default: '0.25rem',\n    md: '0.375rem',\n    lg: '0.5rem',\n    xl: '0.75rem',\n    '2xl': '1rem',\n    '3xl': '1.5rem',\n    '4xl': '2rem',\n    '1/2': '50%',\n    full: '9999px',\n  },\n  borderSpacing: spacing,\n  borderWidth: {\n    ...spacing,\n    default: '1px',\n    0: '0px',\n    2: '2px',\n    4: '4px',\n    6: '6px',\n    8: '8px',\n  },\n  boxShadow: {\n    sm: '0 1px 2px 0 rgb(0 0 0 / 0.05)',\n    default: '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)',\n    md: '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',\n    lg: '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)',\n    xl: '0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)',\n    '2xl': '0 25px 50px -12px rgb(0 0 0 / 0.25)',\n    inkSoft: '0 6px 18px rgb(15 23 42 / 0.06)',\n    inkGlow: '0 0 45px rgb(15 23 42 / 0.12)',\n    brandGlow: '0 10px 24px rgb(252 106 81 / 0.25)',\n    brandCardGlow: `0 0px 72px color-mix(in srgb, ${colors.black} 20%, transparent)`,\n    authCardGlow: `0 0 96px color-mix(in srgb, ${colors.black} 20%, transparent)`,\n    profileDropdownShadow: `0 18px 36px color-mix(in srgb, ${colors.brandDarkGray} 12%, transparent)`,\n    badgeInset: `inset 0 0 0 1px ${colors.borderSubtle}`,\n    badgeDotRing: `0 0 0 2px ${colors.surface}`,\n    primaryInsetRing: `inset 0 0 0 1px ${colors.primary}`,\n    primaryLightRing: `0 0 0 1px ${colors.primaryLight}`,\n    primaryLightRingStrong: `0 0 0 2px ${colors.primaryLight}`,\n    focusRing: `0 0 0 3px ${colors.primaryLight}`,\n    focusRingError: `0 0 0 3px color-mix(in srgb, ${colors.error} 20%, transparent)`,\n    focusRingBrand: `0 0 0 2px ${colors.brandSecondaryOrange}`,\n    interactiveHover: `0 8px 18px color-mix(in srgb, ${colors.black} 8%, transparent)`,\n    interactivePressed: `0 2px 6px color-mix(in srgb, ${colors.black} 10%, transparent)`,\n    successLightRing: `0 0 0 2px ${colors.successLight}`,\n    sidebarActiveInset: `inset 2px 0 0 ${colors['blue-500']}`,\n    inner: 'inset 0 2px 4px 0 rgb(0 0 0 / 0.05)',\n    none: 'none',\n  },\n  dropShadow: {\n    sm: '0 1px 1px rgb(0 0 0 / 0.05)',\n    default: ['0 1px 2px rgb(0 0 0 / 0.1)', '0 1px 1px rgb(0 0 0 / 0.06)'].join(\n      ', ',\n    ),\n    md: ['0 4px 3px rgb(0 0 0 / 0.07)', '0 2px 2px rgb(0 0 0 / 0.06)'].join(\n      ', ',\n    ),\n    lg: ['0 10px 8px rgb(0 0 0 / 0.04)', '0 4px 3px rgb(0 0 0 / 0.1)'].join(\n      ', ',\n    ),\n    xl: ['0 20px 13px rgb(0 0 0 / 0.03)', '0 8px 5px rgb(0 0 0 / 0.08)'].join(\n      ', ',\n    ),\n    '2xl': '0 25px 25px rgb(0 0 0 / 0.15)',\n    none: '0 0 #0000',\n  },\n  grayscale: {\n    0: '0',\n    default: '100%',\n  },\n  hueRotate: {\n    0: '0deg',\n    15: '15deg',\n    30: '30deg',\n    60: '60deg',\n    90: '90deg',\n    180: '180deg',\n  },\n  invert: {\n    0: '0',\n    default: '100%',\n  },\n  flex: {\n    1: '1 1 0%',\n    auto: '1 1 auto',\n    initial: '0 1 auto',\n    none: 'none',\n  },\n  flexBasis: {\n    ...spacing,\n    260: '260px',\n    '1/2': '50%',\n    '1/3': '33.333333%',\n    '2/3': '66.666667%',\n    '1/4': '25%',\n    '2/4': '50%',\n    '3/4': '75%',\n    '1/5': '20%',\n    '2/5': '40%',\n    '3/5': '60%',\n    '4/5': '80%',\n    '1/6': '16.666667%',\n    '2/6': '33.333333%',\n    '3/6': '50%',\n    '4/6': '66.666667%',\n    '5/6': '83.333333%',\n    '1/12': '8.333333%',\n    '2/12': '16.666667%',\n    '3/12': '25%',\n    '4/12': '33.333333%',\n    '5/12': '41.666667%',\n    '6/12': '50%',\n    '7/12': '58.333333%',\n    '8/12': '66.666667%',\n    '9/12': '75%',\n    '10/12': '83.333333%',\n    '11/12': '91.666667%',\n    full: '100%',\n  },\n  flexGrow: {\n    0: '0',\n    default: '1',\n  },\n  flexShrink: {\n    0: '0',\n    default: '1',\n  },\n  fontFamily: {\n    sans: [\n      'ui-sans-serif',\n      'system-ui',\n      '-apple-system',\n      'BlinkMacSystemFont',\n      '\"Segoe UI\"',\n      'Roboto',\n      '\"Helvetica Neue\"',\n      'Arial',\n      '\"Noto Sans\"',\n      'sans-serif',\n      '\"Apple Color Emoji\"',\n      '\"Segoe UI Emoji\"',\n      '\"Segoe UI Symbol\"',\n      '\"Noto Color Emoji\"',\n    ].join(', '),\n    serif: [\n      'ui-serif',\n      'Georgia',\n      'Cambria',\n      '\"Times New Roman\"',\n      'Times',\n      'serif',\n    ].join(', '),\n    mono: [\n      'ui-monospace',\n      'SFMono-Regular',\n      'Menlo',\n      'Monaco',\n      'Consolas',\n      '\"Liberation Mono\"',\n      '\"Courier New\"',\n      'monospace',\n    ].join(', '),\n  },\n  fontSize: {\n    '3xs': '0.5rem',\n    '2xs': '0.625rem',\n    xs: '0.75rem',\n    sm: '0.875rem',\n    base: '1rem',\n    lg: '1.125rem',\n    xl: '1.25rem',\n    '2xl': '1.5rem',\n    '3xl': '1.875rem',\n    '4xl': '2.5rem',\n    '5xl': '3rem',\n    '6xl': '3.75rem',\n    '7xl': '4.5rem',\n    '8xl': '6rem',\n    '9xl': '8rem',\n    responsive: 'clamp(0.700rem, 0.7vw, 0.875rem)',\n  },\n  fontWeight: {\n    thin: '100',\n    extralight: '200',\n    light: '300',\n    normal: '400',\n    medium: '500',\n    semibold: '600',\n    bold: '700',\n    extrabold: '800',\n    black: '900',\n  },\n  gridAutoColumns: {\n    auto: 'auto',\n    min: 'min-content',\n    max: 'max-content',\n    fr: 'minmax(0, 1fr)',\n  },\n  gridAutoRows: {\n    auto: 'auto',\n    min: 'min-content',\n    max: 'max-content',\n    fr: 'minmax(0, 1fr)',\n  },\n  gridColumn: {\n    auto: 'auto',\n    'span-1': 'span 1 / span 1',\n    'span-2': 'span 2 / span 2',\n    'span-3': 'span 3 / span 3',\n    'span-4': 'span 4 / span 4',\n    'span-5': 'span 5 / span 5',\n    'span-6': 'span 6 / span 6',\n    'span-7': 'span 7 / span 7',\n    'span-8': 'span 8 / span 8',\n    'span-9': 'span 9 / span 9',\n    'span-10': 'span 10 / span 10',\n    'span-11': 'span 11 / span 11',\n    'span-12': 'span 12 / span 12',\n    'span-full': '1 / -1',\n  },\n  gridColumnEnd: {\n    auto: 'auto',\n    1: '1',\n    2: '2',\n    3: '3',\n    4: '4',\n    5: '5',\n    6: '6',\n    7: '7',\n    8: '8',\n    9: '9',\n    10: '10',\n    11: '11',\n    12: '12',\n    13: '13',\n  },\n  gridColumnStart: {\n    auto: 'auto',\n    1: '1',\n    2: '2',\n    3: '3',\n    4: '4',\n    5: '5',\n    6: '6',\n    7: '7',\n    8: '8',\n    9: '9',\n    10: '10',\n    11: '11',\n    12: '12',\n    13: '13',\n  },\n  gridRow: {\n    auto: 'auto',\n    'span-1': 'span 1 / span 1',\n    'span-2': 'span 2 / span 2',\n    'span-3': 'span 3 / span 3',\n    'span-4': 'span 4 / span 4',\n    'span-5': 'span 5 / span 5',\n    'span-6': 'span 6 / span 6',\n    'span-full': '1 / -1',\n  },\n  gridRowStart: {\n    auto: 'auto',\n    1: '1',\n    2: '2',\n    3: '3',\n    4: '4',\n    5: '5',\n    6: '6',\n    7: '7',\n  },\n  gridRowEnd: {\n    auto: 'auto',\n    1: '1',\n    2: '2',\n    3: '3',\n    4: '4',\n    5: '5',\n    6: '6',\n    7: '7',\n  },\n  gridTemplateColumns: {\n    none: 'none',\n    1: 'repeat(1, minmax(0, 1fr))',\n    2: 'repeat(2, minmax(0, 1fr))',\n    3: 'repeat(3, minmax(0, 1fr))',\n    4: 'repeat(4, minmax(0, 1fr))',\n    5: 'repeat(5, minmax(0, 1fr))',\n    6: 'repeat(6, minmax(0, 1fr))',\n    7: 'repeat(7, minmax(0, 1fr))',\n    8: 'repeat(8, minmax(0, 1fr))',\n    9: 'repeat(9, minmax(0, 1fr))',\n    10: 'repeat(10, minmax(0, 1fr))',\n    11: 'repeat(11, minmax(0, 1fr))',\n    12: 'repeat(12, minmax(0, 1fr))',\n    detailSingle: 'minmax(0, 1fr)',\n    twoFrOneFr: 'minmax(0, 2fr) minmax(0, 1fr)',\n    detailAside320: 'minmax(0, 1fr) 320px',\n    minmax0Auto: 'minmax(0, 1fr) auto',\n    toolbarActions: 'minmax(0, 1fr) auto auto',\n    backofficeList: 'minmax(0, 1fr)',\n    backofficeDetail: 'minmax(0, 1fr) minmax(18rem, 24rem)',\n    settingsSplit: 'minmax(14rem, 18rem) minmax(0, 1fr)',\n    splitViewSplit: 'minmax(16rem, 26rem) minmax(0, 1fr)',\n    keyValueSplit: 'minmax(0, 10rem) minmax(0, 1fr)',\n    metadataStripSplit: 'minmax(0, 128px) minmax(0, 1fr)',\n    dashboardUneven: '1.1fr 1.3fr 1fr',\n    userProfileSplit: 'minmax(220px, 260px) minmax(0, 1fr)',\n    repeat4Fr: 'repeat(4, 1fr)',\n    autoFillMinmax320: 'repeat(auto-fill, minmax(320px, 1fr))',\n    autoFitMinmax0: 'repeat(auto-fit, minmax(0, 1fr))',\n    autoFitMinmax12_5rem: 'repeat(auto-fit, minmax(12.5rem, 1fr))',\n    autoFitMinmax120: 'repeat(auto-fit, minmax(120px, 1fr))',\n    autoFitMinmax160: 'repeat(auto-fit, minmax(160px, 1fr))',\n    autoFitMinmax180: 'repeat(auto-fit, minmax(180px, 1fr))',\n    autoFitMinmax200: 'repeat(auto-fit, minmax(200px, 1fr))',\n    autoFitMinmax220: 'repeat(auto-fit, minmax(220px, 1fr))',\n    autoFitMinmax240: 'repeat(auto-fit, minmax(240px, 1fr))',\n    autoFitMinmax260: 'repeat(auto-fit, minmax(260px, 1fr))',\n    autoFitMinmax280: 'repeat(auto-fit, minmax(280px, 1fr))',\n    autoFitMinmax320: 'repeat(auto-fit, minmax(320px, 1fr))',\n  },\n  gridTemplateRows: {\n    none: 'none',\n    1: 'repeat(1, minmax(0, 1fr))',\n    2: 'repeat(2, minmax(0, 1fr))',\n    3: 'repeat(3, minmax(0, 1fr))',\n    4: 'repeat(4, minmax(0, 1fr))',\n    5: 'repeat(5, minmax(0, 1fr))',\n    6: 'repeat(6, minmax(0, 1fr))',\n    autoMinmax0: 'auto minmax(0, 1fr)',\n    autoAutoMinmax0: 'auto auto minmax(0, 1fr)',\n    minmax0Auto: 'minmax(0, 1fr) auto',\n    fr0: '0fr',\n    fr1: '1fr',\n  },\n  left: {\n    ...spacing,\n    '1/2': '50%',\n  },\n  top: {\n    ...spacing,\n    '1/2': '50%',\n  },\n  height: {\n    ...spacing,\n    1.1: '1.1rem',\n    260: '260px',\n    300: '300px',\n    340: '340px',\n    '1/2': '50%',\n    '1/3': '33.333333%',\n    '2/3': '66.666667%',\n    '1/4': '25%',\n    '2/4': '50%',\n    '3/4': '75%',\n    '1/5': '20%',\n    '2/5': '40%',\n    '3/5': '60%',\n    '4/5': '80%',\n    '1/6': '16.666667%',\n    '2/6': '33.333333%',\n    '3/6': '50%',\n    '4/6': '66.666667%',\n    '5/6': '83.333333%',\n    full: '100%',\n    screen: '100vh',\n    min: 'min-content',\n    max: 'max-content',\n    fit: 'fit-content',\n    auto: 'auto',\n  },\n  inset: {\n    ...spacing,\n    '1/2': '50%',\n    '1/3': '33.333333%',\n    '2/3': '66.666667%',\n    '1/4': '25%',\n    '2/4': '50%',\n    '3/4': '75%',\n    full: '100%',\n  },\n  keyframes: {\n    spin: {\n      to: {\n        transform: 'rotate(360deg)',\n      },\n    },\n    ping: {\n      '75%, 100%': {\n        transform: 'scale(2)',\n        opacity: '0',\n      },\n    },\n    pulse: {\n      '50%': {\n        opacity: '.5',\n      },\n    },\n    bounce: {\n      '0%, 100%': {\n        transform: 'translateY(-25%)',\n        animationTimingFunction: 'cubic-bezier(0.8,0,1,1)',\n      },\n      '50%': {\n        transform: 'none',\n        animationTimingFunction: 'cubic-bezier(0,0,0.2,1)',\n      },\n    },\n  },\n  letterSpacing: {\n    tighter: '-0.05em',\n    tight: '-0.025em',\n    normal: '0em',\n    wide: '0.025em',\n    wider: '0.05em',\n    widest: '0.125em',\n    caps: '0.08em',\n    capsTight: '0.06em',\n    capsNarrow: '0.04em',\n  },\n  wordSpacing: {\n    tighter: '-0.05em',\n    tight: '-0.025em',\n    normal: '0em',\n    wide: '0.025em',\n    wider: '0.05em',\n    widest: '0.125em',\n  },\n  lineHeight: {\n    ...spacing,\n    1.2: '1.2',\n    1.3: '1.3',\n    1.4: '1.4',\n    1.45: '1.45',\n    1.5: '1.5',\n    1.6: '1.6',\n    1.7: '1.7',\n    none: '1',\n    tight: '1.25',\n    snug: '1.375',\n    normal: '1.5',\n    relaxed: '1.625',\n    loose: '2',\n    '3xs': '0.75rem',\n    '2xs': '0.85rem',\n    xs: '1rem',\n    sm: '1.25rem',\n    base: '1.5rem',\n    lg: '1.75rem',\n    xl: '1.75rem',\n    '2xl': '2rem',\n    '3xl': '2.25rem',\n    '4xl': 'normal',\n    '5xl': '1',\n    '6xl': '1',\n    '7xl': '1',\n    '8xl': '1',\n    '9xl': '1',\n    responsive: '1',\n  },\n  listStyleType: {\n    none: 'none',\n    disc: 'disc',\n    decimal: 'decimal',\n  },\n  margin: {\n    ...spacing,\n  },\n  maxHeight: {\n    ...spacing,\n    '50vh': '50vh',\n    '70vh': '70vh',\n    '90vh': '90vh',\n    none: 'none',\n    full: '100%',\n    screen: '100vh',\n    min: 'min-content',\n    max: 'max-content',\n    fit: 'fit-content',\n  },\n  maxWidth: {\n    '2xl': '42rem',\n    '3xl': '48rem',\n    '4xl': '56rem',\n    '5xl': '64rem',\n    '6xl': '72rem',\n    '7xl': '80rem',\n    '12rem': '12rem',\n    '26rem': '26rem',\n    '50vw': '50vw',\n    '10ch': '10ch',\n    '18ch': '18ch',\n    '28ch': '28ch',\n    '44ch': '44ch',\n    '64ch': '64ch',\n    960: '960px',\n    '2/5': '40%',\n    '3/4': '75%',\n    700: '700px',\n    720: '720px',\n    800: '800px',\n    640: '640px',\n    0: '0rem',\n    fit: 'fit-content',\n    full: '100%',\n    lg: '32rem',\n    max: 'max-content',\n    md: '28rem',\n    min: 'min-content',\n    none: 'none',\n    prose: '65ch',\n    sm: '24rem',\n    xl: '36rem',\n    xs: '20rem',\n  },\n  minHeight: {\n    ...spacing,\n    350: '350px',\n    360: '360px',\n    0: '0px',\n    fit: 'fit-content',\n    full: '100%',\n    max: 'max-content',\n    min: 'min-content',\n    screen: '100vh',\n    auto: 'auto',\n  },\n  minWidth: {\n    0: '0px',\n    360: '360px',\n    640: '640px',\n    fit: 'fit-content',\n    full: '100%',\n    max: 'max-content',\n    min: 'min-content',\n  },\n  objectPosition: {\n    'left-bottom': 'left bottom',\n    'left-top': 'left top',\n    'right-bottom': 'right bottom',\n    'right-top': 'right top',\n    bottom: 'bottom',\n    center: 'center',\n    left: 'left',\n    right: 'right',\n    top: 'top',\n  },\n  opacity,\n  order: {\n    first: '-9999',\n    last: '9999',\n    none: '0',\n    1: '1',\n    2: '2',\n    3: '3',\n    4: '4',\n    5: '5',\n    6: '6',\n    7: '7',\n    8: '8',\n    9: '9',\n    10: '10',\n    11: '11',\n    12: '12',\n  },\n  outlineOffset: {\n    0: '0px',\n    1: '1px',\n    2: '2px',\n    4: '4px',\n    8: '8px',\n  },\n  outlineWidth: {\n    0: '0px',\n    1: '1px',\n    2: '2px',\n    4: '4px',\n    8: '8px',\n  },\n  rotate: {\n    0: '0deg',\n    1: '1deg',\n    2: '2deg',\n    3: '3deg',\n    6: '6deg',\n    12: '12deg',\n    45: '45deg',\n    90: '90deg',\n    180: '180deg',\n  },\n  scale: {\n    0: '0',\n    50: '.5',\n    75: '.75',\n    90: '.9',\n    95: '.95',\n    100: '1',\n    105: '1.05',\n    110: '1.1',\n    125: '1.25',\n    150: '1.5',\n  },\n  sepia: {\n    0: '0',\n    default: '100%',\n  },\n  skew: {\n    0: '0deg',\n    1: '1deg',\n    2: '2deg',\n    3: '3deg',\n    6: '6deg',\n    12: '12deg',\n  },\n  stroke: {\n    ...colors,\n    none: 'none',\n  },\n  strokeWidth: {\n    0: '0',\n    1: '1',\n    2: '2',\n  },\n  textDecorationThickness: {\n    auto: 'auto',\n    'from-font': 'from-font',\n    0: '0px',\n    1: '1px',\n    2: '2px',\n    4: '4px',\n    8: '8px',\n  },\n  textUnderlineOffset: {\n    auto: 'auto',\n    0: '0px',\n    1: '1px',\n    2: '2px',\n    4: '4px',\n    8: '8px',\n  },\n  transform: {\n    0: 'translateX(0%)',\n    100: 'translateX(100%)',\n    200: 'translateX(200%)',\n    center: 'translate(-50%, -50%)',\n    left: 'translateX(0%)',\n    right: 'translateX(200%)',\n    none: 'none',\n    press: 'scale(0.98)',\n    lift: 'translateY(-1px)',\n    y0: 'translateY(0)',\n    centerY: 'translateY(-50%)',\n  },\n  transitionDelay: {\n    75: '75ms',\n    100: '100ms',\n    150: '150ms',\n    200: '200ms',\n    300: '300ms',\n    500: '500ms',\n    700: '700ms',\n    1000: '1000ms',\n  },\n  transitionDuration: {\n    default: '150ms',\n    75: '75ms',\n    100: '100ms',\n    120: '120ms',\n    150: '150ms',\n    160: '160ms',\n    200: '200ms',\n    300: '300ms',\n    500: '500ms',\n    700: '700ms',\n    1000: '1000ms',\n  },\n  transitionProperty: {\n    none: 'none',\n    all: 'all',\n    default:\n      'color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter',\n    colors:\n      'color, background-color, border-color, text-decoration-color, fill, stroke',\n    gap: 'gap',\n    gridTemplateRows: 'grid-template-rows',\n    gridTemplateRowsOpacity: 'grid-template-rows, opacity',\n    left: 'left',\n    opacity: 'opacity',\n    opacityVisibility: 'opacity, visibility',\n    shadow: 'box-shadow',\n    transform: 'transform',\n    width: 'width',\n  },\n  transitionTimingFunction: {\n    default: 'cubic-bezier(0.4, 0, 0.2, 1)',\n    linear: 'linear',\n    ease: 'ease',\n    in: 'cubic-bezier(0.4, 0, 1, 1)',\n    'ease-in-out': 'ease-in-out',\n    out: 'cubic-bezier(0, 0, 0.2, 1)',\n    'in-out': 'cubic-bezier(0.4, 0, 0.2, 1)',\n  },\n  width: {\n    ...spacing,\n    1.1: '1.1rem',\n    auto: 'auto',\n    140: '140px',\n    260: '260px',\n    300: '300px',\n    '8%': '8%',\n    '10%': '10%',\n    '12%': '12%',\n    '15%': '15%',\n    '16%': '16%',\n    '22%': '22%',\n    '26%': '26%',\n    '30%': '30%',\n    '70%': '70%',\n    '1/2': '50%',\n    '1/3': '33.333333%',\n    '2/3': '66.666667%',\n    '1/4': '25%',\n    '2/4': '50%',\n    '3/4': '75%',\n    '1/5': '20%',\n    '2/5': '40%',\n    '3/5': '60%',\n    '4/5': '80%',\n    '1/6': '16.666667%',\n    '2/6': '33.333333%',\n    '3/6': '50%',\n    '4/6': '66.666667%',\n    '5/6': '83.333333%',\n    '1/12': '8.333333%',\n    '2/12': '16.666667%',\n    '3/12': '25%',\n    '4/12': '33.333333%',\n    '5/12': '41.666667%',\n    '6/12': '50%',\n    '7/12': '58.333333%',\n    '8/12': '66.666667%',\n    '9/12': '75%',\n    '10/12': '83.333333%',\n    '11/12': '91.666667%',\n    full: '100%',\n    screen: '100vw',\n    min: 'min-content',\n    max: 'max-content',\n    fit: 'fit-content',\n  },\n  zIndex: {\n    auto: 'auto',\n    modal: '1000',\n    0: '0',\n    1: '1',\n    2: '2',\n    4: '4',\n    10: '10',\n    20: '20',\n    30: '30',\n    40: '40',\n    50: '50',\n  },\n} as const;\n\ntype ThemeValueTree<T> = T extends string\n  ? string\n  : {\n      readonly [Key in keyof T]: ThemeValueTree<T[Key]>;\n    };\n\nexport type ThemeValues = ThemeValueTree<typeof publicLightThemeValues>;\n\nconst publicDarkColors = {\n  ...colors,\n  primaryLight: 'rgba(165, 2, 70, 0.22)',\n  secondaryLight: '#173126',\n  surface: '#11161d',\n  surfaceSecondary: '#171d26',\n  surfaceMuted: '#1c2430',\n  surfaceElevated: '#202938',\n  background: '#0b1016',\n  backgroundSecondary: '#121822',\n  backgroundTertiary: '#18202c',\n  backgroundModifier: '#283244',\n  text: '#f5f7fb',\n  textSecondary: '#c5ccda',\n  textMuted: '#98a3b7',\n  border: '#2f3a4d',\n  borderSubtle: '#263040',\n  borderStrong: '#415069',\n  borderLight: '#364357',\n  successLight: '#183626',\n  warningLight: '#3b2d16',\n  infoLight: '#182544',\n  brandSecondaryOrange: '#8f6771',\n  'brandSecondaryOrange-10': 'rgba(143, 103, 113, 0.10)',\n  'brandSecondaryOrange-20': 'rgba(143, 103, 113, 0.20)',\n  accent: '#b36a78',\n  brandLightGray: '#1a212d',\n  brandDarkGray: '#eef2f8',\n} as const;\n\nexport const publicDarkThemeValues = {\n  ...publicLightThemeValues,\n  colors: publicDarkColors,\n  backgroundImage: {\n    ...publicLightThemeValues.backgroundImage,\n    pageShellSurface: `linear-gradient(180deg, ${publicDarkColors.surfaceSecondary} 0%, ${publicDarkColors.surfaceMuted} 100%)`,\n    floatingChatSurface: `radial-gradient(circle at 0% 0%, ${publicDarkColors['brandSecondaryOrange-10']} 0%, transparent 55%), linear-gradient(135deg, ${publicDarkColors.surface} 0%, ${publicDarkColors.surfaceSecondary} 100%)`,\n    loadingShimmer: `linear-gradient(90deg, ${publicDarkColors.surfaceMuted} 0%, ${publicDarkColors.surfaceSecondary} 45%, ${publicDarkColors.surfaceMuted} 90%)`,\n    surfaceChrome: `linear-gradient(180deg, ${publicDarkColors.surface} 0%, ${publicDarkColors.surfaceSecondary} 100%)`,\n  },\n  boxShadow: {\n    ...publicLightThemeValues.boxShadow,\n    inkSoft: '0 6px 18px rgb(0 0 0 / 0.28)',\n    inkGlow: '0 0 45px rgb(0 0 0 / 0.35)',\n    brandCardGlow: `0 0px 72px color-mix(in srgb, ${publicDarkColors.black} 38%, transparent)`,\n    authCardGlow: `0 0 96px color-mix(in srgb, ${publicDarkColors.black} 42%, transparent)`,\n    profileDropdownShadow: `0 18px 36px color-mix(in srgb, ${publicDarkColors.black} 40%, transparent)`,\n    badgeInset: `inset 0 0 0 1px ${publicDarkColors.borderSubtle}`,\n    badgeDotRing: `0 0 0 2px ${publicDarkColors.surface}`,\n    primaryInsetRing: `inset 0 0 0 1px ${publicDarkColors.primary}`,\n    primaryLightRing: `0 0 0 1px ${publicDarkColors.primaryLight}`,\n    primaryLightRingStrong: `0 0 0 2px ${publicDarkColors.primaryLight}`,\n    focusRing: `0 0 0 3px ${publicDarkColors.primaryLight}`,\n    focusRingError: `0 0 0 3px color-mix(in srgb, ${publicDarkColors.error} 24%, transparent)`,\n    focusRingBrand: `0 0 0 2px ${publicDarkColors.brandSecondaryOrange}`,\n    interactiveHover: `0 8px 18px color-mix(in srgb, ${publicDarkColors.black} 28%, transparent)`,\n    interactivePressed: `0 2px 6px color-mix(in srgb, ${publicDarkColors.black} 36%, transparent)`,\n    successLightRing: `0 0 0 2px ${publicDarkColors.successLight}`,\n    sidebarActiveInset: `inset 2px 0 0 ${publicDarkColors['blue-400']}`,\n    inner: 'inset 0 2px 4px 0 rgb(0 0 0 / 0.2)',\n  },\n  stroke: {\n    ...publicDarkColors,\n    none: 'none',\n  },\n} as const satisfies ThemeValues;\n\nconst publicLightThemeVarsClass = createTheme(vars, publicLightThemeValues);\nconst publicDarkThemeVarsClass = createTheme(vars, publicDarkThemeValues);\n\nexport const publicLightThemeClass = style([\n  publicLightThemeVarsClass,\n  {\n    colorScheme: 'light',\n  },\n]);\n\nexport const publicDarkThemeClass = style([\n  publicDarkThemeVarsClass,\n  {\n    colorScheme: 'dark',\n  },\n]);\n"],"mappings":""}

package/lib/esm/theme/sprinkles.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"sprinkles.css.js","names":[],"sources":["../../../src/theme/sprinkles.css.ts"],"sourcesContent":["import { defineProperties, createSprinkles } from '@vanilla-extract/sprinkles';\nimport { vars } from './themeContract.js';\nimport { screens, spacing } from './common.js';\n\nconst NONE = 'none' as const;\nconst FLEX_START = 'flex-start' as const;\nconst FLEX_END = 'flex-end' as const;\nconst CENTER = 'center' as const;\nconst STRETCH = 'stretch' as const;\nconst BASELINE = 'baseline' as const;\n\nconst otherProperties = defineProperties({\n  properties: {\n    all: ['inherit', 'initial', 'revert', 'revert-layer', 'unset'],\n    appearance: ['auto', 'none'],\n    cursor: [\n      'alias',\n      'all-scroll',\n      'auto',\n      'cell',\n      'col-resize',\n      'context-menu',\n      'copy',\n      'crosshair',\n      'default',\n      'e-resize',\n      'ew-resize',\n      'grab',\n      'grabbing',\n      'help',\n      'move',\n      'n-resize',\n      'ne-resize',\n      'nesw-resize',\n      'no-drop',\n      'none',\n      'not-allowed',\n      'ns-resize',\n      'nw-resize',\n      'nwse-resize',\n      'pointer',\n      'progress',\n      'row-resize',\n      's-resize',\n      'se-resize',\n      'sw-resize',\n      'text',\n      'vertical-text',\n      'w-resize',\n      'wait',\n      'zoom-in',\n      'zoom-out',\n    ],\n    animation: vars.animation,\n    arrows: {\n      hidden: {\n        WebkitAppearance: 'none',\n        MozAppearance: 'textfield',\n        '&::-webkit-inner-spin-button, &::-webkit-outer-spin-button': {\n          WebkitAppearance: 'none',\n          margin: 0,\n        },\n      },\n    },\n    backgroundSize: {\n      auto: 'auto',\n      contain: 'contain',\n      cover: 'cover',\n      skeleton: '300% 100%',\n    },\n    border: {\n      none: 'none',\n      spinner: `2px solid color-mix(in srgb, ${vars.colors.white} 30%, transparent)`,\n    },\n    clip: {\n      hidden: 'rect(0 0 0 0)',\n    },\n    containerType: ['inline-size', 'normal', 'size'],\n    fontStyle: ['normal', 'italic'],\n    font: ['inherit'],\n    filter: {\n      none: 'none',\n      brightness90: 'brightness(0.9)',\n      brightness97: 'brightness(0.97)',\n      brightness98: 'brightness(0.98)',\n    },\n    objectPosition: vars.objectPosition,\n    objectFit: ['contain', 'cover', 'fill', 'none', 'scale-down'],\n    order: vars.order,\n    placeHolder: {\n      italic: {\n        '::placeholder': {\n          fontStyle: 'italic',\n          // color: vars.colors['slate-400'],\n          fontWeight: vars.fontWeight.light,\n        },\n      },\n    },\n\n    pointerEvents: ['none', 'auto'],\n    msOverflowStyle: ['auto', 'none'],\n    rotate: vars.rotate,\n    scrollBar: {\n      light: {\n        '&::-webkit-scrollbar': {\n          background: 'transparent',\n          width: spacing[1.5],\n        },\n        '&::-webkit-scrollbar-thumb': {\n          background: 'white',\n          borderRadius: spacing[1.5],\n        },\n      },\n      hidden: {\n        '&::-webkit-scrollbar': {\n          WebkitAppearance: 'none',\n          display: 'none',\n        },\n        MsOverflowStyle: 'none',\n        scrollbarWidth: 'none',\n      },\n    },\n    scrollbarColor: {\n      auto: 'auto',\n      border: `${vars.colors.border} transparent`,\n      borderLight: `${vars.colors.borderLight} transparent`,\n    },\n    scrollbarWidth: ['auto', 'none', 'thin'],\n    skew: vars.skew,\n    textDecoration: ['none', 'line-through', 'underline'],\n    textDecorationThickness: vars.textDecorationThickness,\n    textIndent: vars.spacing,\n    textTransform: ['uppercase', 'lowercase', 'capitalize'],\n    textUnderlineOffset: vars.textUnderlineOffset,\n    transform: vars.transform,\n    transformOrigin: {\n      topLeft: 'top left',\n    },\n    transitionDelay: vars.transitionDelay,\n    transitionDuration: vars.transitionDuration,\n    transitionProperty: vars.transitionProperty,\n    transitionTimingFunction: vars.transitionTimingFunction,\n    verticalAlign: ['baseline', 'middle', 'sub', 'super', 'top'],\n    willChange: ['background-position', 'transform'],\n    zIndex: vars.zIndex,\n  },\n});\n\nconst responsiveProperties = defineProperties({\n  conditions: {\n    base: {},\n    sm: { '@media': screens.sm },\n    md: { '@media': screens.md },\n    lg: { '@media': screens.lg },\n    xl: { '@media': screens.xl },\n    xxl: { '@media': screens.xxl },\n    max767: { '@media': 'screen and (max-width: 767px)' },\n    min768: { '@media': 'screen and (min-width: 768px)' },\n    tabletOnly: {\n      '@media': 'screen and (min-width: 768px) and (max-width: 1023px)',\n    },\n    max900: { '@media': 'screen and (max-width: 900px)' },\n    max1023: { '@media': 'screen and (max-width: 1023px)' },\n    max1199: { '@media': 'screen and (max-width: 1199px)' },\n    min1200: { '@media': 'screen and (min-width: 1200px)' },\n  },\n  defaultCondition: 'base',\n  properties: {\n    /**\n     * The order of fontSize in this file has an impact on CSS rule priority\n     */\n    fontSize: {\n      '3xs': {\n        fontSize: vars.fontSize['3xs'],\n        lineHeight: vars.lineHeight['3xs'],\n      },\n      '2xs': {\n        fontSize: vars.fontSize['2xs'],\n        lineHeight: vars.lineHeight['2xs'],\n      },\n      xs: {\n        fontSize: vars.fontSize.xs,\n        lineHeight: vars.lineHeight.xs,\n      },\n      sm: {\n        fontSize: vars.fontSize.sm,\n        lineHeight: vars.lineHeight.sm,\n      },\n      base: {\n        fontSize: vars.fontSize.base,\n        lineHeight: vars.lineHeight.base,\n      },\n      lg: {\n        fontSize: vars.fontSize.lg,\n        lineHeight: vars.lineHeight.lg,\n      },\n      xl: {\n        fontSize: vars.fontSize.xl,\n        lineHeight: vars.lineHeight.xl,\n      },\n      '2xl': {\n        fontSize: vars.fontSize['2xl'],\n        lineHeight: vars.lineHeight['2xl'],\n      },\n      '3xl': {\n        fontSize: vars.fontSize['3xl'],\n        lineHeight: vars.lineHeight['3xl'],\n      },\n      '4xl': {\n        fontSize: vars.fontSize['4xl'],\n      },\n      '5xl': {\n        fontSize: vars.fontSize['5xl'],\n        lineHeight: vars.lineHeight['5xl'],\n      },\n      '6xl': {\n        fontSize: vars.fontSize['6xl'],\n        lineHeight: vars.lineHeight['6xl'],\n      },\n      '7xl': {\n        fontSize: vars.fontSize['7xl'],\n        lineHeight: vars.lineHeight['7xl'],\n      },\n      '8xl': {\n        fontSize: vars.fontSize['8xl'],\n        lineHeight: vars.lineHeight['8xl'],\n      },\n      '9xl': {\n        fontSize: vars.fontSize['9xl'],\n        lineHeight: vars.lineHeight['9xl'],\n      },\n      responsive: {\n        fontSize: vars.fontSize.responsive,\n        lineHeight: vars.lineHeight.responsive,\n      },\n    },\n    alignItems: [STRETCH, FLEX_START, CENTER, FLEX_END, BASELINE],\n    alignSelf: ['auto', FLEX_START, CENTER, FLEX_END, STRETCH],\n    borderColor: vars.colors,\n    borderWidth: vars.borderWidth,\n    borderStyle: [NONE, 'dashed', 'solid'],\n    borderRadius: vars.borderRadius,\n    borderTop: [NONE],\n    borderRight: [NONE],\n    borderBottom: [NONE],\n    borderLeft: [NONE],\n    borderTopColor: vars.colors,\n    borderRightColor: vars.colors,\n    borderBottomColor: vars.colors,\n    borderLeftColor: vars.colors,\n    borderTopWidth: vars.borderWidth,\n    borderRightWidth: vars.borderWidth,\n    borderBottomWidth: vars.borderWidth,\n    borderLeftWidth: vars.borderWidth,\n    borderTopRightRadius: vars.borderRadius,\n    aspectRatio: {\n      auto: 'auto',\n      square: '1 / 1',\n      video: '16 / 9',\n      golden: '1.618 / 1',\n      card: '4 / 3',\n    },\n    borderTopLeftRadius: vars.borderRadius,\n    borderBottomRightRadius: vars.borderRadius,\n    borderBottomLeftRadius: vars.borderRadius,\n    borderSpacing: vars.borderSpacing,\n    borderCollapse: ['collapse', 'separate'],\n    bottom: vars.spacing,\n    boxShadow: vars.boxShadow,\n    columnGap: vars.spacing,\n    display: [\n      'none',\n      'block',\n      'contents',\n      'flex',\n      'grid',\n      'inline',\n      'inline-flex',\n      'inline-block',\n      'table',\n      'table-cell',\n      'table-header-group',\n      'table-row',\n      'table-row-group',\n    ],\n    dropShadow: vars.dropShadow,\n    flex: vars.flex,\n    flexBasis: vars.flexBasis,\n    flexDirection: ['row', 'column', 'row-reverse'],\n    flexGrow: vars.flexGrow,\n    flexShrink: vars.flexShrink,\n    flexWrap: ['nowrap', 'wrap', 'wrap-reverse'],\n    fontVariantNumeric: {\n      'tabular-nums': 'tabular-nums',\n    },\n    fontFamily: vars.fontFamily,\n    fontWeight: vars.fontWeight,\n    gap: vars.spacing,\n    gridAutoColumns: vars.gridAutoColumns,\n    gridAutoRows: vars.gridAutoRows,\n    gridColumn: vars.gridColumn,\n    gridColumnEnd: vars.gridColumnEnd,\n    gridColumnStart: vars.gridColumnStart,\n    gridRow: vars.gridRow,\n    gridRowEnd: vars.gridRowEnd,\n    gridRowStart: vars.gridRowStart,\n    gridTemplateColumns: vars.gridTemplateColumns,\n    gridTemplateRows: vars.gridTemplateRows,\n    height: vars.height,\n    hueRotate: vars.hueRotate,\n    inset: vars.inset,\n    invert: vars.invert,\n    justifyContent: [\n      'center',\n      'flex-end',\n      'flex-start',\n      'space-between',\n      'stretch',\n      'space-around',\n    ],\n    justifyItems: [STRETCH, FLEX_START, CENTER, FLEX_END],\n    left: vars.left,\n    letterSpacing: vars.letterSpacing,\n    wordSpacing: vars.wordSpacing,\n    lineHeight: vars.lineHeight,\n    listStyleType: vars.listStyleType,\n    margin: vars.margin,\n    marginBottom: vars.spacing,\n    marginLeft: vars.spacing,\n    marginRight: vars.spacing,\n    marginTop: vars.spacing,\n    maxHeight: vars.maxHeight,\n    maxWidth: vars.maxWidth,\n    minHeight: vars.minHeight,\n    minWidth: { ...vars.minWidth, ...vars.width },\n    outline: ['none'],\n    outlineStyle: [NONE, 'solid', 'dashed'],\n    outlineOffset: vars.outlineOffset,\n    outlineWidth: vars.outlineWidth,\n    overflow: ['auto', 'hidden', 'scroll', 'visible'],\n    overflowWrap: ['anywhere', 'break-word'],\n    overflowY: ['auto', 'hidden', 'scroll'],\n    overflowX: ['auto', 'hidden', 'scroll', 'visible'],\n    padding: vars.spacing,\n    paddingBottom: vars.spacing,\n    paddingBlock: vars.spacing,\n    paddingInline: vars.spacing,\n    paddingLeft: vars.spacing,\n    paddingRight: vars.spacing,\n    paddingTop: vars.spacing,\n    placeContent: [\n      CENTER,\n      STRETCH,\n      'space-between',\n      'space-around',\n      'space-evenly',\n    ],\n    placeItems: [STRETCH, FLEX_START, CENTER, FLEX_END],\n    position: ['absolute', 'relative', 'fixed', 'sticky', 'static'],\n    right: vars.spacing,\n    rowGap: vars.spacing,\n    scale: vars.scale,\n    scrollbarGutter: ['auto', 'stable', 'stable both-edges'],\n    scrollMargin: vars.spacing,\n    scrollMarginTop: vars.spacing,\n    scrollPadding: vars.spacing,\n    strokeWidth: vars.strokeWidth,\n    textAlign: ['left', 'center', 'end'],\n    textOverflow: ['ellipsis', 'clip'],\n    top: vars.top,\n    userSelect: {\n      none: {\n        userSelect: 'none',\n        '-webkit-user-select': 'none',\n      },\n    },\n    visibility: ['hidden', 'visible'],\n    width: vars.width,\n    wordBreak: ['break-word', 'break-all'],\n    zIndex: vars.zIndex,\n    whiteSpace: ['nowrap', 'normal', 'pre', 'pre-wrap'],\n    resize: ['none', 'both', 'horizontal', 'vertical'],\n    backgroundImage: vars.backgroundImage,\n  },\n  shorthands: {\n    marginX: ['marginLeft', 'marginRight'],\n    marginY: ['marginTop', 'marginBottom'],\n    padding: ['paddingTop', 'paddingBottom', 'paddingLeft', 'paddingRight'],\n    paddingX: ['paddingLeft', 'paddingRight'],\n    paddingY: ['paddingTop', 'paddingBottom'],\n  },\n});\n\nconst colorModeProperties = defineProperties({\n  conditions: {\n    lightMode: {},\n    darkMode: { '@media': '(prefers-color-scheme: dark)' },\n  },\n  defaultCondition: 'lightMode',\n  properties: {\n    backgroundColor: vars.colors,\n    background: {\n      gradient:\n        'linear-gradient(to right, rgba(0, 127, 87, 1), rgba(5, 99, 116, 1));',\n      ellipseGradient:\n        'radial-gradient(ellipse at top left, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.0653), rgba(255, 255, 255, 0));',\n      linearGradient:\n        'linear-gradient(to right, rgba(0, 127, 87, 1), rgba(0, 126, 144, 1));',\n      verticalLinearGradient: 'linear-gradient(white, #F1F5F9);',\n    },\n    color: vars.colors,\n    grayscale: vars.grayscale,\n    opacity: vars.opacity,\n    outlineColor: vars.colors,\n    sepia: vars.sepia,\n    stroke: vars.stroke,\n    textColor: vars.colors,\n    textTransform: ['uppercase', 'lowercase', 'capitalize', 'none'],\n    textDecorationColor: vars.colors,\n    textOpacity: vars.opacity,\n  },\n});\n\nexport const sprinkles = createSprinkles(\n  colorModeProperties,\n  otherProperties,\n  responsiveProperties,\n);\n\nconst stateProperties = defineProperties({\n  conditions: {\n    hover: {\n      selector: '&:hover',\n    },\n    hoverNotDisabled: {\n      selector: '&:hover:not(:disabled)',\n    },\n    active: {\n      selector: '&:active',\n    },\n    focusVisible: {\n      selector: '&:focus-visible',\n    },\n    focus: {\n      selector: '&:focus',\n    },\n    focusWithin: {\n      selector: '&:focus-within',\n    },\n    hasFocusVisible: {\n      selector: '&:has(:focus-visible)',\n    },\n    disabled: {\n      selector: '&:disabled',\n    },\n  },\n  defaultCondition: false,\n  properties: {\n    backgroundColor: vars.colors,\n    borderColor: vars.colors,\n    boxShadow: vars.boxShadow,\n    color: vars.colors,\n    cursor: [\n      'alias',\n      'all-scroll',\n      'auto',\n      'cell',\n      'col-resize',\n      'context-menu',\n      'copy',\n      'crosshair',\n      'default',\n      'e-resize',\n      'ew-resize',\n      'grab',\n      'grabbing',\n      'help',\n      'move',\n      'n-resize',\n      'ne-resize',\n      'nesw-resize',\n      'no-drop',\n      'none',\n      'not-allowed',\n      'ns-resize',\n      'nw-resize',\n      'nwse-resize',\n      'pointer',\n      'progress',\n      'row-resize',\n      's-resize',\n      'se-resize',\n      'sw-resize',\n      'text',\n      'vertical-text',\n      'w-resize',\n      'wait',\n      'zoom-in',\n      'zoom-out',\n    ],\n    filter: {\n      none: 'none',\n      brightness90: 'brightness(0.9)',\n      brightness97: 'brightness(0.97)',\n      brightness98: 'brightness(0.98)',\n    },\n    opacity: vars.opacity,\n    outline: {\n      none: 'none',\n      focus: `2px solid ${vars.colors.primary}`,\n    },\n    outlineColor: vars.colors,\n    outlineOffset: vars.outlineOffset,\n    outlineStyle: [NONE, 'solid', 'dashed'],\n    outlineWidth: vars.outlineWidth,\n    textDecoration: ['none', 'line-through', 'underline'],\n    textUnderlineOffset: vars.textUnderlineOffset,\n    transform: vars.transform,\n  },\n});\n\nconst hoverProperties = defineProperties({\n  conditions: {\n    default: {},\n    hover: {\n      selector: '&:hover',\n    },\n  },\n  defaultCondition: 'default',\n  properties: {\n    backgroundColor: vars.colors,\n    color: vars.colors,\n    transform: vars.transform,\n    textDecoration: ['underline'],\n  },\n});\n\nconst firstChildProperties = defineProperties({\n  conditions: {\n    default: {},\n    firstChild: {\n      selector: '&:first-child',\n    },\n  },\n  defaultCondition: 'default',\n  properties: {\n    borderTopLeftRadius: vars.borderRadius,\n    borderTopRightRadius: vars.borderRadius,\n  },\n});\n\nexport const hoverSprinkles = createSprinkles(hoverProperties);\nexport const firstChildSprinkles = createSprinkles(firstChildProperties);\nexport const stateSprinkles = createSprinkles(stateProperties);\n"],"mappings":""}
+{"version":3,"file":"sprinkles.css.js","names":[],"sources":["../../../src/theme/sprinkles.css.ts"],"sourcesContent":["import { defineProperties, createSprinkles } from '@vanilla-extract/sprinkles';\nimport { vars } from './themeContract.css.js';\nimport { screens, spacing } from './common.js';\n\nconst NONE = 'none' as const;\nconst FLEX_START = 'flex-start' as const;\nconst FLEX_END = 'flex-end' as const;\nconst CENTER = 'center' as const;\nconst STRETCH = 'stretch' as const;\nconst BASELINE = 'baseline' as const;\n\nconst otherProperties = defineProperties({\n  properties: {\n    all: ['inherit', 'initial', 'revert', 'revert-layer', 'unset'],\n    appearance: ['auto', 'none'],\n    cursor: [\n      'alias',\n      'all-scroll',\n      'auto',\n      'cell',\n      'col-resize',\n      'context-menu',\n      'copy',\n      'crosshair',\n      'default',\n      'e-resize',\n      'ew-resize',\n      'grab',\n      'grabbing',\n      'help',\n      'move',\n      'n-resize',\n      'ne-resize',\n      'nesw-resize',\n      'no-drop',\n      'none',\n      'not-allowed',\n      'ns-resize',\n      'nw-resize',\n      'nwse-resize',\n      'pointer',\n      'progress',\n      'row-resize',\n      's-resize',\n      'se-resize',\n      'sw-resize',\n      'text',\n      'vertical-text',\n      'w-resize',\n      'wait',\n      'zoom-in',\n      'zoom-out',\n    ],\n    animation: vars.animation,\n    arrows: {\n      hidden: {\n        WebkitAppearance: 'none',\n        MozAppearance: 'textfield',\n        '&::-webkit-inner-spin-button, &::-webkit-outer-spin-button': {\n          WebkitAppearance: 'none',\n          margin: 0,\n        },\n      },\n    },\n    backgroundSize: {\n      auto: 'auto',\n      contain: 'contain',\n      cover: 'cover',\n      skeleton: '300% 100%',\n    },\n    border: {\n      none: 'none',\n      spinner: `2px solid color-mix(in srgb, ${vars.colors.white} 30%, transparent)`,\n    },\n    clip: {\n      hidden: 'rect(0 0 0 0)',\n    },\n    containerType: ['inline-size', 'normal', 'size'],\n    fontStyle: ['normal', 'italic'],\n    font: ['inherit'],\n    filter: {\n      none: 'none',\n      brightness90: 'brightness(0.9)',\n      brightness97: 'brightness(0.97)',\n      brightness98: 'brightness(0.98)',\n    },\n    objectPosition: vars.objectPosition,\n    objectFit: ['contain', 'cover', 'fill', 'none', 'scale-down'],\n    order: vars.order,\n    placeHolder: {\n      italic: {\n        '::placeholder': {\n          fontStyle: 'italic',\n          // color: vars.colors['slate-400'],\n          fontWeight: vars.fontWeight.light,\n        },\n      },\n    },\n\n    pointerEvents: ['none', 'auto'],\n    msOverflowStyle: ['auto', 'none'],\n    rotate: vars.rotate,\n    scrollBar: {\n      light: {\n        '&::-webkit-scrollbar': {\n          background: 'transparent',\n          width: spacing[1.5],\n        },\n        '&::-webkit-scrollbar-thumb': {\n          background: 'white',\n          borderRadius: spacing[1.5],\n        },\n      },\n      hidden: {\n        '&::-webkit-scrollbar': {\n          WebkitAppearance: 'none',\n          display: 'none',\n        },\n        MsOverflowStyle: 'none',\n        scrollbarWidth: 'none',\n      },\n    },\n    scrollbarColor: {\n      auto: 'auto',\n      border: `${vars.colors.border} transparent`,\n      borderLight: `${vars.colors.borderLight} transparent`,\n    },\n    scrollbarWidth: ['auto', 'none', 'thin'],\n    skew: vars.skew,\n    textDecoration: ['none', 'line-through', 'underline'],\n    textDecorationThickness: vars.textDecorationThickness,\n    textIndent: vars.spacing,\n    textTransform: ['uppercase', 'lowercase', 'capitalize'],\n    textUnderlineOffset: vars.textUnderlineOffset,\n    transform: vars.transform,\n    transformOrigin: {\n      topLeft: 'top left',\n    },\n    transitionDelay: vars.transitionDelay,\n    transitionDuration: vars.transitionDuration,\n    transitionProperty: vars.transitionProperty,\n    transitionTimingFunction: vars.transitionTimingFunction,\n    verticalAlign: ['baseline', 'middle', 'sub', 'super', 'top'],\n    willChange: ['background-position', 'transform'],\n    zIndex: vars.zIndex,\n  },\n});\n\nconst responsiveProperties = defineProperties({\n  conditions: {\n    base: {},\n    sm: { '@media': screens.sm },\n    md: { '@media': screens.md },\n    lg: { '@media': screens.lg },\n    xl: { '@media': screens.xl },\n    xxl: { '@media': screens.xxl },\n    max767: { '@media': 'screen and (max-width: 767px)' },\n    min768: { '@media': 'screen and (min-width: 768px)' },\n    tabletOnly: {\n      '@media': 'screen and (min-width: 768px) and (max-width: 1023px)',\n    },\n    max900: { '@media': 'screen and (max-width: 900px)' },\n    max1023: { '@media': 'screen and (max-width: 1023px)' },\n    max1199: { '@media': 'screen and (max-width: 1199px)' },\n    min1200: { '@media': 'screen and (min-width: 1200px)' },\n  },\n  defaultCondition: 'base',\n  properties: {\n    /**\n     * The order of fontSize in this file has an impact on CSS rule priority\n     */\n    fontSize: {\n      '3xs': {\n        fontSize: vars.fontSize['3xs'],\n        lineHeight: vars.lineHeight['3xs'],\n      },\n      '2xs': {\n        fontSize: vars.fontSize['2xs'],\n        lineHeight: vars.lineHeight['2xs'],\n      },\n      xs: {\n        fontSize: vars.fontSize.xs,\n        lineHeight: vars.lineHeight.xs,\n      },\n      sm: {\n        fontSize: vars.fontSize.sm,\n        lineHeight: vars.lineHeight.sm,\n      },\n      base: {\n        fontSize: vars.fontSize.base,\n        lineHeight: vars.lineHeight.base,\n      },\n      lg: {\n        fontSize: vars.fontSize.lg,\n        lineHeight: vars.lineHeight.lg,\n      },\n      xl: {\n        fontSize: vars.fontSize.xl,\n        lineHeight: vars.lineHeight.xl,\n      },\n      '2xl': {\n        fontSize: vars.fontSize['2xl'],\n        lineHeight: vars.lineHeight['2xl'],\n      },\n      '3xl': {\n        fontSize: vars.fontSize['3xl'],\n        lineHeight: vars.lineHeight['3xl'],\n      },\n      '4xl': {\n        fontSize: vars.fontSize['4xl'],\n      },\n      '5xl': {\n        fontSize: vars.fontSize['5xl'],\n        lineHeight: vars.lineHeight['5xl'],\n      },\n      '6xl': {\n        fontSize: vars.fontSize['6xl'],\n        lineHeight: vars.lineHeight['6xl'],\n      },\n      '7xl': {\n        fontSize: vars.fontSize['7xl'],\n        lineHeight: vars.lineHeight['7xl'],\n      },\n      '8xl': {\n        fontSize: vars.fontSize['8xl'],\n        lineHeight: vars.lineHeight['8xl'],\n      },\n      '9xl': {\n        fontSize: vars.fontSize['9xl'],\n        lineHeight: vars.lineHeight['9xl'],\n      },\n      responsive: {\n        fontSize: vars.fontSize.responsive,\n        lineHeight: vars.lineHeight.responsive,\n      },\n    },\n    alignItems: [STRETCH, FLEX_START, CENTER, FLEX_END, BASELINE],\n    alignSelf: ['auto', FLEX_START, CENTER, FLEX_END, STRETCH],\n    borderColor: vars.colors,\n    borderWidth: vars.borderWidth,\n    borderStyle: [NONE, 'dashed', 'solid'],\n    borderRadius: vars.borderRadius,\n    borderTop: [NONE],\n    borderRight: [NONE],\n    borderBottom: [NONE],\n    borderLeft: [NONE],\n    borderTopColor: vars.colors,\n    borderRightColor: vars.colors,\n    borderBottomColor: vars.colors,\n    borderLeftColor: vars.colors,\n    borderTopWidth: vars.borderWidth,\n    borderRightWidth: vars.borderWidth,\n    borderBottomWidth: vars.borderWidth,\n    borderLeftWidth: vars.borderWidth,\n    borderTopRightRadius: vars.borderRadius,\n    aspectRatio: {\n      auto: 'auto',\n      square: '1 / 1',\n      video: '16 / 9',\n      golden: '1.618 / 1',\n      card: '4 / 3',\n    },\n    borderTopLeftRadius: vars.borderRadius,\n    borderBottomRightRadius: vars.borderRadius,\n    borderBottomLeftRadius: vars.borderRadius,\n    borderSpacing: vars.borderSpacing,\n    borderCollapse: ['collapse', 'separate'],\n    bottom: vars.spacing,\n    boxShadow: vars.boxShadow,\n    columnGap: vars.spacing,\n    display: [\n      'none',\n      'block',\n      'contents',\n      'flex',\n      'grid',\n      'inline',\n      'inline-flex',\n      'inline-block',\n      'table',\n      'table-cell',\n      'table-header-group',\n      'table-row',\n      'table-row-group',\n    ],\n    dropShadow: vars.dropShadow,\n    flex: vars.flex,\n    flexBasis: vars.flexBasis,\n    flexDirection: ['row', 'column', 'row-reverse'],\n    flexGrow: vars.flexGrow,\n    flexShrink: vars.flexShrink,\n    flexWrap: ['nowrap', 'wrap', 'wrap-reverse'],\n    fontVariantNumeric: {\n      'tabular-nums': 'tabular-nums',\n    },\n    fontFamily: vars.fontFamily,\n    fontWeight: vars.fontWeight,\n    gap: vars.spacing,\n    gridAutoColumns: vars.gridAutoColumns,\n    gridAutoRows: vars.gridAutoRows,\n    gridColumn: vars.gridColumn,\n    gridColumnEnd: vars.gridColumnEnd,\n    gridColumnStart: vars.gridColumnStart,\n    gridRow: vars.gridRow,\n    gridRowEnd: vars.gridRowEnd,\n    gridRowStart: vars.gridRowStart,\n    gridTemplateColumns: vars.gridTemplateColumns,\n    gridTemplateRows: vars.gridTemplateRows,\n    height: vars.height,\n    hueRotate: vars.hueRotate,\n    inset: vars.inset,\n    invert: vars.invert,\n    justifyContent: [\n      'center',\n      'flex-end',\n      'flex-start',\n      'space-between',\n      'stretch',\n      'space-around',\n    ],\n    justifyItems: [STRETCH, FLEX_START, CENTER, FLEX_END],\n    left: vars.left,\n    letterSpacing: vars.letterSpacing,\n    wordSpacing: vars.wordSpacing,\n    lineHeight: vars.lineHeight,\n    listStyleType: vars.listStyleType,\n    margin: vars.margin,\n    marginBottom: vars.spacing,\n    marginLeft: vars.spacing,\n    marginRight: vars.spacing,\n    marginTop: vars.spacing,\n    maxHeight: vars.maxHeight,\n    maxWidth: vars.maxWidth,\n    minHeight: vars.minHeight,\n    minWidth: { ...vars.minWidth, ...vars.width },\n    outline: ['none'],\n    outlineStyle: [NONE, 'solid', 'dashed'],\n    outlineOffset: vars.outlineOffset,\n    outlineWidth: vars.outlineWidth,\n    overflow: ['auto', 'hidden', 'scroll', 'visible'],\n    overflowWrap: ['anywhere', 'break-word'],\n    overflowY: ['auto', 'hidden', 'scroll'],\n    overflowX: ['auto', 'hidden', 'scroll', 'visible'],\n    padding: vars.spacing,\n    paddingBottom: vars.spacing,\n    paddingBlock: vars.spacing,\n    paddingInline: vars.spacing,\n    paddingLeft: vars.spacing,\n    paddingRight: vars.spacing,\n    paddingTop: vars.spacing,\n    placeContent: [\n      CENTER,\n      STRETCH,\n      'space-between',\n      'space-around',\n      'space-evenly',\n    ],\n    placeItems: [STRETCH, FLEX_START, CENTER, FLEX_END],\n    position: ['absolute', 'relative', 'fixed', 'sticky', 'static'],\n    right: vars.spacing,\n    rowGap: vars.spacing,\n    scale: vars.scale,\n    scrollbarGutter: ['auto', 'stable', 'stable both-edges'],\n    scrollMargin: vars.spacing,\n    scrollMarginTop: vars.spacing,\n    scrollPadding: vars.spacing,\n    strokeWidth: vars.strokeWidth,\n    textAlign: ['left', 'center', 'end'],\n    textOverflow: ['ellipsis', 'clip'],\n    top: vars.top,\n    userSelect: {\n      none: {\n        userSelect: 'none',\n        '-webkit-user-select': 'none',\n      },\n    },\n    visibility: ['hidden', 'visible'],\n    width: vars.width,\n    wordBreak: ['break-word', 'break-all'],\n    zIndex: vars.zIndex,\n    whiteSpace: ['nowrap', 'normal', 'pre', 'pre-wrap'],\n    resize: ['none', 'both', 'horizontal', 'vertical'],\n    backgroundImage: vars.backgroundImage,\n  },\n  shorthands: {\n    marginX: ['marginLeft', 'marginRight'],\n    marginY: ['marginTop', 'marginBottom'],\n    padding: ['paddingTop', 'paddingBottom', 'paddingLeft', 'paddingRight'],\n    paddingX: ['paddingLeft', 'paddingRight'],\n    paddingY: ['paddingTop', 'paddingBottom'],\n  },\n});\n\nconst colorModeProperties = defineProperties({\n  conditions: {\n    lightMode: {},\n    darkMode: { '@media': '(prefers-color-scheme: dark)' },\n  },\n  defaultCondition: 'lightMode',\n  properties: {\n    backgroundColor: vars.colors,\n    background: {\n      gradient:\n        'linear-gradient(to right, rgba(0, 127, 87, 1), rgba(5, 99, 116, 1));',\n      ellipseGradient:\n        'radial-gradient(ellipse at top left, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.0653), rgba(255, 255, 255, 0));',\n      linearGradient:\n        'linear-gradient(to right, rgba(0, 127, 87, 1), rgba(0, 126, 144, 1));',\n      verticalLinearGradient: 'linear-gradient(white, #F1F5F9);',\n    },\n    color: vars.colors,\n    grayscale: vars.grayscale,\n    opacity: vars.opacity,\n    outlineColor: vars.colors,\n    sepia: vars.sepia,\n    stroke: vars.stroke,\n    textColor: vars.colors,\n    textTransform: ['uppercase', 'lowercase', 'capitalize', 'none'],\n    textDecorationColor: vars.colors,\n    textOpacity: vars.opacity,\n  },\n});\n\nexport const sprinkles = createSprinkles(\n  colorModeProperties,\n  otherProperties,\n  responsiveProperties,\n);\n\nconst stateProperties = defineProperties({\n  conditions: {\n    hover: {\n      selector: '&:hover',\n    },\n    hoverNotDisabled: {\n      selector: '&:hover:not(:disabled)',\n    },\n    active: {\n      selector: '&:active',\n    },\n    focusVisible: {\n      selector: '&:focus-visible',\n    },\n    focus: {\n      selector: '&:focus',\n    },\n    focusWithin: {\n      selector: '&:focus-within',\n    },\n    hasFocusVisible: {\n      selector: '&:has(:focus-visible)',\n    },\n    disabled: {\n      selector: '&:disabled',\n    },\n  },\n  defaultCondition: false,\n  properties: {\n    backgroundColor: vars.colors,\n    borderColor: vars.colors,\n    boxShadow: vars.boxShadow,\n    color: vars.colors,\n    cursor: [\n      'alias',\n      'all-scroll',\n      'auto',\n      'cell',\n      'col-resize',\n      'context-menu',\n      'copy',\n      'crosshair',\n      'default',\n      'e-resize',\n      'ew-resize',\n      'grab',\n      'grabbing',\n      'help',\n      'move',\n      'n-resize',\n      'ne-resize',\n      'nesw-resize',\n      'no-drop',\n      'none',\n      'not-allowed',\n      'ns-resize',\n      'nw-resize',\n      'nwse-resize',\n      'pointer',\n      'progress',\n      'row-resize',\n      's-resize',\n      'se-resize',\n      'sw-resize',\n      'text',\n      'vertical-text',\n      'w-resize',\n      'wait',\n      'zoom-in',\n      'zoom-out',\n    ],\n    filter: {\n      none: 'none',\n      brightness90: 'brightness(0.9)',\n      brightness97: 'brightness(0.97)',\n      brightness98: 'brightness(0.98)',\n    },\n    opacity: vars.opacity,\n    outline: {\n      none: 'none',\n      focus: `2px solid ${vars.colors.primary}`,\n    },\n    outlineColor: vars.colors,\n    outlineOffset: vars.outlineOffset,\n    outlineStyle: [NONE, 'solid', 'dashed'],\n    outlineWidth: vars.outlineWidth,\n    textDecoration: ['none', 'line-through', 'underline'],\n    textUnderlineOffset: vars.textUnderlineOffset,\n    transform: vars.transform,\n  },\n});\n\nconst hoverProperties = defineProperties({\n  conditions: {\n    default: {},\n    hover: {\n      selector: '&:hover',\n    },\n  },\n  defaultCondition: 'default',\n  properties: {\n    backgroundColor: vars.colors,\n    color: vars.colors,\n    transform: vars.transform,\n    textDecoration: ['underline'],\n  },\n});\n\nconst firstChildProperties = defineProperties({\n  conditions: {\n    default: {},\n    firstChild: {\n      selector: '&:first-child',\n    },\n  },\n  defaultCondition: 'default',\n  properties: {\n    borderTopLeftRadius: vars.borderRadius,\n    borderTopRightRadius: vars.borderRadius,\n  },\n});\n\nexport const hoverSprinkles = createSprinkles(hoverProperties);\nexport const firstChildSprinkles = createSprinkles(firstChildProperties);\nexport const stateSprinkles = createSprinkles(stateProperties);\n"],"mappings":""}