@ai-ecoverse/slicc-spectrum 1.15.0 → 1.15.1
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/slicc-ui.js +6 -2
- package/dist/slicc-ui.js.map +2 -2
- package/package.json +2 -2
package/dist/slicc-ui.js
CHANGED
|
@@ -13007,7 +13007,7 @@ var SliccSettings = class extends ModelElement {
|
|
|
13007
13007
|
};
|
|
13008
13008
|
|
|
13009
13009
|
// src/app/sprinkle-theme.css
|
|
13010
|
-
var sprinkle_theme_default = ':root {\n --s2-gray-25: #1a1a1a;\n --s2-gray-50: #1e1e1e;\n --s2-gray-75: #252525;\n --s2-gray-100: #2c2c2c;\n --s2-gray-200: #3a3a3a;\n --s2-gray-300: #4a4a4a;\n --s2-gray-400: #5a5a5a;\n --s2-gray-500: #6e6e6e;\n --s2-gray-600: #8a8a8a;\n --s2-gray-700: #a1a1a1;\n --s2-gray-800: #cfcfcf;\n --s2-gray-900: #e8e8e8;\n --s2-gray-1000: #ffffff;\n\n --s2-bg-base: var(--s2-gray-25);\n --s2-bg-layer-1: var(--s2-gray-50);\n --s2-bg-layer-2: var(--s2-gray-75);\n --s2-bg-elevated: var(--s2-gray-100);\n --s2-bg-sunken: #141414;\n\n --s2-content-default: var(--s2-gray-900);\n --s2-content-secondary: var(--s2-gray-700);\n --s2-content-tertiary: var(--s2-gray-600);\n --s2-content-disabled: var(--s2-gray-400);\n\n --slicc-cone: #ef7000;\n --slicc-scoop-blue: #3562ff;\n --slicc-scoop-purple: #a962e8;\n --slicc-scoop-teal: #2db9be;\n --slicc-accent: #15d675;\n\n --s2-accent: var(--slicc-scoop-blue);\n --s2-accent-hover: #4a75ff;\n --s2-accent-down: #2a52e0;\n\n --s2-negative: #e34850;\n --s2-positive: #2d9d78;\n --s2-informative: var(--slicc-scoop-blue);\n --s2-notice: #e68619;\n\n --s2-border-default: var(--s2-gray-300);\n --s2-border-subtle: var(--s2-gray-200);\n --s2-border-focus: var(--s2-accent);\n\n --s2-font-family:\n "adobe-clean-spectrum-vf", "Adobe Clean Spectrum VF", "Adobe Clean", "Source Sans Pro",\n -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;\n --s2-font-mono: "Source Code Pro", "JetBrains Mono", "Fira Code", "Cascadia Code", monospace;\n\n --s2-font-size-50: 11px;\n --s2-font-size-75: 12px;\n --s2-font-size-100: 14px;\n --s2-font-size-200: 16px;\n --s2-font-size-300: 18px;\n --s2-font-size-400: 20px;\n --s2-font-size-500: 22px;\n --s2-font-size-600: 25px;\n\n --s2-line-height-50: 14px;\n --s2-line-height-75: 16px;\n --s2-line-height-100: 18px;\n --s2-line-height-200: 20px;\n --s2-line-height-300: 22px;\n\n --s2-spacing-50: 4px;\n --s2-spacing-75: 6px;\n --s2-spacing-100: 8px;\n --s2-spacing-200: 12px;\n --s2-spacing-300: 16px;\n --s2-spacing-400: 24px;\n --s2-spacing-500: 32px;\n --s2-spacing-600: 40px;\n\n --s2-radius-s: 4px;\n --s2-radius-default: 8px;\n --s2-radius-l: 12px;\n --s2-radius-xl: 16px;\n --s2-radius-pill: 9999px;\n\n --s2-shadow-elevated: 0 4px 16px rgba(0, 0, 0, 0.4), 0 1px 4px rgba(0, 0, 0, 0.3);\n --s2-shadow-container: 0 1px 4px rgba(0, 0, 0, 0.2);\n\n --s2-transition-default: 130ms ease;\n\n --s2-header-height: 56px;\n\n --uxc-yellow-subtle-bg: #2e2719;\n --uxc-yellow-subtle-text: #df9b20;\n --uxc-purple-subtle-bg: #24192e;\n --uxc-purple-subtle-text: #b170e9;\n --uxc-cyan-subtle-bg: #19272e;\n --uxc-cyan-subtle-text: #209cdf;\n --uxc-magenta-subtle-bg: #2e1920;\n --uxc-magenta-subtle-text: #e5618e;\n --uxc-indigo-subtle-bg: #1f192e;\n --uxc-indigo-subtle-text: #977ae9;\n --uxc-gray-subtle-bg: #292929;\n --uxc-gray-subtle-text: #cfcfcf;\n --uxc-positive-subtle-bg: #192e25;\n --uxc-positive-subtle-text: #20df8a;\n --uxc-notice-subtle-bg: #2e2219;\n --uxc-notice-subtle-text: #e07829;\n --uxc-negative-subtle-bg: #2e1920;\n --uxc-negative-subtle-text: #e5618e;\n --uxc-accent-subtle-bg: #191d2e;\n --uxc-accent-subtle-text: #6d87ea;\n --uxc-neutral-subtle-bg: #252525;\n\n --uxc-nav-rail-width: 58px;\n --uxc-thread-header-height: 56px;\n --uxc-content-max-width: 800px;\n\n --slicc-warm-bg: color-mix(in oklch, var(--s2-gray-50) 94%, var(--slicc-cone) 6%);\n --slicc-brand-gradient: linear-gradient(\n 90deg,\n var(--slicc-cone) 0%,\n var(--slicc-scoop-blue) 50%,\n var(--slicc-scoop-purple) 100%\n );\n}\n\n:root.theme-light,\n:root:where(:has(body[data-theme="light"])) {\n --s2-gray-25: #ffffff;\n --s2-gray-50: #f8f8f8;\n --s2-gray-75: #f3f3f3;\n --s2-gray-100: #e9e9e9;\n --s2-gray-200: #e1e1e1;\n --s2-gray-300: #dadada;\n --s2-gray-400: #c6c6c6;\n --s2-gray-500: #8f8f8f;\n --s2-gray-600: #717171;\n --s2-gray-700: #505050;\n --s2-gray-800: #292929;\n --s2-gray-900: #131313;\n --s2-gray-1000: #000000;\n\n --s2-bg-sunken: #f3f3f3;\n\n --s2-accent: #3b63fb;\n --s2-accent-hover: #2b54db;\n --s2-accent-down: #1e44c4;\n\n --s2-negative: #d92361;\n --s2-positive: #05834e;\n --s2-notice: #d45b00;\n\n --uxc-yellow-subtle-bg: #fff197;\n --uxc-yellow-subtle-text: #8e5b00;\n --uxc-purple-subtle-bg: #f4ebfc;\n --uxc-purple-subtle-text: #8d30de;\n --uxc-cyan-subtle-bg: #d9f4fd;\n --uxc-cyan-subtle-text: #0a6ba0;\n --uxc-magenta-subtle-bg: #ffe8f0;\n --uxc-magenta-subtle-text: #c01f56;\n --uxc-indigo-subtle-bg: #ebeeff;\n --uxc-indigo-subtle-text: #5424db;\n --uxc-gray-subtle-bg: #efefef;\n --uxc-gray-subtle-text: #292929;\n --uxc-positive-subtle-bg: #d7f7e1;\n --uxc-positive-subtle-text: #067443;\n --uxc-notice-subtle-bg: #ffeccf;\n --uxc-notice-subtle-text: #a74800;\n --uxc-negative-subtle-bg: #ffe8f0;\n --uxc-negative-subtle-text: #c01f56;\n --uxc-accent-subtle-bg: #e5f0fe;\n --uxc-accent-subtle-text: #2350fb;\n --uxc-neutral-subtle-bg: #f3f3f3;\n\n --s2-shadow-elevated:\n 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04), 0 0px 2px rgba(0, 0, 0, 0.12);\n --s2-shadow-container:\n 0 2px 8px rgba(0, 0, 0, 0.08), 0 1px 4px rgba(0, 0, 0, 0.04), 0 0px 1px rgba(0, 0, 0, 0.08);\n}\n\n.theme-light .tok-keyword,\n:root:where(:has(body[data-theme="light"])) .tok-keyword {\n color: #8839ef;\n}\n.theme-light .tok-string,\n:root:where(:has(body[data-theme="light"])) .tok-string {\n color: #40a02b;\n}\n.theme-light .tok-number,\n:root:where(:has(body[data-theme="light"])) .tok-number {\n color: #d05d1a;\n}\n.theme-light .tok-comment,\n:root:where(:has(body[data-theme="light"])) .tok-comment {\n color: var(--s2-gray-500);\n}\n.theme-light .tok-punct,\n:root:where(:has(body[data-theme="light"])) .tok-punct {\n color: #1e66f5;\n}\n.theme-light .tok-fn,\n:root:where(:has(body[data-theme="light"])) .tok-fn {\n color: #2b6cb0;\n}\n\n.theme-light .s2-tooltip,\n:root:where(:has(body[data-theme="light"])) .s2-tooltip {\n background: var(--s2-gray-900);\n color: var(--s2-gray-25);\n}\n\n.theme-light ::-webkit-scrollbar-thumb,\n:root:where(:has(body[data-theme="light"])) ::-webkit-scrollbar-thumb {\n background: var(--s2-gray-300);\n}\n.theme-light ::-webkit-scrollbar-thumb:hover,\n:root:where(:has(body[data-theme="light"])) ::-webkit-scrollbar-thumb:hover {\n background: var(--s2-gray-400);\n}\n\n.sprinkle-content {\n padding: var(--s2-spacing-200);\n}\n\n.sprinkle-heading {\n font-size: var(--s2-font-size-300);\n font-weight: 700;\n color: var(--s2-gray-900);\n margin: 0 0 var(--s2-spacing-100);\n line-height: 1.3;\n letter-spacing: 0;\n}\n.sprinkle-heading--m {\n font-size: var(--s2-font-size-200);\n}\n.sprinkle-heading--s {\n font-size: var(--s2-font-size-100);\n}\n.sprinkle-label {\n font-size: var(--s2-font-size-50);\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.06em;\n color: var(--s2-gray-600);\n line-height: 1.3;\n margin: 0;\n}\n.sprinkle-body {\n font-size: var(--s2-font-size-100);\n font-weight: 400;\n color: var(--s2-content-default);\n line-height: 1.5;\n}\n.sprinkle-detail {\n font-size: var(--s2-font-size-75);\n font-weight: 500;\n color: var(--s2-gray-600);\n line-height: 1.3;\n}\n\n.sprinkle-icon {\n display: inline-block;\n width: 16px;\n height: 16px;\n stroke-width: 2;\n vertical-align: middle;\n}\n.sprinkle-icon svg {\n width: 100%;\n height: 100%;\n display: block;\n}\n\n.sprinkle-icon--xs {\n width: 12px;\n height: 12px;\n}\n.sprinkle-icon--s {\n width: 14px;\n height: 14px;\n}\n.sprinkle-icon--m {\n width: 16px;\n height: 16px;\n}\n.sprinkle-icon--l {\n width: 20px;\n height: 20px;\n}\n.sprinkle-icon--xl {\n width: 24px;\n height: 24px;\n}\n\n.sprinkle-btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--s2-spacing-75);\n height: 32px;\n padding: 0 16px;\n border: 1px solid var(--s2-gray-200);\n border-radius: var(--s2-radius-xl);\n background: var(--s2-gray-50);\n color: var(--s2-gray-800);\n font-size: var(--s2-font-size-100);\n font-weight: 700;\n font-family: var(--s2-font-family);\n cursor: default;\n box-shadow: var(--s2-shadow-container);\n transition:\n background var(--s2-transition-default),\n border-color var(--s2-transition-default),\n transform var(--s2-transition-default);\n}\n.sprinkle-btn:hover {\n background: var(--s2-gray-100);\n}\n.sprinkle-btn:active {\n transform: scale(0.98);\n}\n.sprinkle-btn:focus-visible {\n outline: 2px solid var(--s2-border-focus);\n outline-offset: 2px;\n}\n.sprinkle-btn:disabled,\n.sprinkle-btn[disabled] {\n opacity: 0.4;\n pointer-events: none;\n}\n\n.sprinkle-btn--primary {\n background: var(--s2-accent);\n color: #fff;\n border-color: transparent;\n border-radius: var(--s2-radius-pill);\n box-shadow: none;\n}\n.sprinkle-btn--primary:hover {\n background: var(--s2-accent-hover);\n}\n.sprinkle-btn--primary:active {\n background: var(--s2-accent-down);\n transform: scale(0.98);\n}\n\n.sprinkle-btn--secondary {\n background: var(--s2-gray-50);\n border-color: var(--s2-gray-200);\n color: var(--s2-gray-800);\n}\n.sprinkle-btn--secondary:hover {\n background: var(--s2-gray-100);\n}\n\n.sprinkle-btn--negative {\n background: var(--s2-negative);\n color: var(--s2-gray-25);\n border-color: transparent;\n border-radius: var(--s2-radius-pill);\n box-shadow: none;\n}\n.sprinkle-btn--negative:hover {\n background: color-mix(in srgb, var(--s2-negative) 85%, #000);\n}\n\n.sprinkle-btn--quiet {\n background: transparent;\n border-color: transparent;\n box-shadow: none;\n color: var(--s2-gray-800);\n}\n.sprinkle-btn--quiet:hover {\n background: var(--s2-gray-100);\n}\n.sprinkle-btn-group {\n display: inline-flex;\n gap: var(--s2-spacing-100);\n}\n\n.sprinkle-badge {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n padding: 4px 8px;\n border-radius: 8px;\n font-size: 12px;\n font-weight: 700;\n line-height: 16px;\n white-space: nowrap;\n background: var(--s2-gray-800);\n color: var(--s2-gray-25);\n}\n\n.sprinkle-badge--positive {\n background: var(--s2-positive);\n color: var(--s2-gray-25);\n}\n.sprinkle-badge--negative {\n background: var(--s2-negative);\n color: var(--s2-gray-25);\n}\n.sprinkle-badge--notice {\n background: var(--s2-notice);\n color: var(--s2-gray-25);\n}\n.sprinkle-badge--informative {\n background: var(--s2-informative);\n color: #fff;\n}\n.sprinkle-badge--accent {\n background: var(--s2-accent);\n color: #fff;\n}\n\n.sprinkle-badge--subtle {\n background: var(--uxc-neutral-subtle-bg);\n color: var(--s2-gray-700);\n}\n.sprinkle-badge--subtle.sprinkle-badge--positive {\n background: var(--uxc-positive-subtle-bg);\n color: var(--uxc-positive-subtle-text);\n}\n.sprinkle-badge--subtle.sprinkle-badge--negative {\n background: var(--uxc-negative-subtle-bg);\n color: var(--uxc-negative-subtle-text);\n}\n.sprinkle-badge--subtle.sprinkle-badge--notice {\n background: var(--uxc-notice-subtle-bg);\n color: var(--uxc-notice-subtle-text);\n}\n.sprinkle-badge--subtle.sprinkle-badge--informative {\n background: var(--uxc-accent-subtle-bg);\n color: var(--uxc-accent-subtle-text);\n}\n.sprinkle-badge--subtle.sprinkle-badge--accent {\n background: var(--uxc-accent-subtle-bg);\n color: var(--uxc-accent-subtle-text);\n}\n\n.sprinkle-badge--yellow {\n background: var(--uxc-yellow-subtle-bg);\n color: var(--uxc-yellow-subtle-text);\n}\n.sprinkle-badge--purple {\n background: var(--uxc-purple-subtle-bg);\n color: var(--uxc-purple-subtle-text);\n}\n.sprinkle-badge--cyan {\n background: var(--uxc-cyan-subtle-bg);\n color: var(--uxc-cyan-subtle-text);\n}\n.sprinkle-badge--magenta {\n background: var(--uxc-magenta-subtle-bg);\n color: var(--uxc-magenta-subtle-text);\n}\n.sprinkle-badge--indigo {\n background: var(--uxc-indigo-subtle-bg);\n color: var(--uxc-indigo-subtle-text);\n}\n.sprinkle-badge--gray {\n background: var(--uxc-gray-subtle-bg);\n color: var(--uxc-gray-subtle-text);\n}\n\n.sprinkle-badge--outline {\n background: transparent;\n color: var(--s2-content-secondary);\n box-shadow: inset 0 0 0 1px var(--s2-border-default);\n}\n.sprinkle-badge--outline.sprinkle-badge--positive {\n color: var(--s2-positive);\n box-shadow: inset 0 0 0 1px var(--s2-positive);\n}\n.sprinkle-badge--outline.sprinkle-badge--negative {\n color: var(--s2-negative);\n box-shadow: inset 0 0 0 1px var(--s2-negative);\n}\n.sprinkle-badge--outline.sprinkle-badge--notice {\n color: var(--s2-notice);\n box-shadow: inset 0 0 0 1px var(--s2-notice);\n}\n.sprinkle-badge--outline.sprinkle-badge--informative {\n color: var(--s2-informative);\n box-shadow: inset 0 0 0 1px var(--s2-informative);\n}\n\n.sprinkle-chip {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 6px 12px;\n border: 1px solid var(--s2-gray-200);\n border-radius: var(--s2-radius-pill);\n font-size: var(--s2-font-size-75);\n font-weight: 500;\n color: var(--s2-gray-800);\n background: var(--s2-bg-layer-1);\n cursor: default;\n transition: background var(--s2-transition-default);\n}\n.sprinkle-chip:hover {\n background: var(--s2-gray-100);\n}\n.sprinkle-chip svg {\n width: 14px;\n height: 14px;\n flex-shrink: 0;\n}\n\n.sprinkle-status-light {\n display: inline-flex;\n align-items: center;\n gap: var(--s2-spacing-75);\n font-size: var(--s2-font-size-75);\n color: var(--s2-content-default);\n}\n.sprinkle-status-light::before {\n content: "";\n width: 8px;\n height: 8px;\n border-radius: 50%;\n background: var(--s2-content-tertiary);\n flex-shrink: 0;\n}\n.sprinkle-status-light--positive::before {\n background: var(--s2-positive);\n}\n.sprinkle-status-light--negative::before {\n background: var(--s2-negative);\n}\n.sprinkle-status-light--notice::before {\n background: var(--s2-notice);\n}\n.sprinkle-status-light--informative::before {\n background: var(--s2-informative);\n}\n\n.sprinkle-status-light--m {\n font-size: var(--s2-font-size-100);\n color: var(--s2-gray-600);\n}\n.sprinkle-status-light--m::before {\n width: 10px;\n height: 10px;\n}\n\n.sprinkle-card {\n background: var(--s2-gray-25);\n border: 1px solid var(--s2-gray-300);\n border-radius: var(--s2-radius-xl);\n padding: var(--s2-spacing-400);\n box-shadow: var(--s2-shadow-container);\n transition: box-shadow var(--s2-transition-default);\n}\n.sprinkle-card:hover {\n box-shadow: var(--s2-shadow-elevated);\n}\n\n.sprinkle-stat-card {\n background: var(--s2-gray-25);\n border: 1px solid var(--s2-gray-300);\n border-radius: var(--s2-radius-xl);\n padding: var(--s2-spacing-200) var(--s2-spacing-300);\n text-align: center;\n box-shadow: var(--s2-shadow-container);\n transition: box-shadow var(--s2-transition-default);\n}\n.sprinkle-stat-card:hover {\n box-shadow: var(--s2-shadow-elevated);\n}\n.sprinkle-stat-card .value {\n font-size: var(--s2-font-size-500);\n font-weight: 700;\n color: var(--s2-content-default);\n line-height: 1.2;\n}\n.sprinkle-stat-card .label {\n font-size: var(--s2-font-size-75);\n font-weight: 500;\n color: var(--s2-gray-600);\n margin-top: var(--s2-spacing-50);\n}\n\n.sprinkle-action-card {\n display: flex;\n flex-direction: column;\n background: var(--s2-gray-25);\n border: 1px solid var(--s2-gray-200);\n border-radius: var(--s2-radius-xl);\n overflow: hidden;\n box-shadow: var(--s2-shadow-container);\n}\n.sprinkle-action-card__header {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 16px 24px;\n font-weight: 700;\n font-size: 16px;\n line-height: 1.3;\n color: var(--s2-gray-900);\n}\n.sprinkle-action-card__header .sprinkle-badge {\n margin-left: auto;\n}\n.sprinkle-action-card__title-group {\n display: flex;\n flex-direction: column;\n gap: 2px;\n min-width: 0;\n}\n\n.sprinkle-action-card__icon {\n width: 40px;\n height: 40px;\n min-width: 40px;\n border-radius: 8px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 18px;\n flex-shrink: 0;\n}\n.sprinkle-action-card__icon--yellow {\n background: var(--uxc-yellow-subtle-bg);\n color: var(--uxc-yellow-subtle-text);\n}\n.sprinkle-action-card__icon--blue {\n background: var(--uxc-accent-subtle-bg);\n color: var(--uxc-accent-subtle-text);\n}\n.sprinkle-action-card__icon--green {\n background: var(--uxc-positive-subtle-bg);\n color: var(--uxc-positive-subtle-text);\n}\n.sprinkle-action-card__icon--indigo {\n background: var(--uxc-indigo-subtle-bg);\n color: var(--uxc-indigo-subtle-text);\n}\n\n.sprinkle-action-card__meta {\n font-size: 12px;\n font-weight: 400;\n color: var(--s2-gray-600);\n}\n\n.sprinkle-action-card__header-actions {\n display: flex;\n align-items: center;\n gap: 12px;\n margin-left: auto;\n font-size: 12px;\n font-weight: 500;\n color: var(--s2-gray-800);\n}\n.sprinkle-action-card__header-actions a {\n display: flex;\n align-items: center;\n gap: 4px;\n color: var(--s2-gray-800);\n text-decoration: none;\n}\n.sprinkle-action-card__body {\n padding: 0 24px 16px;\n font-size: 14px;\n color: var(--s2-gray-700);\n line-height: 1.5;\n}\n.sprinkle-action-card__actions {\n display: flex;\n gap: 8px;\n justify-content: flex-end;\n padding: 12px 24px;\n border-top: 1px solid var(--s2-gray-200);\n}\n\n.sprinkle-list-item {\n display: flex;\n align-items: center;\n gap: 16px;\n padding: 16px 24px;\n border-top: 1px solid var(--s2-gray-100);\n min-height: 56px;\n}\n.sprinkle-list-item__icon {\n width: 40px;\n height: 40px;\n min-width: 40px;\n border-radius: 8px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 16px;\n flex-shrink: 0;\n background: var(--s2-gray-75);\n}\n.sprinkle-list-item__content {\n flex: 1;\n min-width: 0;\n}\n.sprinkle-list-item__title {\n font-size: 14px;\n font-weight: 700;\n color: var(--s2-gray-900);\n line-height: 1.3;\n display: flex;\n align-items: center;\n gap: 6px;\n}\n.sprinkle-list-item__subtitle {\n font-size: 14px;\n font-weight: 400;\n color: var(--s2-gray-600);\n line-height: 1.5;\n margin-top: 2px;\n}\n.sprinkle-list-item__end {\n display: flex;\n align-items: center;\n gap: 8px;\n flex-shrink: 0;\n}\n\n.sprinkle-table {\n width: 100%;\n border-collapse: collapse;\n font-size: 14px;\n border: 1px solid var(--s2-gray-100);\n border-radius: var(--s2-radius-default);\n overflow: hidden;\n}\n.sprinkle-table th {\n text-align: left;\n padding: 7px 16px;\n background: transparent;\n border-bottom: 1px solid var(--s2-gray-100);\n color: var(--s2-gray-700);\n font-weight: 700;\n font-size: 14px;\n line-height: 1.3;\n height: 32px;\n box-sizing: border-box;\n}\n.sprinkle-table td {\n padding: 12px 16px;\n border-bottom: 1px solid var(--s2-gray-100);\n color: var(--s2-content-default);\n font-size: 14px;\n line-height: 1.5;\n box-sizing: border-box;\n}\n.sprinkle-table tr:last-child td {\n border-bottom: none;\n}\n.sprinkle-table tr:hover td {\n background: var(--s2-gray-50);\n}\n\n.sprinkle-task-group {\n background: var(--s2-gray-50);\n border-radius: var(--s2-radius-default);\n padding: 16px;\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n.sprinkle-task-group__header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n}\n.sprinkle-task-group__title {\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 16px;\n font-weight: 700;\n color: var(--s2-gray-1000);\n}\n.sprinkle-task-group__title svg {\n width: 20px;\n height: 20px;\n flex-shrink: 0;\n}\n.sprinkle-task-group__meta {\n display: flex;\n align-items: center;\n gap: 16px;\n font-size: 12px;\n color: var(--s2-gray-600);\n}\n.sprinkle-task-item {\n display: flex;\n align-items: center;\n gap: 8px;\n height: 24px;\n padding-left: 4px;\n font-size: 14px;\n line-height: 18px;\n}\n.sprinkle-task-item--done {\n color: var(--s2-gray-600);\n}\n.sprinkle-task-item--pending {\n color: var(--s2-gray-800);\n}\n.sprinkle-task-item__check {\n width: 16px;\n height: 16px;\n flex-shrink: 0;\n border-radius: 50%;\n border: 1.5px solid var(--s2-gray-400);\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.sprinkle-task-item--done .sprinkle-task-item__check {\n background: var(--s2-positive);\n border-color: var(--s2-positive);\n}\n.sprinkle-task-item--done .sprinkle-task-item__check::after {\n content: "";\n width: 8px;\n height: 5px;\n border-left: 1.5px solid white;\n border-bottom: 1.5px solid white;\n transform: rotate(-45deg) translateY(-1px);\n}\n\n.sprinkle-progress-bar {\n display: flex;\n flex-direction: column;\n gap: var(--s2-spacing-75);\n --_bar-color: var(--s2-accent);\n}\n.sprinkle-progress-bar--positive {\n --_bar-color: var(--s2-positive);\n}\n.sprinkle-progress-bar--negative {\n --_bar-color: var(--s2-negative);\n}\n.sprinkle-progress-bar--notice {\n --_bar-color: var(--s2-notice);\n}\n.sprinkle-progress-bar--informative {\n --_bar-color: var(--s2-informative);\n}\n.sprinkle-progress-bar__header {\n display: flex;\n justify-content: space-between;\n align-items: baseline;\n font-size: var(--s2-font-size-75);\n color: var(--s2-content-default);\n}\n.sprinkle-progress-bar__header .label {\n font-weight: 400;\n}\n.sprinkle-progress-bar__header .value {\n font-weight: 400;\n color: var(--s2-gray-600);\n}\n.sprinkle-progress-bar__track {\n height: 4px;\n border-radius: var(--s2-radius-pill);\n background: var(--s2-gray-200);\n overflow: hidden;\n position: relative;\n}\n.sprinkle-progress-bar__track .fill {\n height: 100%;\n border-radius: var(--s2-radius-pill);\n background: var(--fill-color, var(--_bar-color, var(--s2-accent)));\n transition: width 300ms ease;\n}\n\n.sprinkle-progress-bar__track::after {\n content: "";\n position: absolute;\n inset: 0;\n right: auto;\n width: var(--progress, var(--value, 0%));\n border-radius: var(--s2-radius-pill);\n background: var(--fill-color, var(--_bar-color, var(--s2-accent)));\n transition: width 300ms ease;\n}\n.sprinkle-progress-bar__track:has(> .fill)::after {\n display: none;\n}\n\n.sprinkle-progress-bar:not(:has(.sprinkle-progress-bar__track)) {\n height: 4px;\n width: 100%;\n border-radius: var(--s2-radius-pill);\n background: var(--s2-gray-200);\n overflow: hidden;\n flex-direction: row;\n position: relative;\n}\n.sprinkle-progress-bar:not(:has(.sprinkle-progress-bar__track)) > .fill {\n height: 100%;\n border-radius: var(--s2-radius-pill);\n background: var(--fill-color, var(--_bar-color, var(--s2-accent)));\n transition: width 300ms ease;\n}\n.sprinkle-progress-bar:not(:has(.sprinkle-progress-bar__track))::after {\n content: "";\n position: absolute;\n inset: 0;\n right: auto;\n width: var(--progress, var(--value, 0%));\n border-radius: var(--s2-radius-pill);\n background: var(--fill-color, var(--_bar-color, var(--s2-accent)));\n transition: width 300ms ease;\n}\n.sprinkle-progress-bar:not(:has(.sprinkle-progress-bar__track)):has(> .fill)::after {\n display: none;\n}\n\n.sprinkle-meter {\n display: flex;\n flex-direction: column;\n gap: var(--s2-spacing-75);\n --_meter-color: var(--s2-informative);\n}\n.sprinkle-meter--positive {\n --_meter-color: var(--s2-positive);\n}\n.sprinkle-meter--notice {\n --_meter-color: var(--s2-notice);\n}\n.sprinkle-meter--negative {\n --_meter-color: var(--s2-negative);\n}\n.sprinkle-meter__header {\n display: flex;\n justify-content: space-between;\n align-items: baseline;\n font-size: var(--s2-font-size-75);\n color: var(--s2-content-default);\n}\n.sprinkle-meter__header .label {\n font-weight: 400;\n}\n.sprinkle-meter__header .value {\n font-weight: 400;\n color: var(--s2-gray-600);\n}\n.sprinkle-meter__track {\n height: 4px;\n border-radius: var(--s2-radius-pill);\n background: var(--s2-gray-200);\n overflow: hidden;\n position: relative;\n}\n.sprinkle-meter__track .fill {\n height: 100%;\n border-radius: var(--s2-radius-pill);\n background: var(--fill-color, var(--_meter-color));\n transition: width 300ms ease;\n}\n.sprinkle-meter__track::after {\n content: "";\n position: absolute;\n inset: 0;\n right: auto;\n width: var(--progress, var(--value, 0%));\n border-radius: var(--s2-radius-pill);\n background: var(--fill-color, var(--_meter-color));\n transition: width 300ms ease;\n}\n.sprinkle-meter__track:has(> .fill)::after {\n display: none;\n}\n\n.sprinkle-meter:not(:has(.sprinkle-meter__track)) {\n height: 4px;\n width: 100%;\n border-radius: var(--s2-radius-pill);\n background: var(--s2-gray-200);\n overflow: hidden;\n flex-direction: row;\n position: relative;\n}\n.sprinkle-meter:not(:has(.sprinkle-meter__track)) > .fill {\n height: 100%;\n border-radius: var(--s2-radius-pill);\n background: var(--fill-color, var(--_meter-color));\n transition: width 300ms ease;\n}\n.sprinkle-meter:not(:has(.sprinkle-meter__track))::after {\n content: "";\n position: absolute;\n inset: 0;\n right: auto;\n width: var(--progress, var(--value, 0%));\n border-radius: var(--s2-radius-pill);\n background: var(--fill-color, var(--_meter-color));\n transition: width 300ms ease;\n}\n.sprinkle-meter:not(:has(.sprinkle-meter__track)):has(> .fill)::after {\n display: none;\n}\n\n.sprinkle-kv-list {\n list-style: none;\n padding: 0;\n margin: 0;\n}\n.sprinkle-kv-list li {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: var(--s2-spacing-100) 0;\n border-bottom: 1px solid var(--s2-border-subtle);\n font-size: var(--s2-font-size-75);\n}\n.sprinkle-kv-list li:last-child {\n border-bottom: none;\n}\n.sprinkle-kv-list .key {\n color: var(--s2-gray-600);\n font-weight: 400;\n}\n.sprinkle-kv-list .value {\n color: var(--s2-content-default);\n font-weight: 700;\n}\ndl.sprinkle-kv-list {\n display: grid;\n grid-template-columns: auto 1fr;\n gap: 0;\n font-size: var(--s2-font-size-75);\n}\ndl.sprinkle-kv-list dt,\ndl.sprinkle-kv-list dd {\n padding: var(--s2-spacing-100) 0;\n border-bottom: 1px solid var(--s2-border-subtle);\n margin: 0;\n}\ndl.sprinkle-kv-list dt {\n color: var(--s2-gray-600);\n font-weight: 400;\n padding-right: var(--s2-spacing-300);\n}\ndl.sprinkle-kv-list dd {\n color: var(--s2-content-default);\n font-weight: 700;\n text-align: right;\n}\ndl.sprinkle-kv-list dt:last-of-type,\ndl.sprinkle-kv-list dd:last-of-type {\n border-bottom: none;\n}\n\n.sprinkle-text-field {\n width: 100%;\n padding: 7px 12px;\n font-size: var(--s2-font-size-100);\n font-family: var(--s2-font-family);\n color: var(--s2-content-default);\n background: var(--s2-bg-layer-1);\n border: 1px solid var(--s2-gray-200);\n border-radius: var(--s2-radius-default);\n outline: none;\n transition: border-color var(--s2-transition-default);\n box-sizing: border-box;\n}\n.sprinkle-text-field::placeholder {\n color: var(--s2-content-secondary);\n}\n.sprinkle-text-field:hover {\n border-color: var(--s2-gray-700);\n}\n.sprinkle-text-field:focus {\n border-color: var(--s2-accent);\n box-shadow: 0 0 0 1px var(--s2-accent);\n}\n\n.sprinkle-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));\n gap: var(--s2-spacing-200);\n}\n.sprinkle-stack {\n display: flex;\n flex-direction: column;\n gap: var(--s2-spacing-200);\n}\n.sprinkle-row {\n display: flex;\n align-items: center;\n gap: var(--s2-spacing-200);\n}\n\n.sprinkle-divider {\n border: none;\n border-top: 1px solid var(--s2-border-subtle);\n margin: var(--s2-spacing-200) 0;\n}\n.sprinkle-divider--medium {\n border-top-width: 2px;\n border-top-color: var(--s2-border-default);\n margin: var(--s2-spacing-300) 0;\n}\n\n.sprinkle-empty-state {\n text-align: center;\n padding: var(--s2-spacing-500) var(--s2-spacing-300);\n color: var(--s2-content-tertiary);\n font-size: var(--s2-font-size-100);\n}\n\n.sprinkle-toolbar {\n display: flex;\n align-items: center;\n gap: var(--s2-spacing-100);\n padding: var(--s2-spacing-100) var(--s2-spacing-200);\n border-bottom: 1px solid var(--s2-gray-200);\n background: var(--s2-gray-50);\n min-height: 40px;\n flex-shrink: 0;\n}\n.sprinkle-toolbar__start {\n display: flex;\n align-items: center;\n gap: var(--s2-spacing-100);\n}\n.sprinkle-toolbar__center {\n display: flex;\n align-items: center;\n gap: var(--s2-spacing-100);\n flex: 1;\n justify-content: center;\n}\n.sprinkle-toolbar__end {\n display: flex;\n align-items: center;\n gap: var(--s2-spacing-100);\n margin-left: auto;\n}\n\n.sprinkle-tabs {\n display: flex;\n gap: 0;\n border-bottom: 1px solid var(--s2-gray-200);\n background: var(--s2-gray-50);\n flex-shrink: 0;\n overflow-x: auto;\n}\n.sprinkle-tabs__tab {\n padding: var(--s2-spacing-100) var(--s2-spacing-200);\n font-size: var(--s2-font-size-100);\n font-weight: 500;\n color: var(--s2-gray-600);\n background: none;\n border: none;\n border-bottom: 2px solid transparent;\n cursor: default;\n white-space: nowrap;\n transition:\n color var(--s2-transition-default),\n border-color var(--s2-transition-default);\n font-family: var(--s2-font-family);\n}\n.sprinkle-tabs__tab:hover {\n color: var(--s2-gray-800);\n}\n.sprinkle-tabs__tab--active {\n color: var(--s2-gray-900);\n border-bottom-color: var(--s2-gray-900);\n font-weight: 700;\n}\n.sprinkle-tabs__panel {\n display: none;\n flex: 1;\n min-height: 0;\n overflow-y: auto;\n}\n.sprinkle-tabs__panel--active {\n display: flex;\n flex-direction: column;\n}\n\n.sprinkle-sidebar {\n display: flex;\n gap: 0;\n min-height: 0;\n flex: 1;\n}\n.sprinkle-sidebar__nav {\n width: 240px;\n min-width: 240px;\n overflow-y: auto;\n border-right: 1px solid var(--s2-gray-200);\n background: var(--s2-gray-50);\n padding: var(--s2-spacing-200) 0;\n}\n.sprinkle-sidebar__nav-item {\n display: flex;\n align-items: center;\n gap: var(--s2-spacing-100);\n padding: var(--s2-spacing-100) var(--s2-spacing-200);\n font-size: var(--s2-font-size-100);\n color: var(--s2-gray-700);\n cursor: default;\n border-radius: 0;\n transition: background var(--s2-transition-default);\n}\n.sprinkle-sidebar__nav-item:hover {\n background: var(--s2-gray-100);\n}\n.sprinkle-sidebar__nav-item--active {\n background: var(--s2-gray-800);\n color: var(--s2-gray-25);\n font-weight: 600;\n}\n.sprinkle-sidebar__nav-label {\n padding: var(--s2-spacing-200) var(--s2-spacing-200) var(--s2-spacing-50);\n font-size: var(--s2-font-size-50);\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 0.04em;\n color: var(--s2-gray-600);\n}\n.sprinkle-sidebar__main {\n flex: 1;\n min-width: 0;\n overflow-y: auto;\n padding: var(--s2-spacing-200);\n}\n\n.sprinkle-dialog {\n position: fixed;\n inset: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 100;\n}\n.sprinkle-dialog[hidden] {\n display: none;\n}\n.sprinkle-dialog__backdrop {\n position: absolute;\n inset: 0;\n background: rgba(0, 0, 0, 0.4);\n backdrop-filter: blur(2px);\n}\n.sprinkle-dialog__content {\n position: relative;\n background: var(--s2-gray-25);\n border-radius: var(--s2-radius-xl);\n box-shadow: var(--s2-shadow-elevated);\n padding: var(--s2-spacing-400);\n max-width: min(560px, calc(100% - 32px));\n max-height: calc(100% - 64px);\n overflow-y: auto;\n min-width: 280px;\n}\n.sprinkle-dialog__header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: var(--s2-spacing-300);\n}\n.sprinkle-dialog__title {\n font-size: var(--s2-font-size-200);\n font-weight: 700;\n color: var(--s2-content-default);\n}\n.sprinkle-dialog__close {\n width: 28px;\n height: 28px;\n border-radius: var(--s2-radius-pill);\n border: none;\n background: none;\n color: var(--s2-gray-600);\n cursor: default;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 18px;\n transition: background var(--s2-transition-default);\n}\n.sprinkle-dialog__close:hover {\n background: var(--s2-gray-100);\n}\n.sprinkle-dialog__footer {\n display: flex;\n justify-content: flex-end;\n gap: var(--s2-spacing-100);\n margin-top: var(--s2-spacing-300);\n}\n\n.sprinkle-collapsible__header {\n display: flex;\n align-items: center;\n gap: var(--s2-spacing-100);\n padding: var(--s2-spacing-100) var(--s2-spacing-200);\n cursor: default;\n font-size: var(--s2-font-size-100);\n font-weight: 600;\n color: var(--s2-content-default);\n background: none;\n border: none;\n width: 100%;\n text-align: left;\n border-radius: var(--s2-radius-default);\n transition: background var(--s2-transition-default);\n font-family: var(--s2-font-family);\n}\n.sprinkle-collapsible__header:hover {\n background: var(--s2-gray-100);\n}\n.sprinkle-collapsible__chevron {\n display: inline-block;\n width: 16px;\n height: 16px;\n transition: transform 200ms ease;\n flex-shrink: 0;\n}\n.sprinkle-collapsible__chevron::before {\n content: "\\25B6";\n font-size: 10px;\n color: var(--s2-gray-600);\n}\n.sprinkle-collapsible--open .sprinkle-collapsible__chevron {\n transform: rotate(90deg);\n}\n.sprinkle-collapsible__body {\n display: none;\n padding: var(--s2-spacing-100) var(--s2-spacing-200) var(--s2-spacing-200)\n calc(var(--s2-spacing-200) + 16px + var(--s2-spacing-100));\n}\n.sprinkle-collapsible--open .sprinkle-collapsible__body {\n display: block;\n}\n\n.sprinkle-split {\n display: flex;\n gap: 0;\n min-height: 0;\n flex: 1;\n}\n.sprinkle-split > * {\n flex: 1;\n min-width: 0;\n overflow-y: auto;\n}\n.sprinkle-split > :not(:last-child) {\n border-right: 1px solid var(--s2-border-default);\n}\n.sprinkle-split--vertical {\n flex-direction: column;\n}\n.sprinkle-split--vertical > :not(:last-child) {\n border-right: none;\n border-bottom: 1px solid var(--s2-border-default);\n}\n\n.sprinkle-canvas {\n position: relative;\n width: 100%;\n overflow: hidden;\n border-radius: var(--s2-radius-l);\n background: var(--s2-bg-layer-1);\n}\n.sprinkle-canvas--16x9 {\n aspect-ratio: 16 / 9;\n}\n.sprinkle-canvas--4x3 {\n aspect-ratio: 4 / 3;\n}\n.sprinkle-canvas--1x1 {\n aspect-ratio: 1 / 1;\n}\n.sprinkle-canvas svg,\n.sprinkle-canvas canvas {\n display: block;\n width: 100%;\n height: 100%;\n}\n\n.sprinkle-density-compact .sprinkle-content {\n padding: var(--s2-spacing-100);\n}\n.sprinkle-density-compact .sprinkle-heading {\n font-size: var(--s2-font-size-100);\n margin-bottom: var(--s2-spacing-50);\n}\n.sprinkle-density-compact .sprinkle-heading--m {\n font-size: 13px;\n}\n.sprinkle-density-compact .sprinkle-body {\n font-size: var(--s2-font-size-75);\n line-height: 1.4;\n}\n.sprinkle-density-compact .sprinkle-detail {\n font-size: var(--s2-font-size-50);\n}\n.sprinkle-density-compact .sprinkle-table th {\n padding: 5px 12px;\n font-size: var(--s2-font-size-50);\n height: 28px;\n}\n.sprinkle-density-compact .sprinkle-table td {\n padding: 6px 12px;\n font-size: var(--s2-font-size-75);\n}\n.sprinkle-density-compact .sprinkle-btn {\n height: 26px;\n font-size: var(--s2-font-size-75);\n padding: 0 10px;\n}\n.sprinkle-density-compact .sprinkle-badge {\n font-size: 10px;\n padding: 2px 6px;\n}\n.sprinkle-density-compact .sprinkle-card {\n padding: var(--s2-spacing-200);\n}\n.sprinkle-density-compact .sprinkle-list-item {\n padding: 8px 16px;\n min-height: 40px;\n gap: 10px;\n}\n.sprinkle-density-compact .sprinkle-list-item__icon {\n width: 28px;\n height: 28px;\n min-width: 28px;\n font-size: 13px;\n}\n.sprinkle-density-compact .sprinkle-list-item__title {\n font-size: var(--s2-font-size-75);\n}\n.sprinkle-density-compact .sprinkle-list-item__subtitle {\n font-size: 11px;\n}\n.sprinkle-density-compact .sprinkle-sidebar__nav-item {\n padding: 6px var(--s2-spacing-200);\n font-size: var(--s2-font-size-75);\n}\n.sprinkle-density-compact .sprinkle-text-field {\n height: 28px;\n font-size: var(--s2-font-size-75);\n padding: 4px 8px;\n}\n.sprinkle-density-compact .sprinkle-tabs__tab {\n padding: 6px var(--s2-spacing-200);\n font-size: var(--s2-font-size-75);\n}\n.sprinkle-density-compact .sprinkle-kv-list li {\n padding: 6px 0;\n font-size: var(--s2-font-size-50);\n}\n.sprinkle-density-compact .sprinkle-chip {\n padding: 3px 8px;\n font-size: 11px;\n}\n\n.sprinkle-density-spacious .sprinkle-content {\n padding: var(--s2-spacing-400);\n}\n.sprinkle-density-spacious .sprinkle-heading {\n font-size: var(--s2-font-size-500);\n margin-bottom: var(--s2-spacing-200);\n}\n.sprinkle-density-spacious .sprinkle-heading--m {\n font-size: var(--s2-font-size-300);\n}\n.sprinkle-density-spacious .sprinkle-body {\n font-size: 15px;\n line-height: 1.65;\n}\n.sprinkle-density-spacious .sprinkle-card {\n padding: var(--s2-spacing-500);\n}\n.sprinkle-density-spacious .sprinkle-btn {\n height: 36px;\n padding: 0 20px;\n}\n.sprinkle-density-spacious .sprinkle-action-card__body {\n padding: 0 32px 24px;\n font-size: 15px;\n}\n\n.sprinkle-panel {\n container-type: inline-size;\n}\n\n@container (max-width: 400px) {\n .sprinkle-sidebar {\n flex-direction: column;\n }\n .sprinkle-sidebar__nav {\n width: 100%;\n min-width: 0;\n max-height: 200px;\n border-right: none;\n border-bottom: 1px solid var(--s2-border-default);\n }\n .sprinkle-grid {\n grid-template-columns: 1fr;\n }\n .sprinkle-split:not(.sprinkle-split--vertical) {\n flex-direction: column;\n }\n .sprinkle-split:not(.sprinkle-split--vertical) > :not(:last-child) {\n border-right: none;\n border-bottom: 1px solid var(--s2-border-default);\n }\n .sprinkle-toolbar {\n flex-wrap: wrap;\n }\n}\n\n@container (min-width: 600px) {\n .sprinkle-sidebar__nav {\n width: 240px;\n min-width: 240px;\n }\n .sprinkle-grid {\n grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));\n }\n}\n';
|
|
13010
|
+
var sprinkle_theme_default = ':root {\n --s2-gray-25: #1a1a1a;\n --s2-gray-50: #1e1e1e;\n --s2-gray-75: #252525;\n --s2-gray-100: #2c2c2c;\n --s2-gray-200: #3a3a3a;\n --s2-gray-300: #4a4a4a;\n --s2-gray-400: #5a5a5a;\n --s2-gray-500: #6e6e6e;\n --s2-gray-600: #8a8a8a;\n --s2-gray-700: #a1a1a1;\n --s2-gray-800: #cfcfcf;\n --s2-gray-900: #e8e8e8;\n --s2-gray-1000: #ffffff;\n\n --s2-bg-base: var(--s2-gray-25);\n --s2-bg-layer-1: var(--s2-gray-50);\n --s2-bg-layer-2: var(--s2-gray-75);\n --s2-bg-elevated: var(--s2-gray-100);\n --s2-bg-sunken: #141414;\n\n --s2-content-default: var(--s2-gray-900);\n --s2-content-secondary: var(--s2-gray-700);\n --s2-content-tertiary: var(--s2-gray-600);\n --s2-content-disabled: var(--s2-gray-400);\n\n --slicc-cone: #ef7000;\n --slicc-scoop-blue: #3562ff;\n --slicc-scoop-purple: #a962e8;\n --slicc-scoop-teal: #2db9be;\n --slicc-accent: #15d675;\n\n --s2-accent: var(--slicc-scoop-blue);\n --s2-accent-hover: #4a75ff;\n --s2-accent-down: #2a52e0;\n\n --s2-negative: #e34850;\n --s2-positive: #2d9d78;\n --s2-informative: var(--slicc-scoop-blue);\n --s2-notice: #e68619;\n\n --s2-border-default: var(--s2-gray-300);\n --s2-border-subtle: var(--s2-gray-200);\n --s2-border-focus: var(--s2-accent);\n\n --s2-font-family:\n "adobe-clean-spectrum-vf", "Adobe Clean Spectrum VF", "Adobe Clean", "Source Sans Pro",\n -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;\n --s2-font-mono: "Source Code Pro", "JetBrains Mono", "Fira Code", "Cascadia Code", monospace;\n\n --s2-font-size-50: 11px;\n --s2-font-size-75: 12px;\n --s2-font-size-100: 14px;\n --s2-font-size-200: 16px;\n --s2-font-size-300: 18px;\n --s2-font-size-400: 20px;\n --s2-font-size-500: 22px;\n --s2-font-size-600: 25px;\n\n --s2-line-height-50: 14px;\n --s2-line-height-75: 16px;\n --s2-line-height-100: 18px;\n --s2-line-height-200: 20px;\n --s2-line-height-300: 22px;\n\n --s2-spacing-50: 4px;\n --s2-spacing-75: 6px;\n --s2-spacing-100: 8px;\n --s2-spacing-200: 12px;\n --s2-spacing-300: 16px;\n --s2-spacing-400: 24px;\n --s2-spacing-500: 32px;\n --s2-spacing-600: 40px;\n\n --s2-radius-s: 4px;\n --s2-radius-default: 8px;\n --s2-radius-l: 12px;\n --s2-radius-xl: 16px;\n --s2-radius-pill: 9999px;\n\n --s2-shadow-elevated: 0 4px 16px rgba(0, 0, 0, 0.4), 0 1px 4px rgba(0, 0, 0, 0.3);\n --s2-shadow-container: 0 1px 4px rgba(0, 0, 0, 0.2);\n\n --s2-transition-default: 130ms ease;\n\n --s2-header-height: 56px;\n\n --uxc-yellow-subtle-bg: #2e2719;\n --uxc-yellow-subtle-text: #df9b20;\n --uxc-purple-subtle-bg: #24192e;\n --uxc-purple-subtle-text: #b170e9;\n --uxc-cyan-subtle-bg: #19272e;\n --uxc-cyan-subtle-text: #209cdf;\n --uxc-magenta-subtle-bg: #2e1920;\n --uxc-magenta-subtle-text: #e5618e;\n --uxc-indigo-subtle-bg: #1f192e;\n --uxc-indigo-subtle-text: #977ae9;\n --uxc-gray-subtle-bg: #292929;\n --uxc-gray-subtle-text: #cfcfcf;\n --uxc-positive-subtle-bg: #192e25;\n --uxc-positive-subtle-text: #20df8a;\n --uxc-notice-subtle-bg: #2e2219;\n --uxc-notice-subtle-text: #e07829;\n --uxc-negative-subtle-bg: #2e1920;\n --uxc-negative-subtle-text: #e5618e;\n --uxc-accent-subtle-bg: #191d2e;\n --uxc-accent-subtle-text: #6d87ea;\n --uxc-neutral-subtle-bg: #252525;\n\n --uxc-nav-rail-width: 58px;\n --uxc-thread-header-height: 56px;\n --uxc-content-max-width: 800px;\n\n --slicc-warm-bg: color-mix(in oklch, var(--s2-gray-50) 94%, var(--slicc-cone) 6%);\n --slicc-brand-gradient: linear-gradient(\n 90deg,\n var(--slicc-cone) 0%,\n var(--slicc-scoop-blue) 50%,\n var(--slicc-scoop-purple) 100%\n );\n}\n\n:root.theme-light,\n:root:where(:has(body[data-theme="light"])) {\n --s2-gray-25: #ffffff;\n --s2-gray-50: #f8f8f8;\n --s2-gray-75: #f3f3f3;\n --s2-gray-100: #e9e9e9;\n --s2-gray-200: #e1e1e1;\n --s2-gray-300: #dadada;\n --s2-gray-400: #c6c6c6;\n --s2-gray-500: #8f8f8f;\n --s2-gray-600: #717171;\n --s2-gray-700: #505050;\n --s2-gray-800: #292929;\n --s2-gray-900: #131313;\n --s2-gray-1000: #000000;\n\n --s2-bg-sunken: #f3f3f3;\n\n --s2-accent: #3b63fb;\n --s2-accent-hover: #2b54db;\n --s2-accent-down: #1e44c4;\n\n --s2-negative: #d92361;\n --s2-positive: #05834e;\n --s2-notice: #d45b00;\n\n --uxc-yellow-subtle-bg: #fff197;\n --uxc-yellow-subtle-text: #8e5b00;\n --uxc-purple-subtle-bg: #f4ebfc;\n --uxc-purple-subtle-text: #8d30de;\n --uxc-cyan-subtle-bg: #d9f4fd;\n --uxc-cyan-subtle-text: #0a6ba0;\n --uxc-magenta-subtle-bg: #ffe8f0;\n --uxc-magenta-subtle-text: #c01f56;\n --uxc-indigo-subtle-bg: #ebeeff;\n --uxc-indigo-subtle-text: #5424db;\n --uxc-gray-subtle-bg: #efefef;\n --uxc-gray-subtle-text: #292929;\n --uxc-positive-subtle-bg: #d7f7e1;\n --uxc-positive-subtle-text: #067443;\n --uxc-notice-subtle-bg: #ffeccf;\n --uxc-notice-subtle-text: #a74800;\n --uxc-negative-subtle-bg: #ffe8f0;\n --uxc-negative-subtle-text: #c01f56;\n --uxc-accent-subtle-bg: #e5f0fe;\n --uxc-accent-subtle-text: #2350fb;\n --uxc-neutral-subtle-bg: #f3f3f3;\n\n --s2-shadow-elevated:\n 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04), 0 0px 2px rgba(0, 0, 0, 0.12);\n --s2-shadow-container:\n 0 2px 8px rgba(0, 0, 0, 0.08), 0 1px 4px rgba(0, 0, 0, 0.04), 0 0px 1px rgba(0, 0, 0, 0.08);\n}\n\n.theme-light .tok-keyword,\n:root:where(:has(body[data-theme="light"])) .tok-keyword {\n color: #8839ef;\n}\n.theme-light .tok-string,\n:root:where(:has(body[data-theme="light"])) .tok-string {\n color: #40a02b;\n}\n.theme-light .tok-number,\n:root:where(:has(body[data-theme="light"])) .tok-number {\n color: #d05d1a;\n}\n.theme-light .tok-comment,\n:root:where(:has(body[data-theme="light"])) .tok-comment {\n color: var(--s2-gray-500);\n}\n.theme-light .tok-punct,\n:root:where(:has(body[data-theme="light"])) .tok-punct {\n color: #1e66f5;\n}\n.theme-light .tok-fn,\n:root:where(:has(body[data-theme="light"])) .tok-fn {\n color: #2b6cb0;\n}\n\n.theme-light .s2-tooltip,\n:root:where(:has(body[data-theme="light"])) .s2-tooltip {\n background: var(--s2-gray-900);\n color: var(--s2-gray-25);\n}\n\n.theme-light ::-webkit-scrollbar-thumb,\n:root:where(:has(body[data-theme="light"])) ::-webkit-scrollbar-thumb {\n background: var(--s2-gray-300);\n}\n.theme-light ::-webkit-scrollbar-thumb:hover,\n:root:where(:has(body[data-theme="light"])) ::-webkit-scrollbar-thumb:hover {\n background: var(--s2-gray-400);\n}\n\n.sprinkle-content {\n padding: var(--s2-spacing-200);\n}\n\n.sprinkle-heading {\n font-size: var(--s2-font-size-300);\n font-weight: 700;\n color: var(--s2-gray-900);\n margin: 0 0 var(--s2-spacing-100);\n line-height: 1.3;\n letter-spacing: 0;\n}\n.sprinkle-heading--m {\n font-size: var(--s2-font-size-200);\n}\n.sprinkle-heading--s {\n font-size: var(--s2-font-size-100);\n}\n.sprinkle-label {\n font-size: var(--s2-font-size-50);\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.06em;\n color: var(--s2-gray-600);\n line-height: 1.3;\n margin: 0;\n}\n.sprinkle-body {\n font-size: var(--s2-font-size-100);\n font-weight: 400;\n color: var(--s2-content-default);\n line-height: 1.5;\n}\n.sprinkle-detail {\n font-size: var(--s2-font-size-75);\n font-weight: 500;\n color: var(--s2-gray-600);\n line-height: 1.3;\n}\n\n.sprinkle-icon {\n display: inline-block;\n width: 16px;\n height: 16px;\n stroke-width: 2;\n vertical-align: middle;\n}\n.sprinkle-icon svg {\n width: 100%;\n height: 100%;\n display: block;\n}\n\n.sprinkle-icon--xs {\n width: 12px;\n height: 12px;\n}\n.sprinkle-icon--s {\n width: 14px;\n height: 14px;\n}\n.sprinkle-icon--m {\n width: 16px;\n height: 16px;\n}\n.sprinkle-icon--l {\n width: 20px;\n height: 20px;\n}\n.sprinkle-icon--xl {\n width: 24px;\n height: 24px;\n}\n\n.sprinkle-btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--s2-spacing-75);\n height: 32px;\n padding: 0 16px;\n border: 1px solid var(--s2-gray-200);\n border-radius: var(--s2-radius-xl);\n background: var(--s2-gray-50);\n color: var(--s2-gray-800);\n font-size: var(--s2-font-size-100);\n font-weight: 700;\n font-family: var(--s2-font-family);\n cursor: default;\n box-shadow: var(--s2-shadow-container);\n transition:\n background var(--s2-transition-default),\n border-color var(--s2-transition-default),\n transform var(--s2-transition-default);\n}\n.sprinkle-btn:hover {\n background: var(--s2-gray-100);\n}\n.sprinkle-btn:active {\n transform: scale(0.98);\n}\n.sprinkle-btn:focus-visible {\n outline: 2px solid var(--s2-border-focus);\n outline-offset: 2px;\n}\n.sprinkle-btn:disabled,\n.sprinkle-btn[disabled] {\n opacity: 0.4;\n pointer-events: none;\n}\n\n.sprinkle-btn--primary {\n background: var(--s2-accent);\n color: #fff;\n border-color: transparent;\n border-radius: var(--s2-radius-pill);\n box-shadow: none;\n}\n.sprinkle-btn--primary:hover {\n background: var(--s2-accent-hover);\n}\n.sprinkle-btn--primary:active {\n background: var(--s2-accent-down);\n transform: scale(0.98);\n}\n\n.sprinkle-btn--secondary {\n background: var(--s2-gray-50);\n border-color: var(--s2-gray-200);\n color: var(--s2-gray-800);\n}\n.sprinkle-btn--secondary:hover {\n background: var(--s2-gray-100);\n}\n\n.sprinkle-btn--negative {\n background: var(--s2-negative);\n color: var(--s2-gray-25);\n border-color: transparent;\n border-radius: var(--s2-radius-pill);\n box-shadow: none;\n}\n.sprinkle-btn--negative:hover {\n background: color-mix(in srgb, var(--s2-negative) 85%, #000);\n}\n\n.sprinkle-btn--quiet {\n background: transparent;\n border-color: transparent;\n box-shadow: none;\n color: var(--s2-gray-800);\n}\n.sprinkle-btn--quiet:hover {\n background: var(--s2-gray-100);\n}\n.sprinkle-btn-group {\n display: inline-flex;\n gap: var(--s2-spacing-100);\n}\n\n.sprinkle-badge {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n padding: 4px 8px;\n border-radius: 8px;\n font-size: 12px;\n font-weight: 700;\n line-height: 16px;\n white-space: nowrap;\n background: var(--s2-gray-800);\n color: var(--s2-gray-25);\n}\n\n.sprinkle-badge--positive {\n background: var(--s2-positive);\n color: var(--s2-gray-25);\n}\n.sprinkle-badge--negative {\n background: var(--s2-negative);\n color: var(--s2-gray-25);\n}\n.sprinkle-badge--notice {\n background: var(--s2-notice);\n color: var(--s2-gray-25);\n}\n.sprinkle-badge--informative {\n background: var(--s2-informative);\n color: #fff;\n}\n.sprinkle-badge--accent {\n background: var(--s2-accent);\n color: #fff;\n}\n\n.sprinkle-badge--subtle {\n background: var(--uxc-neutral-subtle-bg);\n color: var(--s2-gray-700);\n}\n.sprinkle-badge--subtle.sprinkle-badge--positive {\n background: var(--uxc-positive-subtle-bg);\n color: var(--uxc-positive-subtle-text);\n}\n.sprinkle-badge--subtle.sprinkle-badge--negative {\n background: var(--uxc-negative-subtle-bg);\n color: var(--uxc-negative-subtle-text);\n}\n.sprinkle-badge--subtle.sprinkle-badge--notice {\n background: var(--uxc-notice-subtle-bg);\n color: var(--uxc-notice-subtle-text);\n}\n.sprinkle-badge--subtle.sprinkle-badge--informative {\n background: var(--uxc-accent-subtle-bg);\n color: var(--uxc-accent-subtle-text);\n}\n.sprinkle-badge--subtle.sprinkle-badge--accent {\n background: var(--uxc-accent-subtle-bg);\n color: var(--uxc-accent-subtle-text);\n}\n\n.sprinkle-badge--yellow {\n background: var(--uxc-yellow-subtle-bg);\n color: var(--uxc-yellow-subtle-text);\n}\n.sprinkle-badge--purple {\n background: var(--uxc-purple-subtle-bg);\n color: var(--uxc-purple-subtle-text);\n}\n.sprinkle-badge--cyan {\n background: var(--uxc-cyan-subtle-bg);\n color: var(--uxc-cyan-subtle-text);\n}\n.sprinkle-badge--magenta {\n background: var(--uxc-magenta-subtle-bg);\n color: var(--uxc-magenta-subtle-text);\n}\n.sprinkle-badge--indigo {\n background: var(--uxc-indigo-subtle-bg);\n color: var(--uxc-indigo-subtle-text);\n}\n.sprinkle-badge--gray {\n background: var(--uxc-gray-subtle-bg);\n color: var(--uxc-gray-subtle-text);\n}\n\n.sprinkle-badge--outline {\n background: transparent;\n color: var(--s2-content-secondary);\n box-shadow: inset 0 0 0 1px var(--s2-border-default);\n}\n.sprinkle-badge--outline.sprinkle-badge--positive {\n color: var(--s2-positive);\n box-shadow: inset 0 0 0 1px var(--s2-positive);\n}\n.sprinkle-badge--outline.sprinkle-badge--negative {\n color: var(--s2-negative);\n box-shadow: inset 0 0 0 1px var(--s2-negative);\n}\n.sprinkle-badge--outline.sprinkle-badge--notice {\n color: var(--s2-notice);\n box-shadow: inset 0 0 0 1px var(--s2-notice);\n}\n.sprinkle-badge--outline.sprinkle-badge--informative {\n color: var(--s2-informative);\n box-shadow: inset 0 0 0 1px var(--s2-informative);\n}\n\n.sprinkle-chip {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 6px 12px;\n border: 1px solid var(--s2-gray-200);\n border-radius: var(--s2-radius-pill);\n font-size: var(--s2-font-size-75);\n font-weight: 500;\n color: var(--s2-gray-800);\n background: var(--s2-bg-layer-1);\n cursor: default;\n transition: background var(--s2-transition-default);\n}\n.sprinkle-chip:hover {\n background: var(--s2-gray-100);\n}\n.sprinkle-chip svg {\n width: 14px;\n height: 14px;\n flex-shrink: 0;\n}\n\n.sprinkle-status-light {\n display: inline-flex;\n align-items: center;\n gap: var(--s2-spacing-75);\n font-size: var(--s2-font-size-75);\n color: var(--s2-content-default);\n}\n.sprinkle-status-light::before {\n content: "";\n width: 8px;\n height: 8px;\n border-radius: 50%;\n background: var(--s2-content-tertiary);\n flex-shrink: 0;\n}\n.sprinkle-status-light--positive::before {\n background: var(--s2-positive);\n}\n.sprinkle-status-light--negative::before {\n background: var(--s2-negative);\n}\n.sprinkle-status-light--notice::before {\n background: var(--s2-notice);\n}\n.sprinkle-status-light--informative::before {\n background: var(--s2-informative);\n}\n\n.sprinkle-status-light--m {\n font-size: var(--s2-font-size-100);\n color: var(--s2-gray-600);\n}\n.sprinkle-status-light--m::before {\n width: 10px;\n height: 10px;\n}\n\n.sprinkle-card {\n background: var(--s2-gray-25);\n border: 1px solid var(--s2-gray-300);\n border-radius: var(--s2-radius-xl);\n padding: var(--s2-spacing-400);\n box-shadow: var(--s2-shadow-container);\n transition: box-shadow var(--s2-transition-default);\n}\n.sprinkle-card:hover {\n box-shadow: var(--s2-shadow-elevated);\n}\n\n.sprinkle-stat-card {\n background: var(--s2-gray-25);\n border: 1px solid var(--s2-gray-300);\n border-radius: var(--s2-radius-xl);\n padding: var(--s2-spacing-200) var(--s2-spacing-300);\n text-align: center;\n box-shadow: var(--s2-shadow-container);\n transition: box-shadow var(--s2-transition-default);\n}\n.sprinkle-stat-card:hover {\n box-shadow: var(--s2-shadow-elevated);\n}\n.sprinkle-stat-card .value {\n font-size: var(--s2-font-size-500);\n font-weight: 700;\n color: var(--s2-content-default);\n line-height: 1.2;\n}\n.sprinkle-stat-card .label {\n font-size: var(--s2-font-size-75);\n font-weight: 500;\n color: var(--s2-gray-600);\n margin-top: var(--s2-spacing-50);\n}\n\n.sprinkle-action-card {\n display: flex;\n flex-direction: column;\n background: var(--s2-gray-25);\n border: 1px solid var(--s2-gray-200);\n border-radius: var(--s2-radius-xl);\n overflow: hidden;\n box-shadow: var(--s2-shadow-container);\n}\n.sprinkle-action-card__header {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 16px 24px;\n font-weight: 700;\n font-size: 16px;\n line-height: 1.3;\n color: var(--s2-gray-900);\n}\n.sprinkle-action-card__header .sprinkle-badge {\n margin-left: auto;\n}\n.sprinkle-action-card__title-group {\n display: flex;\n flex-direction: column;\n gap: 2px;\n min-width: 0;\n}\n\n.sprinkle-action-card__icon {\n width: 40px;\n height: 40px;\n min-width: 40px;\n border-radius: 8px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 18px;\n flex-shrink: 0;\n}\n.sprinkle-action-card__icon--yellow {\n background: var(--uxc-yellow-subtle-bg);\n color: var(--uxc-yellow-subtle-text);\n}\n.sprinkle-action-card__icon--blue {\n background: var(--uxc-accent-subtle-bg);\n color: var(--uxc-accent-subtle-text);\n}\n.sprinkle-action-card__icon--green {\n background: var(--uxc-positive-subtle-bg);\n color: var(--uxc-positive-subtle-text);\n}\n.sprinkle-action-card__icon--indigo {\n background: var(--uxc-indigo-subtle-bg);\n color: var(--uxc-indigo-subtle-text);\n}\n\n.sprinkle-action-card__meta {\n font-size: 12px;\n font-weight: 400;\n color: var(--s2-gray-600);\n}\n\n.sprinkle-action-card__header-actions {\n display: flex;\n align-items: center;\n gap: 12px;\n margin-left: auto;\n font-size: 12px;\n font-weight: 500;\n color: var(--s2-gray-800);\n}\n.sprinkle-action-card__header-actions a {\n display: flex;\n align-items: center;\n gap: 4px;\n color: var(--s2-gray-800);\n text-decoration: none;\n}\n.sprinkle-action-card__body {\n padding: 0 24px 16px;\n font-size: 14px;\n color: var(--s2-gray-700);\n line-height: 1.5;\n}\n.sprinkle-action-card__actions {\n display: flex;\n gap: 8px;\n justify-content: flex-end;\n padding: 12px 24px;\n border-top: 1px solid var(--s2-gray-200);\n}\n\nbody\n > :is(.sprinkle-card, .sprinkle-stat-card, .sprinkle-action-card):not(\n :has(~ :not(script, style, template)),\n :not(script, style, template) ~ *\n ),\nbody\n > :is(.sprinkle-card, .sprinkle-stat-card, .sprinkle-action-card):not(\n :has(~ :not(script, style, template)),\n :not(script, style, template) ~ *\n ):hover {\n background: transparent;\n border: 0;\n border-radius: 0;\n box-shadow: none;\n}\n\n.sprinkle-list-item {\n display: flex;\n align-items: center;\n gap: 16px;\n padding: 16px 24px;\n border-top: 1px solid var(--s2-gray-100);\n min-height: 56px;\n}\n.sprinkle-list-item__icon {\n width: 40px;\n height: 40px;\n min-width: 40px;\n border-radius: 8px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 16px;\n flex-shrink: 0;\n background: var(--s2-gray-75);\n}\n.sprinkle-list-item__content {\n flex: 1;\n min-width: 0;\n}\n.sprinkle-list-item__title {\n font-size: 14px;\n font-weight: 700;\n color: var(--s2-gray-900);\n line-height: 1.3;\n display: flex;\n align-items: center;\n gap: 6px;\n}\n.sprinkle-list-item__subtitle {\n font-size: 14px;\n font-weight: 400;\n color: var(--s2-gray-600);\n line-height: 1.5;\n margin-top: 2px;\n}\n.sprinkle-list-item__end {\n display: flex;\n align-items: center;\n gap: 8px;\n flex-shrink: 0;\n}\n\n.sprinkle-table {\n width: 100%;\n border-collapse: collapse;\n font-size: 14px;\n border: 1px solid var(--s2-gray-100);\n border-radius: var(--s2-radius-default);\n overflow: hidden;\n}\n.sprinkle-table th {\n text-align: left;\n padding: 7px 16px;\n background: transparent;\n border-bottom: 1px solid var(--s2-gray-100);\n color: var(--s2-gray-700);\n font-weight: 700;\n font-size: 14px;\n line-height: 1.3;\n height: 32px;\n box-sizing: border-box;\n}\n.sprinkle-table td {\n padding: 12px 16px;\n border-bottom: 1px solid var(--s2-gray-100);\n color: var(--s2-content-default);\n font-size: 14px;\n line-height: 1.5;\n box-sizing: border-box;\n}\n.sprinkle-table tr:last-child td {\n border-bottom: none;\n}\n.sprinkle-table tr:hover td {\n background: var(--s2-gray-50);\n}\n\n.sprinkle-task-group {\n background: var(--s2-gray-50);\n border-radius: var(--s2-radius-default);\n padding: 16px;\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n.sprinkle-task-group__header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n}\n.sprinkle-task-group__title {\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 16px;\n font-weight: 700;\n color: var(--s2-gray-1000);\n}\n.sprinkle-task-group__title svg {\n width: 20px;\n height: 20px;\n flex-shrink: 0;\n}\n.sprinkle-task-group__meta {\n display: flex;\n align-items: center;\n gap: 16px;\n font-size: 12px;\n color: var(--s2-gray-600);\n}\n.sprinkle-task-item {\n display: flex;\n align-items: center;\n gap: 8px;\n height: 24px;\n padding-left: 4px;\n font-size: 14px;\n line-height: 18px;\n}\n.sprinkle-task-item--done {\n color: var(--s2-gray-600);\n}\n.sprinkle-task-item--pending {\n color: var(--s2-gray-800);\n}\n.sprinkle-task-item__check {\n width: 16px;\n height: 16px;\n flex-shrink: 0;\n border-radius: 50%;\n border: 1.5px solid var(--s2-gray-400);\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.sprinkle-task-item--done .sprinkle-task-item__check {\n background: var(--s2-positive);\n border-color: var(--s2-positive);\n}\n.sprinkle-task-item--done .sprinkle-task-item__check::after {\n content: "";\n width: 8px;\n height: 5px;\n border-left: 1.5px solid white;\n border-bottom: 1.5px solid white;\n transform: rotate(-45deg) translateY(-1px);\n}\n\n.sprinkle-progress-bar {\n display: flex;\n flex-direction: column;\n gap: var(--s2-spacing-75);\n --_bar-color: var(--s2-accent);\n}\n.sprinkle-progress-bar--positive {\n --_bar-color: var(--s2-positive);\n}\n.sprinkle-progress-bar--negative {\n --_bar-color: var(--s2-negative);\n}\n.sprinkle-progress-bar--notice {\n --_bar-color: var(--s2-notice);\n}\n.sprinkle-progress-bar--informative {\n --_bar-color: var(--s2-informative);\n}\n.sprinkle-progress-bar__header {\n display: flex;\n justify-content: space-between;\n align-items: baseline;\n font-size: var(--s2-font-size-75);\n color: var(--s2-content-default);\n}\n.sprinkle-progress-bar__header .label {\n font-weight: 400;\n}\n.sprinkle-progress-bar__header .value {\n font-weight: 400;\n color: var(--s2-gray-600);\n}\n.sprinkle-progress-bar__track {\n height: 4px;\n border-radius: var(--s2-radius-pill);\n background: var(--s2-gray-200);\n overflow: hidden;\n position: relative;\n}\n.sprinkle-progress-bar__track .fill {\n height: 100%;\n border-radius: var(--s2-radius-pill);\n background: var(--fill-color, var(--_bar-color, var(--s2-accent)));\n transition: width 300ms ease;\n}\n\n.sprinkle-progress-bar__track::after {\n content: "";\n position: absolute;\n inset: 0;\n right: auto;\n width: var(--progress, var(--value, 0%));\n border-radius: var(--s2-radius-pill);\n background: var(--fill-color, var(--_bar-color, var(--s2-accent)));\n transition: width 300ms ease;\n}\n.sprinkle-progress-bar__track:has(> .fill)::after {\n display: none;\n}\n\n.sprinkle-progress-bar:not(:has(.sprinkle-progress-bar__track)) {\n height: 4px;\n width: 100%;\n border-radius: var(--s2-radius-pill);\n background: var(--s2-gray-200);\n overflow: hidden;\n flex-direction: row;\n position: relative;\n}\n.sprinkle-progress-bar:not(:has(.sprinkle-progress-bar__track)) > .fill {\n height: 100%;\n border-radius: var(--s2-radius-pill);\n background: var(--fill-color, var(--_bar-color, var(--s2-accent)));\n transition: width 300ms ease;\n}\n.sprinkle-progress-bar:not(:has(.sprinkle-progress-bar__track))::after {\n content: "";\n position: absolute;\n inset: 0;\n right: auto;\n width: var(--progress, var(--value, 0%));\n border-radius: var(--s2-radius-pill);\n background: var(--fill-color, var(--_bar-color, var(--s2-accent)));\n transition: width 300ms ease;\n}\n.sprinkle-progress-bar:not(:has(.sprinkle-progress-bar__track)):has(> .fill)::after {\n display: none;\n}\n\n.sprinkle-meter {\n display: flex;\n flex-direction: column;\n gap: var(--s2-spacing-75);\n --_meter-color: var(--s2-informative);\n}\n.sprinkle-meter--positive {\n --_meter-color: var(--s2-positive);\n}\n.sprinkle-meter--notice {\n --_meter-color: var(--s2-notice);\n}\n.sprinkle-meter--negative {\n --_meter-color: var(--s2-negative);\n}\n.sprinkle-meter__header {\n display: flex;\n justify-content: space-between;\n align-items: baseline;\n font-size: var(--s2-font-size-75);\n color: var(--s2-content-default);\n}\n.sprinkle-meter__header .label {\n font-weight: 400;\n}\n.sprinkle-meter__header .value {\n font-weight: 400;\n color: var(--s2-gray-600);\n}\n.sprinkle-meter__track {\n height: 4px;\n border-radius: var(--s2-radius-pill);\n background: var(--s2-gray-200);\n overflow: hidden;\n position: relative;\n}\n.sprinkle-meter__track .fill {\n height: 100%;\n border-radius: var(--s2-radius-pill);\n background: var(--fill-color, var(--_meter-color));\n transition: width 300ms ease;\n}\n.sprinkle-meter__track::after {\n content: "";\n position: absolute;\n inset: 0;\n right: auto;\n width: var(--progress, var(--value, 0%));\n border-radius: var(--s2-radius-pill);\n background: var(--fill-color, var(--_meter-color));\n transition: width 300ms ease;\n}\n.sprinkle-meter__track:has(> .fill)::after {\n display: none;\n}\n\n.sprinkle-meter:not(:has(.sprinkle-meter__track)) {\n height: 4px;\n width: 100%;\n border-radius: var(--s2-radius-pill);\n background: var(--s2-gray-200);\n overflow: hidden;\n flex-direction: row;\n position: relative;\n}\n.sprinkle-meter:not(:has(.sprinkle-meter__track)) > .fill {\n height: 100%;\n border-radius: var(--s2-radius-pill);\n background: var(--fill-color, var(--_meter-color));\n transition: width 300ms ease;\n}\n.sprinkle-meter:not(:has(.sprinkle-meter__track))::after {\n content: "";\n position: absolute;\n inset: 0;\n right: auto;\n width: var(--progress, var(--value, 0%));\n border-radius: var(--s2-radius-pill);\n background: var(--fill-color, var(--_meter-color));\n transition: width 300ms ease;\n}\n.sprinkle-meter:not(:has(.sprinkle-meter__track)):has(> .fill)::after {\n display: none;\n}\n\n.sprinkle-kv-list {\n list-style: none;\n padding: 0;\n margin: 0;\n}\n.sprinkle-kv-list li {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: var(--s2-spacing-100) 0;\n border-bottom: 1px solid var(--s2-border-subtle);\n font-size: var(--s2-font-size-75);\n}\n.sprinkle-kv-list li:last-child {\n border-bottom: none;\n}\n.sprinkle-kv-list .key {\n color: var(--s2-gray-600);\n font-weight: 400;\n}\n.sprinkle-kv-list .value {\n color: var(--s2-content-default);\n font-weight: 700;\n}\ndl.sprinkle-kv-list {\n display: grid;\n grid-template-columns: auto 1fr;\n gap: 0;\n font-size: var(--s2-font-size-75);\n}\ndl.sprinkle-kv-list dt,\ndl.sprinkle-kv-list dd {\n padding: var(--s2-spacing-100) 0;\n border-bottom: 1px solid var(--s2-border-subtle);\n margin: 0;\n}\ndl.sprinkle-kv-list dt {\n color: var(--s2-gray-600);\n font-weight: 400;\n padding-right: var(--s2-spacing-300);\n}\ndl.sprinkle-kv-list dd {\n color: var(--s2-content-default);\n font-weight: 700;\n text-align: right;\n}\ndl.sprinkle-kv-list dt:last-of-type,\ndl.sprinkle-kv-list dd:last-of-type {\n border-bottom: none;\n}\n\n.sprinkle-text-field {\n width: 100%;\n padding: 7px 12px;\n font-size: var(--s2-font-size-100);\n font-family: var(--s2-font-family);\n color: var(--s2-content-default);\n background: var(--s2-bg-layer-1);\n border: 1px solid var(--s2-gray-200);\n border-radius: var(--s2-radius-default);\n outline: none;\n transition: border-color var(--s2-transition-default);\n box-sizing: border-box;\n}\n.sprinkle-text-field::placeholder {\n color: var(--s2-content-secondary);\n}\n.sprinkle-text-field:hover {\n border-color: var(--s2-gray-700);\n}\n.sprinkle-text-field:focus {\n border-color: var(--s2-accent);\n box-shadow: 0 0 0 1px var(--s2-accent);\n}\n\n.sprinkle-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));\n gap: var(--s2-spacing-200);\n}\n.sprinkle-stack {\n display: flex;\n flex-direction: column;\n gap: var(--s2-spacing-200);\n}\n.sprinkle-row {\n display: flex;\n align-items: center;\n gap: var(--s2-spacing-200);\n}\n\n.sprinkle-divider {\n border: none;\n border-top: 1px solid var(--s2-border-subtle);\n margin: var(--s2-spacing-200) 0;\n}\n.sprinkle-divider--medium {\n border-top-width: 2px;\n border-top-color: var(--s2-border-default);\n margin: var(--s2-spacing-300) 0;\n}\n\n.sprinkle-empty-state {\n text-align: center;\n padding: var(--s2-spacing-500) var(--s2-spacing-300);\n color: var(--s2-content-tertiary);\n font-size: var(--s2-font-size-100);\n}\n\n.sprinkle-toolbar {\n display: flex;\n align-items: center;\n gap: var(--s2-spacing-100);\n padding: var(--s2-spacing-100) var(--s2-spacing-200);\n border-bottom: 1px solid var(--s2-gray-200);\n background: var(--s2-gray-50);\n min-height: 40px;\n flex-shrink: 0;\n}\n.sprinkle-toolbar__start {\n display: flex;\n align-items: center;\n gap: var(--s2-spacing-100);\n}\n.sprinkle-toolbar__center {\n display: flex;\n align-items: center;\n gap: var(--s2-spacing-100);\n flex: 1;\n justify-content: center;\n}\n.sprinkle-toolbar__end {\n display: flex;\n align-items: center;\n gap: var(--s2-spacing-100);\n margin-left: auto;\n}\n\n.sprinkle-tabs {\n display: flex;\n gap: 0;\n border-bottom: 1px solid var(--s2-gray-200);\n background: var(--s2-gray-50);\n flex-shrink: 0;\n overflow-x: auto;\n}\n.sprinkle-tabs__tab {\n padding: var(--s2-spacing-100) var(--s2-spacing-200);\n font-size: var(--s2-font-size-100);\n font-weight: 500;\n color: var(--s2-gray-600);\n background: none;\n border: none;\n border-bottom: 2px solid transparent;\n cursor: default;\n white-space: nowrap;\n transition:\n color var(--s2-transition-default),\n border-color var(--s2-transition-default);\n font-family: var(--s2-font-family);\n}\n.sprinkle-tabs__tab:hover {\n color: var(--s2-gray-800);\n}\n.sprinkle-tabs__tab--active {\n color: var(--s2-gray-900);\n border-bottom-color: var(--s2-gray-900);\n font-weight: 700;\n}\n.sprinkle-tabs__panel {\n display: none;\n flex: 1;\n min-height: 0;\n overflow-y: auto;\n}\n.sprinkle-tabs__panel--active {\n display: flex;\n flex-direction: column;\n}\n\n.sprinkle-sidebar {\n display: flex;\n gap: 0;\n min-height: 0;\n flex: 1;\n}\n.sprinkle-sidebar__nav {\n width: 240px;\n min-width: 240px;\n overflow-y: auto;\n border-right: 1px solid var(--s2-gray-200);\n background: var(--s2-gray-50);\n padding: var(--s2-spacing-200) 0;\n}\n.sprinkle-sidebar__nav-item {\n display: flex;\n align-items: center;\n gap: var(--s2-spacing-100);\n padding: var(--s2-spacing-100) var(--s2-spacing-200);\n font-size: var(--s2-font-size-100);\n color: var(--s2-gray-700);\n cursor: default;\n border-radius: 0;\n transition: background var(--s2-transition-default);\n}\n.sprinkle-sidebar__nav-item:hover {\n background: var(--s2-gray-100);\n}\n.sprinkle-sidebar__nav-item--active {\n background: var(--s2-gray-800);\n color: var(--s2-gray-25);\n font-weight: 600;\n}\n.sprinkle-sidebar__nav-label {\n padding: var(--s2-spacing-200) var(--s2-spacing-200) var(--s2-spacing-50);\n font-size: var(--s2-font-size-50);\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 0.04em;\n color: var(--s2-gray-600);\n}\n.sprinkle-sidebar__main {\n flex: 1;\n min-width: 0;\n overflow-y: auto;\n padding: var(--s2-spacing-200);\n}\n\n.sprinkle-dialog {\n position: fixed;\n inset: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 100;\n}\n.sprinkle-dialog[hidden] {\n display: none;\n}\n.sprinkle-dialog__backdrop {\n position: absolute;\n inset: 0;\n background: rgba(0, 0, 0, 0.4);\n backdrop-filter: blur(2px);\n}\n.sprinkle-dialog__content {\n position: relative;\n background: var(--s2-gray-25);\n border-radius: var(--s2-radius-xl);\n box-shadow: var(--s2-shadow-elevated);\n padding: var(--s2-spacing-400);\n max-width: min(560px, calc(100% - 32px));\n max-height: calc(100% - 64px);\n overflow-y: auto;\n min-width: 280px;\n}\n.sprinkle-dialog__header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: var(--s2-spacing-300);\n}\n.sprinkle-dialog__title {\n font-size: var(--s2-font-size-200);\n font-weight: 700;\n color: var(--s2-content-default);\n}\n.sprinkle-dialog__close {\n width: 28px;\n height: 28px;\n border-radius: var(--s2-radius-pill);\n border: none;\n background: none;\n color: var(--s2-gray-600);\n cursor: default;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 18px;\n transition: background var(--s2-transition-default);\n}\n.sprinkle-dialog__close:hover {\n background: var(--s2-gray-100);\n}\n.sprinkle-dialog__footer {\n display: flex;\n justify-content: flex-end;\n gap: var(--s2-spacing-100);\n margin-top: var(--s2-spacing-300);\n}\n\n.sprinkle-collapsible__header {\n display: flex;\n align-items: center;\n gap: var(--s2-spacing-100);\n padding: var(--s2-spacing-100) var(--s2-spacing-200);\n cursor: default;\n font-size: var(--s2-font-size-100);\n font-weight: 600;\n color: var(--s2-content-default);\n background: none;\n border: none;\n width: 100%;\n text-align: left;\n border-radius: var(--s2-radius-default);\n transition: background var(--s2-transition-default);\n font-family: var(--s2-font-family);\n}\n.sprinkle-collapsible__header:hover {\n background: var(--s2-gray-100);\n}\n.sprinkle-collapsible__chevron {\n display: inline-block;\n width: 16px;\n height: 16px;\n transition: transform 200ms ease;\n flex-shrink: 0;\n}\n.sprinkle-collapsible__chevron::before {\n content: "\\25B6";\n font-size: 10px;\n color: var(--s2-gray-600);\n}\n.sprinkle-collapsible--open .sprinkle-collapsible__chevron {\n transform: rotate(90deg);\n}\n.sprinkle-collapsible__body {\n display: none;\n padding: var(--s2-spacing-100) var(--s2-spacing-200) var(--s2-spacing-200)\n calc(var(--s2-spacing-200) + 16px + var(--s2-spacing-100));\n}\n.sprinkle-collapsible--open .sprinkle-collapsible__body {\n display: block;\n}\n\n.sprinkle-split {\n display: flex;\n gap: 0;\n min-height: 0;\n flex: 1;\n}\n.sprinkle-split > * {\n flex: 1;\n min-width: 0;\n overflow-y: auto;\n}\n.sprinkle-split > :not(:last-child) {\n border-right: 1px solid var(--s2-border-default);\n}\n.sprinkle-split--vertical {\n flex-direction: column;\n}\n.sprinkle-split--vertical > :not(:last-child) {\n border-right: none;\n border-bottom: 1px solid var(--s2-border-default);\n}\n\n.sprinkle-canvas {\n position: relative;\n width: 100%;\n overflow: hidden;\n border-radius: var(--s2-radius-l);\n background: var(--s2-bg-layer-1);\n}\n.sprinkle-canvas--16x9 {\n aspect-ratio: 16 / 9;\n}\n.sprinkle-canvas--4x3 {\n aspect-ratio: 4 / 3;\n}\n.sprinkle-canvas--1x1 {\n aspect-ratio: 1 / 1;\n}\n.sprinkle-canvas svg,\n.sprinkle-canvas canvas {\n display: block;\n width: 100%;\n height: 100%;\n}\n\n.sprinkle-density-compact .sprinkle-content {\n padding: var(--s2-spacing-100);\n}\n.sprinkle-density-compact .sprinkle-heading {\n font-size: var(--s2-font-size-100);\n margin-bottom: var(--s2-spacing-50);\n}\n.sprinkle-density-compact .sprinkle-heading--m {\n font-size: 13px;\n}\n.sprinkle-density-compact .sprinkle-body {\n font-size: var(--s2-font-size-75);\n line-height: 1.4;\n}\n.sprinkle-density-compact .sprinkle-detail {\n font-size: var(--s2-font-size-50);\n}\n.sprinkle-density-compact .sprinkle-table th {\n padding: 5px 12px;\n font-size: var(--s2-font-size-50);\n height: 28px;\n}\n.sprinkle-density-compact .sprinkle-table td {\n padding: 6px 12px;\n font-size: var(--s2-font-size-75);\n}\n.sprinkle-density-compact .sprinkle-btn {\n height: 26px;\n font-size: var(--s2-font-size-75);\n padding: 0 10px;\n}\n.sprinkle-density-compact .sprinkle-badge {\n font-size: 10px;\n padding: 2px 6px;\n}\n.sprinkle-density-compact .sprinkle-card {\n padding: var(--s2-spacing-200);\n}\n.sprinkle-density-compact .sprinkle-list-item {\n padding: 8px 16px;\n min-height: 40px;\n gap: 10px;\n}\n.sprinkle-density-compact .sprinkle-list-item__icon {\n width: 28px;\n height: 28px;\n min-width: 28px;\n font-size: 13px;\n}\n.sprinkle-density-compact .sprinkle-list-item__title {\n font-size: var(--s2-font-size-75);\n}\n.sprinkle-density-compact .sprinkle-list-item__subtitle {\n font-size: 11px;\n}\n.sprinkle-density-compact .sprinkle-sidebar__nav-item {\n padding: 6px var(--s2-spacing-200);\n font-size: var(--s2-font-size-75);\n}\n.sprinkle-density-compact .sprinkle-text-field {\n height: 28px;\n font-size: var(--s2-font-size-75);\n padding: 4px 8px;\n}\n.sprinkle-density-compact .sprinkle-tabs__tab {\n padding: 6px var(--s2-spacing-200);\n font-size: var(--s2-font-size-75);\n}\n.sprinkle-density-compact .sprinkle-kv-list li {\n padding: 6px 0;\n font-size: var(--s2-font-size-50);\n}\n.sprinkle-density-compact .sprinkle-chip {\n padding: 3px 8px;\n font-size: 11px;\n}\n\n.sprinkle-density-spacious .sprinkle-content {\n padding: var(--s2-spacing-400);\n}\n.sprinkle-density-spacious .sprinkle-heading {\n font-size: var(--s2-font-size-500);\n margin-bottom: var(--s2-spacing-200);\n}\n.sprinkle-density-spacious .sprinkle-heading--m {\n font-size: var(--s2-font-size-300);\n}\n.sprinkle-density-spacious .sprinkle-body {\n font-size: 15px;\n line-height: 1.65;\n}\n.sprinkle-density-spacious .sprinkle-card {\n padding: var(--s2-spacing-500);\n}\n.sprinkle-density-spacious .sprinkle-btn {\n height: 36px;\n padding: 0 20px;\n}\n.sprinkle-density-spacious .sprinkle-action-card__body {\n padding: 0 32px 24px;\n font-size: 15px;\n}\n\n.sprinkle-panel {\n container-type: inline-size;\n}\n\n@container (max-width: 400px) {\n .sprinkle-sidebar {\n flex-direction: column;\n }\n .sprinkle-sidebar__nav {\n width: 100%;\n min-width: 0;\n max-height: 200px;\n border-right: none;\n border-bottom: 1px solid var(--s2-border-default);\n }\n .sprinkle-grid {\n grid-template-columns: 1fr;\n }\n .sprinkle-split:not(.sprinkle-split--vertical) {\n flex-direction: column;\n }\n .sprinkle-split:not(.sprinkle-split--vertical) > :not(:last-child) {\n border-right: none;\n border-bottom: 1px solid var(--s2-border-default);\n }\n .sprinkle-toolbar {\n flex-wrap: wrap;\n }\n}\n\n@container (min-width: 600px) {\n .sprinkle-sidebar__nav {\n width: 240px;\n min-width: 240px;\n }\n .sprinkle-grid {\n grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));\n }\n}\n';
|
|
13011
13011
|
|
|
13012
13012
|
// src/app/sprinkle.ts
|
|
13013
13013
|
var bridge = `(() => {
|
|
@@ -13129,6 +13129,10 @@ var SliccSprinkle = class extends ThemedElement {
|
|
|
13129
13129
|
height: 100%;
|
|
13130
13130
|
border: 0;
|
|
13131
13131
|
}
|
|
13132
|
+
.frame {
|
|
13133
|
+
border: 1px solid var(--spectrum-gray-200);
|
|
13134
|
+
background: var(--spectrum-background-layer-1-color);
|
|
13135
|
+
}
|
|
13132
13136
|
.handle {
|
|
13133
13137
|
display: flex;
|
|
13134
13138
|
align-items: center;
|
|
@@ -13234,7 +13238,7 @@ var SliccSprinkle = class extends ThemedElement {
|
|
|
13234
13238
|
<swc-icon-open-in slot="icon"></swc-icon-open-in>
|
|
13235
13239
|
</sp-action-button>
|
|
13236
13240
|
</div>
|
|
13237
|
-
|
|
13241
|
+
<div class="frame">${frame}</div>`;
|
|
13238
13242
|
}
|
|
13239
13243
|
};
|
|
13240
13244
|
|