@telepix-lab/telepix-ui 0.8.1 → 0.8.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/client.js +0 -68
- package/dist/esm/client.js +0 -68
- package/package.json +1 -1
package/dist/cjs/client.js
CHANGED
|
@@ -13716,11 +13716,6 @@ const Switch = (props) => {
|
|
|
13716
13716
|
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [props.variant === SWITCH_VARIANTS.FILLED && (jsxRuntime.jsx(FilledSwitch, { checked: defaultChecked ? checked : isChecked, onCheckedChange: handleCheckedChange, ...props })), props.variant === SWITCH_VARIANTS.OUTLINED && (jsxRuntime.jsx(OutlinedSwitch, { checked: defaultChecked ? checked : isChecked, onCheckedChange: handleCheckedChange, ...props })), props.variant === SWITCH_VARIANTS.SLIDE && (jsxRuntime.jsx(SlideSwitch, { checked: defaultChecked ? checked : isChecked, onCheckedChange: handleCheckedChange, ...props }))] }));
|
|
13717
13717
|
};
|
|
13718
13718
|
|
|
13719
|
-
var colorCss = "@theme {\n --color-pure-black: rgba(0, 0, 0, 1);\n --color-pure-black-5: rgba(0, 0, 0, 0.05);\n --color-pure-black-15: rgba(0, 0, 0, 0.15);\n --color-pure-black-30: rgba(0, 0, 0, 0.3);\n --color-pure-black-50: rgba(0, 0, 0, 0.5);\n --color-pure-black-75: rgba(0, 0, 0, 0.75);\n --color-pure-white: rgba(255, 255, 255, 1);\n --color-pure-white-2: rgba(255, 255, 255, 0.02);\n --color-pure-white-5: rgba(255, 255, 255, 0.05);\n --color-pure-white-15: rgba(255, 255, 255, 0.15);\n --color-pure-white-30: rgba(255, 255, 25 5, 0.3);\n --color-pure-white-50: rgba(255, 255, 255, 0.5);\n --color-pure-white-75: rgba(255, 255, 255, 0.75);\n --color-pure-transparent: rgba(255, 255, 255, 0);\n --color-pure-near-transparent: rgba(152, 152, 152, 0.001);\n\n --color-neutral-10: #fbfbfbff;\n --color-neutral-25: #f9f9f9ff;\n --color-neutral-50: #f3f3f3ff;\n --color-neutral-75: #edededff;\n --color-neutral-100: #e5e5e5ff;\n --color-neutral-150: #d9d9d9ff;\n --color-neutral-200: #ccccccff;\n --color-neutral-250: #bfbfbfff;\n --color-neutral-300: #b2b2b2ff;\n --color-neutral-350: #a6a6a6ff;\n --color-neutral-400: #999999ff;\n --color-neutral-450: #8c8c8cff;\n --color-neutral-500: #808080ff;\n --color-neutral-550: #6e6e6eff;\n --color-neutral-600: #616161ff;\n --color-neutral-650: #545454ff;\n --color-neutral-700: #474747ff;\n --color-neutral-750: #383838ff;\n --color-neutral-800: #2e2e2eff;\n --color-neutral-825: #292929ff;\n --color-neutral-850: #212121ff;\n --color-neutral-875: #1d1d1dff;\n --color-neutral-900: #1a1a1aff;\n --color-neutral-950: #0d0d0dff;\n\n --color-telepix-red-100: #fce8ebff;\n --color-telepix-red-200: #f7bbc3ff;\n --color-telepix-red-300: #f28d9aff;\n --color-telepix-red-400: #ec5f72ff;\n --color-telepix-red-500: #e7344cff;\n --color-telepix-red-600: #cd1831ff;\n --color-telepix-red-700: #a01326ff;\n --color-telepix-red-800: #720d1bff;\n --color-telepix-red-900: #37060dff;\n\n --color-red-100: #faccccff;\n --color-red-200: #f59999ff;\n --color-red-300: #ef6666ff;\n --color-red-400: #ea3333ff;\n --color-red-500: #e50000ff;\n --color-red-600: #b70000ff;\n --color-red-700: #890000ff;\n --color-red-800: #5c0000ff;\n --color-red-900: #2e0000ff;\n\n --color-orange-100: #ffe6ccff;\n --color-orange-200: #ffcc99ff;\n --color-orange-300: #ffb366ff;\n --color-orange-400: #ff9933ff;\n --color-orange-500: #ff8000ff;\n --color-orange-600: #cc6600ff;\n --color-orange-700: #994d00ff;\n --color-orange-800: #663300ff;\n --color-orange-900: #331a00ff;\n\n --color-yellow-100: #fff5ccff;\n --color-yellow-200: #ffeb99ff;\n --color-yellow-300: #ffe066ff;\n --color-yellow-400: #ffd633ff;\n --color-yellow-500: #ffcc00ff;\n --color-yellow-600: #cca300ff;\n --color-yellow-700: #997a00ff;\n --color-yellow-800: #665200ff;\n --color-yellow-900: #332900ff;\n\n --color-green-100: #ccebd6ff;\n --color-green-200: #99d6adff;\n --color-green-300: #66c285ff;\n --color-green-400: #33ad5cff;\n --color-green-500: #009933ff;\n --color-green-600: #007a29ff;\n --color-green-700: #005c1fff;\n --color-green-800: #003d14ff;\n --color-green-900: #001f0aff;\n\n --color-teal-100: #ccf5f5ff;\n --color-teal-200: #99ebebff;\n --color-teal-300: #66e0e0ff;\n --color-teal-400: #33d6d6ff;\n --color-teal-500: #00ccccff;\n --color-teal-600: #00a3a3ff;\n --color-teal-700: #007a7aff;\n --color-teal-800: #005252ff;\n --color-teal-900: #002929ff;\n\n --color-cyan-100: #cceeffff;\n --color-cyan-200: #99ddffff;\n --color-cyan-300: #66ccffff;\n --color-cyan-400: #33bbffff;\n --color-cyan-500: #00aaffff;\n --color-cyan-600: #0088ccff;\n --color-cyan-700: #006699ff;\n --color-cyan-800: #004466ff;\n --color-cyan-900: #002233ff;\n\n --color-blue-100: #d6ddffff;\n --color-blue-200: #adbbffff;\n --color-blue-300: #8599ffff;\n --color-blue-400: #5c77ffff;\n --color-blue-500: #3355ffff;\n --color-blue-600: #2944ccff;\n --color-blue-700: #1f3399ff;\n --color-blue-800: #142266ff;\n --color-blue-900: #0a1133ff;\n\n --color-purple-100: #e4d6ffff;\n --color-purple-200: #c9adffff;\n --color-purple-300: #ad85ffff;\n --color-purple-400: #925cffff;\n --color-purple-500: #7733ffff;\n --color-purple-600: #5f29ccff;\n --color-purple-700: #471f99ff;\n --color-purple-800: #301466ff;\n --color-purple-900: #180a33ff;\n\n --color-violet-100: #f1d6ffff;\n --color-violet-200: #e4adffff;\n --color-violet-300: #d685ffff;\n --color-violet-400: #c95cffff;\n --color-violet-500: #bb33ffff;\n --color-violet-600: #9629ccff;\n --color-violet-700: #701f99ff;\n --color-violet-800: #4b1466ff;\n --color-violet-900: #250a33ff;\n\n --color-pink-100: #ffd6ddff;\n --color-pink-200: #ffadbbff;\n --color-pink-300: #ff8599ff;\n --color-pink-400: #ff5c77ff;\n --color-pink-500: #ff3355ff;\n --color-pink-600: #cc2944ff;\n --color-pink-700: #991f33ff;\n --color-pink-800: #661422ff;\n --color-pink-900: #330a11ff;\n\n --color-magenta-100: #feebfbff;\n --color-magenta-200: #fdc4f2ff;\n --color-magenta-300: #fb92e7ff;\n --color-magenta-400: #fa65ddff;\n --color-magenta-500: #f939d3ff;\n --color-magenta-600: #ed08c0ff;\n --color-magenta-700: #940578ff;\n --color-magenta-800: #5e034cff;\n --color-magenta-900: #190114ff;\n\n --color-dark-opacity-10: rgba(0, 0, 0, 0.01);\n --color-dark-opacity-20: rgba(0, 0, 0, 0.02);\n --color-dark-opacity-30: rgba(0, 0, 0, 0.03);\n --color-dark-opacity-40: rgba(0, 0, 0, 0.04);\n --color-dark-opacity-50: rgba(0, 0, 0, 0.05);\n --color-dark-opacity-70: rgba(0, 0, 0, 0.07);\n --color-dark-opacity-100: rgba(0, 0, 0, 0.1);\n --color-dark-opacity-150: rgba(0, 0, 0, 0.15);\n --color-dark-opacity-200: rgba(0, 0, 0, 0.2);\n --color-dark-opacity-250: rgba(0, 0, 0, 0.25);\n --color-dark-opacity-300: rgba(0, 0, 0, 0.3);\n --color-dark-opacity-350: rgba(0, 0, 0, 0.35);\n --color-dark-opacity-400: rgba(0, 0, 0, 0.4);\n --color-dark-opacity-450: rgba(0, 0, 0, 0.46);\n --color-dark-opacity-500: rgba(0, 0, 0, 0.51);\n --color-dark-opacity-550: rgba(0, 0, 0, 0.58);\n --color-dark-opacity-600: rgba(0, 0, 0, 0.63);\n --color-dark-opacity-650: rgba(0, 0, 0, 0.68);\n --color-dark-opacity-700: rgba(0, 0, 0, 0.73);\n --color-dark-opacity-750: rgba(0, 0, 0, 0.8);\n --color-dark-opacity-800: rgba(0, 0, 0, 0.84);\n --color-dark-opacity-850: rgba(0, 0, 0, 0.89);\n --color-dark-opacity-900: rgba(0, 0, 0, 0.92);\n\n --color-light-opacity-10: rgba(255, 255, 255, 0.01);\n --color-light-opacity-20: rgba(255, 255, 255, 0.02);\n --color-light-opacity-30: rgba(255, 255, 255, 0.03);\n --color-light-opacity-40: rgba(255, 255, 255, 0.04);\n --color-light-opacity-50: rgba(255, 255, 255, 0.05);\n --color-light-opacity-70: rgba(255, 255, 255, 0.07);\n --color-light-opacity-100: rgba(255, 255, 255, 0.09);\n --color-light-opacity-150: rgba(255, 255, 255, 0.14);\n --color-light-opacity-200: rgba(255, 255, 255, 0.18);\n --color-light-opacity-250: rgba(255, 255, 255, 0.24);\n --color-light-opacity-300: rgba(255, 255, 255, 0.3);\n --color-light-opacity-350: rgba(255, 255, 255, 0.35);\n --color-light-opacity-400: rgba(255, 255, 255, 0.4);\n --color-light-opacity-450: rgba(255, 255, 255, 0.48);\n --color-light-opacity-500: rgba(255, 255, 255, 0.53);\n --color-light-opacity-550: rgba(255, 255, 255, 0.58);\n --color-light-opacity-600: rgba(255, 255, 255, 0.63);\n --color-light-opacity-650: rgba(255, 255, 255, 0.68);\n --color-light-opacity-700: rgba(255, 255, 255, 0.73);\n --color-light-opacity-750: rgba(255, 255, 255, 0.79);\n --color-light-opacity-800: rgba(255, 255, 255, 0.84);\n --color-light-opacity-850: rgba(255, 255, 255, 0.89);\n --color-light-opacity-900: rgba(255, 255, 255, 0.94);\n\n --text-xsmall: 0.625rem; /* 10px */\n --text-label: 0.75rem; /* 12px */\n --text-body: 0.875rem; /* 14px */\n --text-base: 1rem; /* 16px */\n --text-large: 1.125rem; /* 18px */\n --text-xl: 1.25rem; /* 20px */\n --text-xxl: 1.5rem; /* 24px */\n --text-xxxl: 1.875rem; /* 30px */\n --text-xxxxl: 2.25rem; /* 36px */\n --text-size-inherit: inherit;\n\n --font-weight-thin: 100;\n --font-weight-extralight: 200;\n --font-weight-light: 300;\n --font-weight-normal: 400;\n --font-weight-medium: 500;\n --font-weight-semibold: 600;\n --font-weight-bold: 700;\n --font-weight-extrabold: 800;\n --font-weight-black: 900;\n --font-weight-inherit: inherit;\n\n --spacing-xsmall: 0.875rem; /** 14px */\n --spacing-label: 1.3125rem; /** 21px */\n --spacing-label-compact: 0.75rem; /** 12px */\n --spacing-body: 1.5rem; /** 24px */\n --spacing-body-compact: 0.875rem; /** 14px */\n --spacing-base: 1.75rem; /** 28px */\n --spacing-base-compact: 1rem; /** 16px */\n --spacing-large: 2rem; /** 32px */\n --spacing-large-compact: 1.125rem; /** 18px */\n --spacing-xl: 2.25rem; /** 36px */\n --spacing-xl-compact: 1.25rem; /** 20px */\n --spacing-xxl: 2.625rem; /** 42px */\n --spacing-xxl-compact: 1.5rem; /** 24px */\n --spacing-xxxl: 3.25rem; /** 52px */\n --spacing-inherit: inherit;\n\n --shadow-small: 0 1px 1px 0 rgba(0, 0, 0, 0.2);\n --shadow-basic:\n 0 1px 1px 0 rgba(0, 0, 0, 0.3), 0 1px 3px 1px rgba(0, 0, 0, 0.1);\n --shadow-medium:\n 0 1px 2px 0 rgba(0, 0, 0, 0.4), 0 3px 4px 2px rgba(0, 0, 0, 0.15);\n --shadow-large:\n 0 1px 4px -1px rgba(0, 0, 0, 0.6), 0 6px 8px 2px rgba(0, 0, 0, 0.2);\n --shadow-xlarge:\n 0px 20px 25px -5px rgba(0, 0, 0, 0.1), 0px 8px 10px -6px rgba(0, 0, 0, 0.1);\n --shadow-xxlarge: 0px 25px 50px -12px rgba(0, 0, 0, 0.25);\n --shadow-inner: 0px 2px 4px 0px rgba(0, 0, 0, 0.3) inset;\n --shadow-none: 0px 0px 0px 0px rgba(0, 0, 0, 0);\n --shadow-glass-basic:\n 0 1px 1px 0 rgba(0, 0, 0, 0.3), 0 1px 3px 0 rgba(0, 0, 0, 0.1);\n --shadow-glass-medium:\n 0 1px 2px -1px rgba(0, 0, 0, 0.5), 0 2px 4px 1px rgba(0, 0, 0, 0.25);\n --blur-glass: blur(8px);\n\n @keyframes fade-in {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n\n @keyframes content-fade-in {\n 0% {\n transform: translate(-50%, -53%);\n opacity: 0;\n }\n 100% {\n transform: translate(-50%, -50%);\n opacity: 1;\n }\n }\n\n @keyframes toast-slide-in-top {\n 0% {\n opacity: 0;\n transform: translateY(-0.75rem) scale(0.96);\n }\n 100% {\n opacity: 1;\n transform: translateY(0) scale(1);\n }\n }\n\n @keyframes toast-slide-in-bottom {\n 0% {\n opacity: 0;\n transform: translateY(0.75rem) scale(0.96);\n }\n 100% {\n opacity: 1;\n transform: translateY(0) scale(1);\n }\n }\n\n @keyframes toast-slide-out-top {\n 0% {\n opacity: 1;\n transform: translateY(0) scale(1);\n }\n 100% {\n opacity: 0;\n transform: translateY(-0.5rem) scale(0.96);\n }\n }\n\n @keyframes toast-slide-out-bottom {\n 0% {\n opacity: 1;\n transform: translateY(0) scale(1);\n }\n 100% {\n opacity: 0;\n transform: translateY(0.5rem) scale(0.96);\n }\n }\n\n --animate-fade-in: fade-in 150ms ease-in-out forwards;\n --animate-content-fade-in: content-fade-in 150ms ease-in-out forwards;\n --animate-toast-slide-in-top: toast-slide-in-top 250ms\n cubic-bezier(0.21, 1.02, 0.73, 1) forwards;\n --animate-toast-slide-in-bottom: toast-slide-in-bottom 250ms\n cubic-bezier(0.21, 1.02, 0.73, 1) forwards;\n --animate-toast-slide-out-top: toast-slide-out-top 180ms\n cubic-bezier(0.06, 0.71, 0.55, 1) forwards;\n --animate-toast-slide-out-bottom: toast-slide-out-bottom 180ms\n cubic-bezier(0.06, 0.71, 0.55, 1) forwards;\n}\n";
|
|
13720
|
-
|
|
13721
|
-
var themeCss = ":root {\n --page-l-null: var(--color-pure-near-transparent);\n --page-l0: var(--color-pure-white);\n --page-l1: var(--color-neutral-10);\n --page-l2: var(--color-neutral-25);\n --page-l3: var(--color-neutral-50);\n --page-l4: var(--color-neutral-75);\n --page-fade: var(--color-pure-black-50);\n\n --page-l0-transparent: rgba(255, 255, 255, 0);\n --page-l1-transparent: rgba(251, 251, 251, 0);\n\n --page-chroma-warning: var(--color-orange-500);\n --page-chroma-error: var(--color-red-400);\n --page-chroma-positive: var(--color-green-400);\n --page-chroma-cloud: var(--color-blue-500);\n --page-chroma-onpremise: var(--color-orange-400);\n --page-chroma-highlight-yellow: var(--color-yellow-500);\n\n --page-accent-l0: var(--color-neutral-850);\n --page-accent-l1: var(--color-neutral-800);\n\n --page-translucent-l0: rgba(255, 255, 255, 0.88);\n --page-translucent-l1: rgba(251, 251, 251, 0.88);\n --page-translucent-l2: rgba(249, 249, 249, 0.88);\n --page-translucent-l3: rgba(243, 243, 243, 0.88);\n --page-translucent-l4: rgba(237, 237, 237, 0.88);\n\n --comp-disabled: var(--color-dark-opacity-450);\n\n --comp-mono-default: var(--color-dark-opacity-800);\n\n --comp-mono-subtle-default: var(--color-dark-opacity-600);\n\n --comp-chroma-warning: var(--color-orange-500);\n --comp-chroma-error: var(--color-red-400);\n --comp-chroma-error-subtle: var(--color-telepix-red-400);\n --comp-chroma-positive: var(--color-green-400);\n --comp-chroma-cloud: var(--color-blue-500);\n --comp-chroma-onpremise: var(--color-orange-400);\n --comp-chroma-highlight-yellow: var(--color-yellow-500);\n\n --comp-accent-default: var(--color-light-opacity-900);\n\n --fill-default: var(--color-pure-transparent);\n --fill-hovered: var(--color-dark-opacity-50);\n --fill-pressed: var(--color-dark-opacity-150);\n --fill-selected: var(--color-dark-opacity-100);\n --fill-disabled: var(--color-pure-transparent);\n\n --fill-invert-default: var(--color-pure-transparent);\n --fill-invert-hovered: var(--color-light-opacity-70);\n --fill-invert-pressed: var(--color-light-opacity-300);\n --fill-invert-selected: var(--color-light-opacity-200);\n --fill-invert-disabled: var(--color-pure-transparent);\n\n --border-bound: var(--color-dark-opacity-200);\n --border-focused: var(--color-dark-opacity-550);\n --border-selected: var(--color-dark-opacity-400);\n --border-divider: var(--color-neutral-200);\n --border-overlay: var(--color-pure-transparent);\n\n --border-accent-bound: var(--color-light-opacity-300);\n --border-accent-selected: var(--color-light-opacity-550);\n}\n\n[data-theme=\"dark\"],\n.dark {\n --page-l-null: var(--color-pure-near-transparent);\n --page-l0: var(--color-neutral-900);\n --page-l1: var(--color-neutral-875);\n --page-l2: var(--color-neutral-850);\n --page-l3: var(--color-neutral-825);\n --page-l4: var(--color-neutral-800);\n --page-fade: var(--color-pure-black-75);\n\n --page-l0-transparent: rgba(26, 26, 26, 0);\n --page-l1-transparent: rgba(29, 29, 29, 0);\n\n --page-chroma-warning: var(--color-orange-600);\n --page-chroma-error: var(--color-red-500);\n --page-chroma-positive: var(--color-green-500);\n --page-chroma-cloud: var(--color-blue-500);\n --page-chroma-onpremise: var(--color-orange-500);\n --page-chroma-highlight-yellow: var(--color-yellow-600);\n\n --page-accent-l0: var(--color-neutral-100);\n --page-accent-l1: var(--color-neutral-150);\n\n --page-translucent-l0: rgba(26, 26, 26, 0.8);\n --page-translucent-l1: rgba(29, 29, 29, 0.8);\n --page-translucent-l2: rgba(33, 33, 33, 0.8);\n --page-translucent-l3: rgba(41, 41, 41, 0.8);\n --page-translucent-l4: rgba(46, 46, 46, 0.8);\n\n --comp-disabled: var(--color-light-opacity-350);\n\n --comp-mono-default: var(--color-light-opacity-800);\n\n --comp-mono-subtle-default: var(--color-light-opacity-600);\n\n --comp-chroma-warning: var(--color-orange-500);\n --comp-chroma-error: var(--color-red-400);\n --comp-chroma-error-subtle: var(--color-red-300);\n --comp-chroma-positive: var(--color-green-400);\n --comp-chroma-cloud: var(--color-blue-500);\n --comp-chroma-onpremise: var(--color-orange-400);\n --comp-chroma-highlight-yellow: var(--color-yellow-500);\n\n --comp-accent-default: var(--color-dark-opacity-800);\n\n --fill-default: var(--color-pure-transparent);\n --fill-hovered: var(--color-light-opacity-50);\n --fill-pressed: var(--color-light-opacity-150);\n --fill-selected: var(--color-light-opacity-100);\n --fill-disabled: var(--color-pure-transparent);\n\n --fill-invert-default: var(--color-pure-transparent);\n --fill-invert-hovered: var(--color-dark-opacity-100);\n --fill-invert-pressed: var(--color-dark-opacity-300);\n --fill-invert-selected: var(--color-dark-opacity-200);\n --fill-invert-disabled: var(--color-pure-transparent);\n\n --border-bound: var(--color-light-opacity-250);\n --border-focused: var(--color-light-opacity-700);\n --border-selected: var(--color-light-opacity-450);\n --border-divider: var(--color-neutral-750);\n --border-overlay: var(--color-light-opacity-50);\n\n --border-accent-bound: var(--color-dark-opacity-400);\n --border-accent-selected: var(--color-dark-opacity-650);\n}\n\n@theme inline {\n --color-page-l-null: var(--page-l-null);\n --color-page-l0: var(--page-l0);\n --color-page-l1: var(--page-l1);\n --color-page-l2: var(--page-l2);\n --color-page-l3: var(--page-l3);\n --color-page-l4: var(--page-l4);\n --color-page-fade: var(--page-fade);\n\n --color-page-l0-transparent: var(--page-l0-transparent);\n --color-page-l1-transparent: var(--page-l1-transparent);\n\n --color-page-chroma-warning: var(--page-chroma-warning);\n --color-page-chroma-error: var(--page-chroma-error);\n --color-page-chroma-positive: var(--page-chroma-positive);\n --color-page-chroma-cloud: var(--page-chroma-cloud);\n --color-page-chroma-onpremise: var(--page-chroma-onpremise);\n --color-page-chroma-highlight-yellow: var(--page-chroma-highlight-yellow);\n\n --color-page-accent-l0: var(--page-accent-l0);\n --color-page-accent-l1: var(--page-accent-l1);\n\n --color-page-translucent-l0: var(--page-translucent-l0);\n --color-page-translucent-l1: var(--page-translucent-l1);\n --color-page-translucent-l2: var(--page-translucent-l2);\n --color-page-translucent-l3: var(--page-translucent-l3);\n --color-page-translucent-l4: var(--page-translucent-l4);\n\n --color-comp-disabled: var(--comp-disabled);\n\n --color-comp-mono-default: var(--comp-mono-default);\n\n --color-comp-mono-subtle-default: var(--comp-mono-subtle-default);\n\n --color-comp-chroma-warning: var(--comp-chroma-warning);\n --color-comp-chroma-error: var(--comp-chroma-error);\n --color-comp-chroma-error-subtle: var(--comp-chroma-error-subtle);\n --color-comp-chroma-positive: var(--comp-chroma-positive);\n --color-comp-chroma-cloud: var(--comp-chroma-cloud);\n --color-comp-chroma-onpremise: var(--comp-chroma-onpremise);\n --color-comp-chroma-highlight-yellow: var(--comp-chroma-highlight-yellow);\n\n --color-comp-accent-default: var(--comp-accent-default);\n\n --color-fill-default: var(--fill-default);\n --color-fill-hovered: var(--fill-hovered);\n --color-fill-pressed: var(--fill-pressed);\n --color-fill-selected: var(--fill-selected);\n --color-fill-disabled: var(--fill-disabled);\n\n --color-fill-invert-default: var(--fill-invert-default);\n --color-fill-invert-hovered: var(--fill-invert-hovered);\n --color-fill-invert-pressed: var(--fill-invert-pressed);\n --color-fill-invert-selected: var(--fill-invert-selected);\n --color-fill-invert-disabled: var(--fill-invert-disabled);\n\n --color-border-bound: var(--border-bound);\n --color-border-focused: var(--border-focused);\n --color-border-selected: var(--border-selected);\n --color-border-divider: var(--border-divider);\n --color-border-overlay: var(--border-overlay);\n\n --color-border-accent-bound: var(--border-accent-bound);\n --color-border-accent-selected: var(--border-accent-selected);\n}\n";
|
|
13722
|
-
|
|
13723
|
-
// @ts-ignore
|
|
13724
13719
|
/**
|
|
13725
13720
|
* RGB 또는 RGBA 문자열을 Hex 문자열로 변환합니다.
|
|
13726
13721
|
* @param rgb - RGB/RGBA 문자열 (예: "rgb(255, 0, 0)" 또는 "rgba(255, 0, 0, 0.5)")
|
|
@@ -13745,43 +13740,6 @@ const rgbaToHex = (rgb) => {
|
|
|
13745
13740
|
const hexA = getHexAlpha(a);
|
|
13746
13741
|
return `#${toHex(r)}${toHex(g)}${toHex(b)}${hexA}`;
|
|
13747
13742
|
};
|
|
13748
|
-
/**
|
|
13749
|
-
* 원본 CSS 문자열에서 변수 정의를 찾기 위한 헬퍼 함수입니다.
|
|
13750
|
-
*/
|
|
13751
|
-
const findVarInCssString = (cssContent, varName) => {
|
|
13752
|
-
// Regex 설명:
|
|
13753
|
-
// 1. 변수 이름을 찾되, 만약을 대비해 이스케이프 처리합니다.
|
|
13754
|
-
// 2. 공백을 허용하고, 그 다음 콜론을 찾습니다.
|
|
13755
|
-
// 3. 다음 세미콜론이나 닫는 중괄호까지 캡처합니다.
|
|
13756
|
-
const escapedName = varName.replace(/[-\/\\^$*+?.()|[\]{}]/g, "\\$&");
|
|
13757
|
-
const regex = new RegExp(`${escapedName}\\s*:\\s*([^;}\\n]+)`, "i");
|
|
13758
|
-
const match = cssContent.match(regex);
|
|
13759
|
-
if (match && match[1]) {
|
|
13760
|
-
return match[1].trim();
|
|
13761
|
-
}
|
|
13762
|
-
return null;
|
|
13763
|
-
};
|
|
13764
|
-
/**
|
|
13765
|
-
* 현재 문서 상태가 다크 모드인지 확인합니다.
|
|
13766
|
-
*/
|
|
13767
|
-
const isDarkMode = () => {
|
|
13768
|
-
if (typeof document === "undefined")
|
|
13769
|
-
return false;
|
|
13770
|
-
return (document.documentElement.classList.contains("dark") ||
|
|
13771
|
-
document.documentElement.getAttribute("data-theme") === "dark");
|
|
13772
|
-
};
|
|
13773
|
-
/**
|
|
13774
|
-
* CSS 문자열에서 다크 모드 블록(.dark { ... } 등)을 추출합니다.
|
|
13775
|
-
*/
|
|
13776
|
-
const extractDarkBlock = (cssContent) => {
|
|
13777
|
-
// .dark 또는 [data-theme="dark"]로 시작하고 중괄호로 묶인 블록을 찾음
|
|
13778
|
-
const regex = /(?:\[data-theme="?dark"?\]|(?:\.dark))[\s\S]*?{([^}]+)}/i;
|
|
13779
|
-
const match = cssContent.match(regex);
|
|
13780
|
-
if (match && match[1]) {
|
|
13781
|
-
return match[1];
|
|
13782
|
-
}
|
|
13783
|
-
return null;
|
|
13784
|
-
};
|
|
13785
13743
|
/**
|
|
13786
13744
|
* 주어진 CSS 변수 이름에 대한 Hex 코드를 반환합니다.
|
|
13787
13745
|
*
|
|
@@ -13809,7 +13767,6 @@ const getColorHex = (variable) => {
|
|
|
13809
13767
|
}
|
|
13810
13768
|
return null;
|
|
13811
13769
|
};
|
|
13812
|
-
// 1. 브라우저 계산 스타일 시도
|
|
13813
13770
|
const style = getComputedStyle(document.documentElement);
|
|
13814
13771
|
const computedValue = style.getPropertyValue(varQuery).trim();
|
|
13815
13772
|
if (computedValue) {
|
|
@@ -13817,31 +13774,6 @@ const getColorHex = (variable) => {
|
|
|
13817
13774
|
if (resolved)
|
|
13818
13775
|
return resolved;
|
|
13819
13776
|
}
|
|
13820
|
-
// 2. Fallback: 원본 CSS 파일 파싱
|
|
13821
|
-
// 다크 모드일 경우 theme.css의 다크 모드 블록을 최우선으로 검색
|
|
13822
|
-
if (isDarkMode() && typeof themeCss === "string") {
|
|
13823
|
-
const darkBlock = extractDarkBlock(themeCss);
|
|
13824
|
-
if (darkBlock) {
|
|
13825
|
-
const rawValue = findVarInCssString(darkBlock, varQuery);
|
|
13826
|
-
if (rawValue) {
|
|
13827
|
-
const resolved = resolveValue(rawValue);
|
|
13828
|
-
if (resolved)
|
|
13829
|
-
return resolved;
|
|
13830
|
-
}
|
|
13831
|
-
}
|
|
13832
|
-
}
|
|
13833
|
-
// 그 다음 theme.css 전체(root 및 기본값), 마지막으로 color.css 검색
|
|
13834
|
-
const rawSources = [themeCss, colorCss];
|
|
13835
|
-
for (const source of rawSources) {
|
|
13836
|
-
if (typeof source === "string") {
|
|
13837
|
-
const rawValue = findVarInCssString(source, varQuery);
|
|
13838
|
-
if (rawValue) {
|
|
13839
|
-
const resolved = resolveValue(rawValue);
|
|
13840
|
-
if (resolved)
|
|
13841
|
-
return resolved;
|
|
13842
|
-
}
|
|
13843
|
-
}
|
|
13844
|
-
}
|
|
13845
13777
|
return null;
|
|
13846
13778
|
};
|
|
13847
13779
|
|
package/dist/esm/client.js
CHANGED
|
@@ -13696,11 +13696,6 @@ const Switch = (props) => {
|
|
|
13696
13696
|
return (jsxs(Fragment, { children: [props.variant === SWITCH_VARIANTS.FILLED && (jsx(FilledSwitch, { checked: defaultChecked ? checked : isChecked, onCheckedChange: handleCheckedChange, ...props })), props.variant === SWITCH_VARIANTS.OUTLINED && (jsx(OutlinedSwitch, { checked: defaultChecked ? checked : isChecked, onCheckedChange: handleCheckedChange, ...props })), props.variant === SWITCH_VARIANTS.SLIDE && (jsx(SlideSwitch, { checked: defaultChecked ? checked : isChecked, onCheckedChange: handleCheckedChange, ...props }))] }));
|
|
13697
13697
|
};
|
|
13698
13698
|
|
|
13699
|
-
var colorCss = "@theme {\n --color-pure-black: rgba(0, 0, 0, 1);\n --color-pure-black-5: rgba(0, 0, 0, 0.05);\n --color-pure-black-15: rgba(0, 0, 0, 0.15);\n --color-pure-black-30: rgba(0, 0, 0, 0.3);\n --color-pure-black-50: rgba(0, 0, 0, 0.5);\n --color-pure-black-75: rgba(0, 0, 0, 0.75);\n --color-pure-white: rgba(255, 255, 255, 1);\n --color-pure-white-2: rgba(255, 255, 255, 0.02);\n --color-pure-white-5: rgba(255, 255, 255, 0.05);\n --color-pure-white-15: rgba(255, 255, 255, 0.15);\n --color-pure-white-30: rgba(255, 255, 25 5, 0.3);\n --color-pure-white-50: rgba(255, 255, 255, 0.5);\n --color-pure-white-75: rgba(255, 255, 255, 0.75);\n --color-pure-transparent: rgba(255, 255, 255, 0);\n --color-pure-near-transparent: rgba(152, 152, 152, 0.001);\n\n --color-neutral-10: #fbfbfbff;\n --color-neutral-25: #f9f9f9ff;\n --color-neutral-50: #f3f3f3ff;\n --color-neutral-75: #edededff;\n --color-neutral-100: #e5e5e5ff;\n --color-neutral-150: #d9d9d9ff;\n --color-neutral-200: #ccccccff;\n --color-neutral-250: #bfbfbfff;\n --color-neutral-300: #b2b2b2ff;\n --color-neutral-350: #a6a6a6ff;\n --color-neutral-400: #999999ff;\n --color-neutral-450: #8c8c8cff;\n --color-neutral-500: #808080ff;\n --color-neutral-550: #6e6e6eff;\n --color-neutral-600: #616161ff;\n --color-neutral-650: #545454ff;\n --color-neutral-700: #474747ff;\n --color-neutral-750: #383838ff;\n --color-neutral-800: #2e2e2eff;\n --color-neutral-825: #292929ff;\n --color-neutral-850: #212121ff;\n --color-neutral-875: #1d1d1dff;\n --color-neutral-900: #1a1a1aff;\n --color-neutral-950: #0d0d0dff;\n\n --color-telepix-red-100: #fce8ebff;\n --color-telepix-red-200: #f7bbc3ff;\n --color-telepix-red-300: #f28d9aff;\n --color-telepix-red-400: #ec5f72ff;\n --color-telepix-red-500: #e7344cff;\n --color-telepix-red-600: #cd1831ff;\n --color-telepix-red-700: #a01326ff;\n --color-telepix-red-800: #720d1bff;\n --color-telepix-red-900: #37060dff;\n\n --color-red-100: #faccccff;\n --color-red-200: #f59999ff;\n --color-red-300: #ef6666ff;\n --color-red-400: #ea3333ff;\n --color-red-500: #e50000ff;\n --color-red-600: #b70000ff;\n --color-red-700: #890000ff;\n --color-red-800: #5c0000ff;\n --color-red-900: #2e0000ff;\n\n --color-orange-100: #ffe6ccff;\n --color-orange-200: #ffcc99ff;\n --color-orange-300: #ffb366ff;\n --color-orange-400: #ff9933ff;\n --color-orange-500: #ff8000ff;\n --color-orange-600: #cc6600ff;\n --color-orange-700: #994d00ff;\n --color-orange-800: #663300ff;\n --color-orange-900: #331a00ff;\n\n --color-yellow-100: #fff5ccff;\n --color-yellow-200: #ffeb99ff;\n --color-yellow-300: #ffe066ff;\n --color-yellow-400: #ffd633ff;\n --color-yellow-500: #ffcc00ff;\n --color-yellow-600: #cca300ff;\n --color-yellow-700: #997a00ff;\n --color-yellow-800: #665200ff;\n --color-yellow-900: #332900ff;\n\n --color-green-100: #ccebd6ff;\n --color-green-200: #99d6adff;\n --color-green-300: #66c285ff;\n --color-green-400: #33ad5cff;\n --color-green-500: #009933ff;\n --color-green-600: #007a29ff;\n --color-green-700: #005c1fff;\n --color-green-800: #003d14ff;\n --color-green-900: #001f0aff;\n\n --color-teal-100: #ccf5f5ff;\n --color-teal-200: #99ebebff;\n --color-teal-300: #66e0e0ff;\n --color-teal-400: #33d6d6ff;\n --color-teal-500: #00ccccff;\n --color-teal-600: #00a3a3ff;\n --color-teal-700: #007a7aff;\n --color-teal-800: #005252ff;\n --color-teal-900: #002929ff;\n\n --color-cyan-100: #cceeffff;\n --color-cyan-200: #99ddffff;\n --color-cyan-300: #66ccffff;\n --color-cyan-400: #33bbffff;\n --color-cyan-500: #00aaffff;\n --color-cyan-600: #0088ccff;\n --color-cyan-700: #006699ff;\n --color-cyan-800: #004466ff;\n --color-cyan-900: #002233ff;\n\n --color-blue-100: #d6ddffff;\n --color-blue-200: #adbbffff;\n --color-blue-300: #8599ffff;\n --color-blue-400: #5c77ffff;\n --color-blue-500: #3355ffff;\n --color-blue-600: #2944ccff;\n --color-blue-700: #1f3399ff;\n --color-blue-800: #142266ff;\n --color-blue-900: #0a1133ff;\n\n --color-purple-100: #e4d6ffff;\n --color-purple-200: #c9adffff;\n --color-purple-300: #ad85ffff;\n --color-purple-400: #925cffff;\n --color-purple-500: #7733ffff;\n --color-purple-600: #5f29ccff;\n --color-purple-700: #471f99ff;\n --color-purple-800: #301466ff;\n --color-purple-900: #180a33ff;\n\n --color-violet-100: #f1d6ffff;\n --color-violet-200: #e4adffff;\n --color-violet-300: #d685ffff;\n --color-violet-400: #c95cffff;\n --color-violet-500: #bb33ffff;\n --color-violet-600: #9629ccff;\n --color-violet-700: #701f99ff;\n --color-violet-800: #4b1466ff;\n --color-violet-900: #250a33ff;\n\n --color-pink-100: #ffd6ddff;\n --color-pink-200: #ffadbbff;\n --color-pink-300: #ff8599ff;\n --color-pink-400: #ff5c77ff;\n --color-pink-500: #ff3355ff;\n --color-pink-600: #cc2944ff;\n --color-pink-700: #991f33ff;\n --color-pink-800: #661422ff;\n --color-pink-900: #330a11ff;\n\n --color-magenta-100: #feebfbff;\n --color-magenta-200: #fdc4f2ff;\n --color-magenta-300: #fb92e7ff;\n --color-magenta-400: #fa65ddff;\n --color-magenta-500: #f939d3ff;\n --color-magenta-600: #ed08c0ff;\n --color-magenta-700: #940578ff;\n --color-magenta-800: #5e034cff;\n --color-magenta-900: #190114ff;\n\n --color-dark-opacity-10: rgba(0, 0, 0, 0.01);\n --color-dark-opacity-20: rgba(0, 0, 0, 0.02);\n --color-dark-opacity-30: rgba(0, 0, 0, 0.03);\n --color-dark-opacity-40: rgba(0, 0, 0, 0.04);\n --color-dark-opacity-50: rgba(0, 0, 0, 0.05);\n --color-dark-opacity-70: rgba(0, 0, 0, 0.07);\n --color-dark-opacity-100: rgba(0, 0, 0, 0.1);\n --color-dark-opacity-150: rgba(0, 0, 0, 0.15);\n --color-dark-opacity-200: rgba(0, 0, 0, 0.2);\n --color-dark-opacity-250: rgba(0, 0, 0, 0.25);\n --color-dark-opacity-300: rgba(0, 0, 0, 0.3);\n --color-dark-opacity-350: rgba(0, 0, 0, 0.35);\n --color-dark-opacity-400: rgba(0, 0, 0, 0.4);\n --color-dark-opacity-450: rgba(0, 0, 0, 0.46);\n --color-dark-opacity-500: rgba(0, 0, 0, 0.51);\n --color-dark-opacity-550: rgba(0, 0, 0, 0.58);\n --color-dark-opacity-600: rgba(0, 0, 0, 0.63);\n --color-dark-opacity-650: rgba(0, 0, 0, 0.68);\n --color-dark-opacity-700: rgba(0, 0, 0, 0.73);\n --color-dark-opacity-750: rgba(0, 0, 0, 0.8);\n --color-dark-opacity-800: rgba(0, 0, 0, 0.84);\n --color-dark-opacity-850: rgba(0, 0, 0, 0.89);\n --color-dark-opacity-900: rgba(0, 0, 0, 0.92);\n\n --color-light-opacity-10: rgba(255, 255, 255, 0.01);\n --color-light-opacity-20: rgba(255, 255, 255, 0.02);\n --color-light-opacity-30: rgba(255, 255, 255, 0.03);\n --color-light-opacity-40: rgba(255, 255, 255, 0.04);\n --color-light-opacity-50: rgba(255, 255, 255, 0.05);\n --color-light-opacity-70: rgba(255, 255, 255, 0.07);\n --color-light-opacity-100: rgba(255, 255, 255, 0.09);\n --color-light-opacity-150: rgba(255, 255, 255, 0.14);\n --color-light-opacity-200: rgba(255, 255, 255, 0.18);\n --color-light-opacity-250: rgba(255, 255, 255, 0.24);\n --color-light-opacity-300: rgba(255, 255, 255, 0.3);\n --color-light-opacity-350: rgba(255, 255, 255, 0.35);\n --color-light-opacity-400: rgba(255, 255, 255, 0.4);\n --color-light-opacity-450: rgba(255, 255, 255, 0.48);\n --color-light-opacity-500: rgba(255, 255, 255, 0.53);\n --color-light-opacity-550: rgba(255, 255, 255, 0.58);\n --color-light-opacity-600: rgba(255, 255, 255, 0.63);\n --color-light-opacity-650: rgba(255, 255, 255, 0.68);\n --color-light-opacity-700: rgba(255, 255, 255, 0.73);\n --color-light-opacity-750: rgba(255, 255, 255, 0.79);\n --color-light-opacity-800: rgba(255, 255, 255, 0.84);\n --color-light-opacity-850: rgba(255, 255, 255, 0.89);\n --color-light-opacity-900: rgba(255, 255, 255, 0.94);\n\n --text-xsmall: 0.625rem; /* 10px */\n --text-label: 0.75rem; /* 12px */\n --text-body: 0.875rem; /* 14px */\n --text-base: 1rem; /* 16px */\n --text-large: 1.125rem; /* 18px */\n --text-xl: 1.25rem; /* 20px */\n --text-xxl: 1.5rem; /* 24px */\n --text-xxxl: 1.875rem; /* 30px */\n --text-xxxxl: 2.25rem; /* 36px */\n --text-size-inherit: inherit;\n\n --font-weight-thin: 100;\n --font-weight-extralight: 200;\n --font-weight-light: 300;\n --font-weight-normal: 400;\n --font-weight-medium: 500;\n --font-weight-semibold: 600;\n --font-weight-bold: 700;\n --font-weight-extrabold: 800;\n --font-weight-black: 900;\n --font-weight-inherit: inherit;\n\n --spacing-xsmall: 0.875rem; /** 14px */\n --spacing-label: 1.3125rem; /** 21px */\n --spacing-label-compact: 0.75rem; /** 12px */\n --spacing-body: 1.5rem; /** 24px */\n --spacing-body-compact: 0.875rem; /** 14px */\n --spacing-base: 1.75rem; /** 28px */\n --spacing-base-compact: 1rem; /** 16px */\n --spacing-large: 2rem; /** 32px */\n --spacing-large-compact: 1.125rem; /** 18px */\n --spacing-xl: 2.25rem; /** 36px */\n --spacing-xl-compact: 1.25rem; /** 20px */\n --spacing-xxl: 2.625rem; /** 42px */\n --spacing-xxl-compact: 1.5rem; /** 24px */\n --spacing-xxxl: 3.25rem; /** 52px */\n --spacing-inherit: inherit;\n\n --shadow-small: 0 1px 1px 0 rgba(0, 0, 0, 0.2);\n --shadow-basic:\n 0 1px 1px 0 rgba(0, 0, 0, 0.3), 0 1px 3px 1px rgba(0, 0, 0, 0.1);\n --shadow-medium:\n 0 1px 2px 0 rgba(0, 0, 0, 0.4), 0 3px 4px 2px rgba(0, 0, 0, 0.15);\n --shadow-large:\n 0 1px 4px -1px rgba(0, 0, 0, 0.6), 0 6px 8px 2px rgba(0, 0, 0, 0.2);\n --shadow-xlarge:\n 0px 20px 25px -5px rgba(0, 0, 0, 0.1), 0px 8px 10px -6px rgba(0, 0, 0, 0.1);\n --shadow-xxlarge: 0px 25px 50px -12px rgba(0, 0, 0, 0.25);\n --shadow-inner: 0px 2px 4px 0px rgba(0, 0, 0, 0.3) inset;\n --shadow-none: 0px 0px 0px 0px rgba(0, 0, 0, 0);\n --shadow-glass-basic:\n 0 1px 1px 0 rgba(0, 0, 0, 0.3), 0 1px 3px 0 rgba(0, 0, 0, 0.1);\n --shadow-glass-medium:\n 0 1px 2px -1px rgba(0, 0, 0, 0.5), 0 2px 4px 1px rgba(0, 0, 0, 0.25);\n --blur-glass: blur(8px);\n\n @keyframes fade-in {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n\n @keyframes content-fade-in {\n 0% {\n transform: translate(-50%, -53%);\n opacity: 0;\n }\n 100% {\n transform: translate(-50%, -50%);\n opacity: 1;\n }\n }\n\n @keyframes toast-slide-in-top {\n 0% {\n opacity: 0;\n transform: translateY(-0.75rem) scale(0.96);\n }\n 100% {\n opacity: 1;\n transform: translateY(0) scale(1);\n }\n }\n\n @keyframes toast-slide-in-bottom {\n 0% {\n opacity: 0;\n transform: translateY(0.75rem) scale(0.96);\n }\n 100% {\n opacity: 1;\n transform: translateY(0) scale(1);\n }\n }\n\n @keyframes toast-slide-out-top {\n 0% {\n opacity: 1;\n transform: translateY(0) scale(1);\n }\n 100% {\n opacity: 0;\n transform: translateY(-0.5rem) scale(0.96);\n }\n }\n\n @keyframes toast-slide-out-bottom {\n 0% {\n opacity: 1;\n transform: translateY(0) scale(1);\n }\n 100% {\n opacity: 0;\n transform: translateY(0.5rem) scale(0.96);\n }\n }\n\n --animate-fade-in: fade-in 150ms ease-in-out forwards;\n --animate-content-fade-in: content-fade-in 150ms ease-in-out forwards;\n --animate-toast-slide-in-top: toast-slide-in-top 250ms\n cubic-bezier(0.21, 1.02, 0.73, 1) forwards;\n --animate-toast-slide-in-bottom: toast-slide-in-bottom 250ms\n cubic-bezier(0.21, 1.02, 0.73, 1) forwards;\n --animate-toast-slide-out-top: toast-slide-out-top 180ms\n cubic-bezier(0.06, 0.71, 0.55, 1) forwards;\n --animate-toast-slide-out-bottom: toast-slide-out-bottom 180ms\n cubic-bezier(0.06, 0.71, 0.55, 1) forwards;\n}\n";
|
|
13700
|
-
|
|
13701
|
-
var themeCss = ":root {\n --page-l-null: var(--color-pure-near-transparent);\n --page-l0: var(--color-pure-white);\n --page-l1: var(--color-neutral-10);\n --page-l2: var(--color-neutral-25);\n --page-l3: var(--color-neutral-50);\n --page-l4: var(--color-neutral-75);\n --page-fade: var(--color-pure-black-50);\n\n --page-l0-transparent: rgba(255, 255, 255, 0);\n --page-l1-transparent: rgba(251, 251, 251, 0);\n\n --page-chroma-warning: var(--color-orange-500);\n --page-chroma-error: var(--color-red-400);\n --page-chroma-positive: var(--color-green-400);\n --page-chroma-cloud: var(--color-blue-500);\n --page-chroma-onpremise: var(--color-orange-400);\n --page-chroma-highlight-yellow: var(--color-yellow-500);\n\n --page-accent-l0: var(--color-neutral-850);\n --page-accent-l1: var(--color-neutral-800);\n\n --page-translucent-l0: rgba(255, 255, 255, 0.88);\n --page-translucent-l1: rgba(251, 251, 251, 0.88);\n --page-translucent-l2: rgba(249, 249, 249, 0.88);\n --page-translucent-l3: rgba(243, 243, 243, 0.88);\n --page-translucent-l4: rgba(237, 237, 237, 0.88);\n\n --comp-disabled: var(--color-dark-opacity-450);\n\n --comp-mono-default: var(--color-dark-opacity-800);\n\n --comp-mono-subtle-default: var(--color-dark-opacity-600);\n\n --comp-chroma-warning: var(--color-orange-500);\n --comp-chroma-error: var(--color-red-400);\n --comp-chroma-error-subtle: var(--color-telepix-red-400);\n --comp-chroma-positive: var(--color-green-400);\n --comp-chroma-cloud: var(--color-blue-500);\n --comp-chroma-onpremise: var(--color-orange-400);\n --comp-chroma-highlight-yellow: var(--color-yellow-500);\n\n --comp-accent-default: var(--color-light-opacity-900);\n\n --fill-default: var(--color-pure-transparent);\n --fill-hovered: var(--color-dark-opacity-50);\n --fill-pressed: var(--color-dark-opacity-150);\n --fill-selected: var(--color-dark-opacity-100);\n --fill-disabled: var(--color-pure-transparent);\n\n --fill-invert-default: var(--color-pure-transparent);\n --fill-invert-hovered: var(--color-light-opacity-70);\n --fill-invert-pressed: var(--color-light-opacity-300);\n --fill-invert-selected: var(--color-light-opacity-200);\n --fill-invert-disabled: var(--color-pure-transparent);\n\n --border-bound: var(--color-dark-opacity-200);\n --border-focused: var(--color-dark-opacity-550);\n --border-selected: var(--color-dark-opacity-400);\n --border-divider: var(--color-neutral-200);\n --border-overlay: var(--color-pure-transparent);\n\n --border-accent-bound: var(--color-light-opacity-300);\n --border-accent-selected: var(--color-light-opacity-550);\n}\n\n[data-theme=\"dark\"],\n.dark {\n --page-l-null: var(--color-pure-near-transparent);\n --page-l0: var(--color-neutral-900);\n --page-l1: var(--color-neutral-875);\n --page-l2: var(--color-neutral-850);\n --page-l3: var(--color-neutral-825);\n --page-l4: var(--color-neutral-800);\n --page-fade: var(--color-pure-black-75);\n\n --page-l0-transparent: rgba(26, 26, 26, 0);\n --page-l1-transparent: rgba(29, 29, 29, 0);\n\n --page-chroma-warning: var(--color-orange-600);\n --page-chroma-error: var(--color-red-500);\n --page-chroma-positive: var(--color-green-500);\n --page-chroma-cloud: var(--color-blue-500);\n --page-chroma-onpremise: var(--color-orange-500);\n --page-chroma-highlight-yellow: var(--color-yellow-600);\n\n --page-accent-l0: var(--color-neutral-100);\n --page-accent-l1: var(--color-neutral-150);\n\n --page-translucent-l0: rgba(26, 26, 26, 0.8);\n --page-translucent-l1: rgba(29, 29, 29, 0.8);\n --page-translucent-l2: rgba(33, 33, 33, 0.8);\n --page-translucent-l3: rgba(41, 41, 41, 0.8);\n --page-translucent-l4: rgba(46, 46, 46, 0.8);\n\n --comp-disabled: var(--color-light-opacity-350);\n\n --comp-mono-default: var(--color-light-opacity-800);\n\n --comp-mono-subtle-default: var(--color-light-opacity-600);\n\n --comp-chroma-warning: var(--color-orange-500);\n --comp-chroma-error: var(--color-red-400);\n --comp-chroma-error-subtle: var(--color-red-300);\n --comp-chroma-positive: var(--color-green-400);\n --comp-chroma-cloud: var(--color-blue-500);\n --comp-chroma-onpremise: var(--color-orange-400);\n --comp-chroma-highlight-yellow: var(--color-yellow-500);\n\n --comp-accent-default: var(--color-dark-opacity-800);\n\n --fill-default: var(--color-pure-transparent);\n --fill-hovered: var(--color-light-opacity-50);\n --fill-pressed: var(--color-light-opacity-150);\n --fill-selected: var(--color-light-opacity-100);\n --fill-disabled: var(--color-pure-transparent);\n\n --fill-invert-default: var(--color-pure-transparent);\n --fill-invert-hovered: var(--color-dark-opacity-100);\n --fill-invert-pressed: var(--color-dark-opacity-300);\n --fill-invert-selected: var(--color-dark-opacity-200);\n --fill-invert-disabled: var(--color-pure-transparent);\n\n --border-bound: var(--color-light-opacity-250);\n --border-focused: var(--color-light-opacity-700);\n --border-selected: var(--color-light-opacity-450);\n --border-divider: var(--color-neutral-750);\n --border-overlay: var(--color-light-opacity-50);\n\n --border-accent-bound: var(--color-dark-opacity-400);\n --border-accent-selected: var(--color-dark-opacity-650);\n}\n\n@theme inline {\n --color-page-l-null: var(--page-l-null);\n --color-page-l0: var(--page-l0);\n --color-page-l1: var(--page-l1);\n --color-page-l2: var(--page-l2);\n --color-page-l3: var(--page-l3);\n --color-page-l4: var(--page-l4);\n --color-page-fade: var(--page-fade);\n\n --color-page-l0-transparent: var(--page-l0-transparent);\n --color-page-l1-transparent: var(--page-l1-transparent);\n\n --color-page-chroma-warning: var(--page-chroma-warning);\n --color-page-chroma-error: var(--page-chroma-error);\n --color-page-chroma-positive: var(--page-chroma-positive);\n --color-page-chroma-cloud: var(--page-chroma-cloud);\n --color-page-chroma-onpremise: var(--page-chroma-onpremise);\n --color-page-chroma-highlight-yellow: var(--page-chroma-highlight-yellow);\n\n --color-page-accent-l0: var(--page-accent-l0);\n --color-page-accent-l1: var(--page-accent-l1);\n\n --color-page-translucent-l0: var(--page-translucent-l0);\n --color-page-translucent-l1: var(--page-translucent-l1);\n --color-page-translucent-l2: var(--page-translucent-l2);\n --color-page-translucent-l3: var(--page-translucent-l3);\n --color-page-translucent-l4: var(--page-translucent-l4);\n\n --color-comp-disabled: var(--comp-disabled);\n\n --color-comp-mono-default: var(--comp-mono-default);\n\n --color-comp-mono-subtle-default: var(--comp-mono-subtle-default);\n\n --color-comp-chroma-warning: var(--comp-chroma-warning);\n --color-comp-chroma-error: var(--comp-chroma-error);\n --color-comp-chroma-error-subtle: var(--comp-chroma-error-subtle);\n --color-comp-chroma-positive: var(--comp-chroma-positive);\n --color-comp-chroma-cloud: var(--comp-chroma-cloud);\n --color-comp-chroma-onpremise: var(--comp-chroma-onpremise);\n --color-comp-chroma-highlight-yellow: var(--comp-chroma-highlight-yellow);\n\n --color-comp-accent-default: var(--comp-accent-default);\n\n --color-fill-default: var(--fill-default);\n --color-fill-hovered: var(--fill-hovered);\n --color-fill-pressed: var(--fill-pressed);\n --color-fill-selected: var(--fill-selected);\n --color-fill-disabled: var(--fill-disabled);\n\n --color-fill-invert-default: var(--fill-invert-default);\n --color-fill-invert-hovered: var(--fill-invert-hovered);\n --color-fill-invert-pressed: var(--fill-invert-pressed);\n --color-fill-invert-selected: var(--fill-invert-selected);\n --color-fill-invert-disabled: var(--fill-invert-disabled);\n\n --color-border-bound: var(--border-bound);\n --color-border-focused: var(--border-focused);\n --color-border-selected: var(--border-selected);\n --color-border-divider: var(--border-divider);\n --color-border-overlay: var(--border-overlay);\n\n --color-border-accent-bound: var(--border-accent-bound);\n --color-border-accent-selected: var(--border-accent-selected);\n}\n";
|
|
13702
|
-
|
|
13703
|
-
// @ts-ignore
|
|
13704
13699
|
/**
|
|
13705
13700
|
* RGB 또는 RGBA 문자열을 Hex 문자열로 변환합니다.
|
|
13706
13701
|
* @param rgb - RGB/RGBA 문자열 (예: "rgb(255, 0, 0)" 또는 "rgba(255, 0, 0, 0.5)")
|
|
@@ -13725,43 +13720,6 @@ const rgbaToHex = (rgb) => {
|
|
|
13725
13720
|
const hexA = getHexAlpha(a);
|
|
13726
13721
|
return `#${toHex(r)}${toHex(g)}${toHex(b)}${hexA}`;
|
|
13727
13722
|
};
|
|
13728
|
-
/**
|
|
13729
|
-
* 원본 CSS 문자열에서 변수 정의를 찾기 위한 헬퍼 함수입니다.
|
|
13730
|
-
*/
|
|
13731
|
-
const findVarInCssString = (cssContent, varName) => {
|
|
13732
|
-
// Regex 설명:
|
|
13733
|
-
// 1. 변수 이름을 찾되, 만약을 대비해 이스케이프 처리합니다.
|
|
13734
|
-
// 2. 공백을 허용하고, 그 다음 콜론을 찾습니다.
|
|
13735
|
-
// 3. 다음 세미콜론이나 닫는 중괄호까지 캡처합니다.
|
|
13736
|
-
const escapedName = varName.replace(/[-\/\\^$*+?.()|[\]{}]/g, "\\$&");
|
|
13737
|
-
const regex = new RegExp(`${escapedName}\\s*:\\s*([^;}\\n]+)`, "i");
|
|
13738
|
-
const match = cssContent.match(regex);
|
|
13739
|
-
if (match && match[1]) {
|
|
13740
|
-
return match[1].trim();
|
|
13741
|
-
}
|
|
13742
|
-
return null;
|
|
13743
|
-
};
|
|
13744
|
-
/**
|
|
13745
|
-
* 현재 문서 상태가 다크 모드인지 확인합니다.
|
|
13746
|
-
*/
|
|
13747
|
-
const isDarkMode = () => {
|
|
13748
|
-
if (typeof document === "undefined")
|
|
13749
|
-
return false;
|
|
13750
|
-
return (document.documentElement.classList.contains("dark") ||
|
|
13751
|
-
document.documentElement.getAttribute("data-theme") === "dark");
|
|
13752
|
-
};
|
|
13753
|
-
/**
|
|
13754
|
-
* CSS 문자열에서 다크 모드 블록(.dark { ... } 등)을 추출합니다.
|
|
13755
|
-
*/
|
|
13756
|
-
const extractDarkBlock = (cssContent) => {
|
|
13757
|
-
// .dark 또는 [data-theme="dark"]로 시작하고 중괄호로 묶인 블록을 찾음
|
|
13758
|
-
const regex = /(?:\[data-theme="?dark"?\]|(?:\.dark))[\s\S]*?{([^}]+)}/i;
|
|
13759
|
-
const match = cssContent.match(regex);
|
|
13760
|
-
if (match && match[1]) {
|
|
13761
|
-
return match[1];
|
|
13762
|
-
}
|
|
13763
|
-
return null;
|
|
13764
|
-
};
|
|
13765
13723
|
/**
|
|
13766
13724
|
* 주어진 CSS 변수 이름에 대한 Hex 코드를 반환합니다.
|
|
13767
13725
|
*
|
|
@@ -13789,7 +13747,6 @@ const getColorHex = (variable) => {
|
|
|
13789
13747
|
}
|
|
13790
13748
|
return null;
|
|
13791
13749
|
};
|
|
13792
|
-
// 1. 브라우저 계산 스타일 시도
|
|
13793
13750
|
const style = getComputedStyle(document.documentElement);
|
|
13794
13751
|
const computedValue = style.getPropertyValue(varQuery).trim();
|
|
13795
13752
|
if (computedValue) {
|
|
@@ -13797,31 +13754,6 @@ const getColorHex = (variable) => {
|
|
|
13797
13754
|
if (resolved)
|
|
13798
13755
|
return resolved;
|
|
13799
13756
|
}
|
|
13800
|
-
// 2. Fallback: 원본 CSS 파일 파싱
|
|
13801
|
-
// 다크 모드일 경우 theme.css의 다크 모드 블록을 최우선으로 검색
|
|
13802
|
-
if (isDarkMode() && typeof themeCss === "string") {
|
|
13803
|
-
const darkBlock = extractDarkBlock(themeCss);
|
|
13804
|
-
if (darkBlock) {
|
|
13805
|
-
const rawValue = findVarInCssString(darkBlock, varQuery);
|
|
13806
|
-
if (rawValue) {
|
|
13807
|
-
const resolved = resolveValue(rawValue);
|
|
13808
|
-
if (resolved)
|
|
13809
|
-
return resolved;
|
|
13810
|
-
}
|
|
13811
|
-
}
|
|
13812
|
-
}
|
|
13813
|
-
// 그 다음 theme.css 전체(root 및 기본값), 마지막으로 color.css 검색
|
|
13814
|
-
const rawSources = [themeCss, colorCss];
|
|
13815
|
-
for (const source of rawSources) {
|
|
13816
|
-
if (typeof source === "string") {
|
|
13817
|
-
const rawValue = findVarInCssString(source, varQuery);
|
|
13818
|
-
if (rawValue) {
|
|
13819
|
-
const resolved = resolveValue(rawValue);
|
|
13820
|
-
if (resolved)
|
|
13821
|
-
return resolved;
|
|
13822
|
-
}
|
|
13823
|
-
}
|
|
13824
|
-
}
|
|
13825
13757
|
return null;
|
|
13826
13758
|
};
|
|
13827
13759
|
|