@layer reset {
*,
::before,
::after {
box-sizing: border-box;
margin: 0px;
padding: 0px;
}
:where([hidden]:not([hidden="until-found"])) {
display: none !important;
}
:where(html) {
text-size-adjust: none;
interpolate-size: allow-keywords;
}
:where(html:has(dialog:modal[open])) {
overflow: clip;
}
:where(button) {
appearance: none;
background-color: unset;
border: unset;
cursor: pointer;
text-align: unset;
}
:where(input, button, textarea, select) {
font: inherit;
color: inherit;
}
:where(fieldset) {
border: none;
}
:where(img, picture, svg, video) {
block-size: auto;
max-inline-size: 100%;
display: block;
}
:where(p, h1, h2, h3, h4, h5, h6) {
overflow-wrap: break-word;
text-wrap: pretty;
font-weight: unset;
font-size: unset;
}
:where(table) {
border-collapse: collapse;
}
:where(table, th, caption) {
text-align: start;
}
:where(dialog, [popover]) {
color: inherit;
inset: unset;
max-width: unset;
max-height: unset;
overflow: unset;
background: 0px 0px;
border: none;
}
:where(dialog:not([open], [popover]), [popover]:not(:popover-open)) {
display: none !important;
}
}
@layer itwinui.foundations {
html,
:host,
.🥝-root {
--stratakit-space-x05: 2px;
--stratakit-space-x1: 4px;
--stratakit-space-x2: 8px;
--stratakit-space-x3: 12px;
--stratakit-space-x4: 16px;
--stratakit-space-x5: 20px;
--stratakit-space-x6: 24px;
--stratakit-space-x7: 28px;
--stratakit-space-x8: 32px;
--stratakit-space-x9: 36px;
--stratakit-space-x10: 40px;
}
:is(
html:where([data-color-scheme="light"]),
:host([data-color-scheme="light"]),
.🥝-root:where([data-kiwi-theme="light"])
) {
--stratakit-color-bg-mono-base: oklch(55.22% 0.018 253.99);
--stratakit-color-bg-mono-muted: oklch(87.77% 0.005 247.88);
--stratakit-color-bg-mono-faded: oklch(34.4% 0.011 264.42);
--stratakit-color-bg-mono-transparent: oklch(55.22% 0.018 253.99/0.16);
--stratakit-color-bg-accent-base: oklch(54% 0.1 170.26);
--stratakit-color-bg-accent-muted: oklch(89.34% 0.027 178.99);
--stratakit-color-bg-accent-faded: oklch(33.76% 0.059 170.74);
--stratakit-color-bg-accent-transparent: oklch(54% 0.1 170.26/0.16);
--stratakit-color-bg-info-base: oklch(55.68% 0.187 255.82);
--stratakit-color-bg-info-muted: oklch(89.45% 0.042 250.5);
--stratakit-color-bg-info-faded: oklch(34.71% 0.108 254.29);
--stratakit-color-bg-info-transparent: oklch(55.68% 0.187 255.82/0.16);
--stratakit-color-bg-positive-base: oklch(53.64% 0.173 140.57);
--stratakit-color-bg-positive-muted: oklch(89.17% 0.046 138.13);
--stratakit-color-bg-positive-faded: oklch(33.63% 0.106 139.87);
--stratakit-color-bg-positive-transparent: oklch(53.64% 0.173 140.57/0.16);
--stratakit-color-bg-attention-base: oklch(55.63% 0.116 75.58);
--stratakit-color-bg-attention-muted: oklch(89.65% 0.049 84.55);
--stratakit-color-bg-attention-faded: oklch(34.69% 0.071 77.24);
--stratakit-color-bg-attention-transparent: oklch(56.98% 0.174 41.22/0.16);
--stratakit-color-bg-critical-base: oklch(58.02% 0.221 19.39);
--stratakit-color-bg-critical-muted: oklch(90.3% 0.042 5.14);
--stratakit-color-bg-critical-faded: oklch(36.08% 0.133 17.52);
--stratakit-color-bg-critical-transparent: oklch(58.02% 0.221 19.39/0.16);
--stratakit-color-bg-page-depth: oklch(94.86% 0.002 247.84);
--stratakit-color-bg-page-base: oklch(99.06% 0.002 247.84);
--stratakit-color-bg-page-zebra: oklch(0% none none/.04);
--stratakit-color-bg-elevation-base: oklch(100% none none);
--stratakit-color-bg-elevation-emphasis: oklch(18.15% 0.003 247.97);
--stratakit-color-bg-elevation-level-1: oklch(100% none none);
--stratakit-color-bg-elevation-overlay: oklch(99.06% 0.002 247.84);
--stratakit-color-bg-elevation-level-2: oklch(100% none none);
--stratakit-color-bg-neutral-base: oklch(100% none none);
--stratakit-color-bg-neutral-muted: oklch(97.87% 0.002 247.84);
--stratakit-color-bg-neutral-faded: oklch(94.86% 0.002 247.84);
--stratakit-color-bg-neutral-inverse: oklch(100% none none);
--stratakit-color-bg-glow-base-hover-\%: 4%;
--stratakit-color-bg-glow-base-pressed-\%: 8%;
--stratakit-color-bg-glow-on-surface-accent-hover: oklch(
54% 0.1 170.26/0.12
);
--stratakit-color-bg-glow-on-surface-accent-pressed: oklch(
54% 0.1 170.26/0.16
);
--stratakit-color-bg-glow-on-surface-neutral-hover: oklch(0% none none/.04);
--stratakit-color-bg-glow-on-surface-neutral-pressed: oklch(
0% none none/.08
);
--stratakit-color-bg-glow-on-surface-critical-pressed: oklch(
58.02% 0.221 19.39/0.16
);
--stratakit-color-bg-glow-on-surface-critical-hover: oklch(
58.02% 0.221 19.39/0.12
);
--stratakit-color-bg-glow-on-surface-disabled: oklch(0% none none/.04);
--stratakit-color-bg-glow-strong-pressed-\%: 16%;
--stratakit-color-bg-glow-strong-hover-\%: 8%;
--stratakit-color-bg-control-textbox: oklch(100% none none);
--stratakit-color-bg-control-scrollbar-surface: oklch(0% none none/.48);
--stratakit-color-bg-control-scrollbar-canvas: oklch(0% none none/.48);
--stratakit-color-bg-control-switch: oklch(94.86% 0.002 247.84);
--stratakit-color-bg-control-slider-track: oklch(87.77% 0.005 247.88);
--stratakit-color-bg-control-select: oklch(100% none none);
--stratakit-color-icon-neutral-hover: oklch(26.92% 0.008 268.32);
--stratakit-color-icon-neutral-base: oklch(55.22% 0.018 253.99);
--stratakit-color-icon-neutral-secondary: oklch(62.09% 0.017 257.22);
--stratakit-color-icon-neutral-tertiary: oklch(69.04% 0.014 255.53);
--stratakit-color-icon-neutral-disabled: oklch(75.82% 0.01 252.83);
--stratakit-color-icon-neutral-emphasis: oklch(100% none none);
--stratakit-color-icon-neutral-muted: oklch(79.56% 0.008 241.69);
--stratakit-color-icon-accent-base: oklch(47.28% 0.087 169.96);
--stratakit-color-icon-accent-strong: oklch(47.28% 0.087 169.96);
--stratakit-color-icon-accent-faded: oklch(40.38% 0.071 171.73);
--stratakit-color-icon-info-base: oklch(48.74% 0.162 255.58);
--stratakit-color-icon-info-faded: oklch(41.55% 0.136 255.23);
--stratakit-color-icon-positive-base: oklch(46.81% 0.151 140.37);
--stratakit-color-icon-positive-faded: oklch(40.36% 0.129 140.08);
--stratakit-color-icon-attention-base: oklch(48.69% 0.101 75.71);
--stratakit-color-icon-attention-faded: oklch(41.7% 0.086 77.28);
--stratakit-color-icon-critical-base: oklch(50.74% 0.193 19.05);
--stratakit-color-icon-critical-faded: oklch(43.46% 0.163 18.38);
--stratakit-color-icon-mono-base: oklch(48.26% 0.017 254.7);
--stratakit-color-icon-mono-faded: oklch(41.45% 0.013 256.75);
--stratakit-color-icon-glow-base-hover-\%: 8%;
--stratakit-color-icon-glow-base-pressed-\%: 12%;
--stratakit-color-icon-glow-strong-hover-\%: 8%;
--stratakit-color-icon-glow-strong-pressed-\%: 16%;
--stratakit-color-border-mono-base: oklch(55.22% 0.018 253.99);
--stratakit-color-border-mono-faded: oklch(41.45% 0.013 256.75);
--stratakit-color-border-mono-muted: oklch(79.56% 0.008 241.69);
--stratakit-color-border-accent-base: oklch(54% 0.1 170.26);
--stratakit-color-border-accent-faded: oklch(40.38% 0.071 171.73);
--stratakit-color-border-accent-muted: oklch(82.26% 0.045 176.56);
--stratakit-color-border-accent-strong: oklch(47.28% 0.087 169.96);
--stratakit-color-border-info-base: oklch(55.68% 0.187 255.82);
--stratakit-color-border-info-faded: oklch(41.55% 0.136 255.23);
--stratakit-color-border-info-muted: oklch(82.51% 0.071 249.98);
--stratakit-color-border-positive-base: oklch(53.64% 0.173 140.57);
--stratakit-color-border-positive-muted: oklch(82.11% 0.078 138.1);
--stratakit-color-border-positive-faded: oklch(40.36% 0.129 140.08);
--stratakit-color-border-attention-base: oklch(55.63% 0.116 75.58);
--stratakit-color-border-attention-muted: oklch(82.78% 0.08 84.58);
--stratakit-color-border-attention-faded: oklch(41.7% 0.086 77.28);
--stratakit-color-border-critical-base: oklch(58.02% 0.221 19.39);
--stratakit-color-border-critical-muted: oklch(83.74% 0.075 6.15);
--stratakit-color-border-critical-faded: oklch(43.46% 0.163 18.38);
--stratakit-color-border-glow-base-hover-\%: 8%;
--stratakit-color-border-glow-base-pressed-\%: 12%;
--stratakit-color-border-glow-base-default: oklch(0% none none/.08);
--stratakit-color-border-glow-on-surface-faded: oklch(0% none none/.04);
--stratakit-color-border-glow-on-surface-disabled: oklch(0% none none/.08);
--stratakit-color-border-glow-strong-hover-\%: 8%;
--stratakit-color-border-glow-strong-pressed-\%: 16%;
--stratakit-color-border-glow-strong-default: oklch(0% none none/.12);
--stratakit-color-border-neutral-base: oklch(87.77% 0.005 247.88);
--stratakit-color-border-neutral-muted: oklch(91.52% 0.005 258.33);
--stratakit-color-border-neutral-faded: oklch(82.77% 0.007 247.91);
--stratakit-color-border-neutral-inverse: oklch(14.4% 0.003 247.09);
--stratakit-color-border-neutral-disabled: oklch(91.52% 0.005 258.33);
--stratakit-color-border-elevation-base: oklch(0% none none/.64);
--stratakit-color-border-page-base: oklch(0% none none/.08);
--stratakit-color-border-page-depth: oklch(0% none none/.08);
--stratakit-color-border-control-scrollbar-canvas: oklch(
100% none none/.24
);
--stratakit-color-border-control-switch: oklch(85.95% 0.006 255.48);
--stratakit-color-border-control-checkbox: oklch(79.56% 0.008 241.69);
--stratakit-color-border-control-radio: oklch(79.56% 0.008 241.69);
--stratakit-color-border-control-textbox: oklch(79.56% 0.008 241.69);
--stratakit-color-border-control-select: oklch(79.56% 0.008 241.69);
--stratakit-color-text-mono-base: oklch(48.26% 0.017 254.7);
--stratakit-color-text-mono-faded: oklch(41.45% 0.013 256.75);
--stratakit-color-text-accent-base: oklch(47.28% 0.087 169.96);
--stratakit-color-text-accent-faded: oklch(40.38% 0.071 171.73);
--stratakit-color-text-accent-strong: oklch(47.28% 0.087 169.96);
--stratakit-color-text-info-base: oklch(48.74% 0.162 255.58);
--stratakit-color-text-info-faded: oklch(41.55% 0.136 255.23);
--stratakit-color-text-positive-base: oklch(46.81% 0.151 140.37);
--stratakit-color-text-positive-faded: oklch(40.36% 0.129 140.08);
--stratakit-color-text-attention-base: oklch(48.69% 0.101 75.71);
--stratakit-color-text-attention-faded: oklch(41.7% 0.086 77.28);
--stratakit-color-text-critical-base: oklch(50.74% 0.193 19.05);
--stratakit-color-text-critical-faded: oklch(43.46% 0.163 18.38);
--stratakit-color-text-neutral-emphasis: oklch(100% none none);
--stratakit-color-text-neutral-primary: oklch(29.76% 0.011 268.32);
--stratakit-color-text-neutral-secondary: oklch(41.45% 0.013 256.75);
--stratakit-color-text-neutral-tertiary: oklch(55.22% 0.018 253.99);
--stratakit-color-text-neutral-disabled: oklch(75.82% 0.01 252.83);
--stratakit-color-text-glow-base-hover-\%: 8%;
--stratakit-color-text-glow-base-pressed-\%: 12%;
--stratakit-color-text-glow-strong-hover-\%: 8%;
--stratakit-color-text-glow-strong-pressed-\%: 16%;
--stratakit-color-static-black: oklch(0% none none);
--stratakit-color-static-white: oklch(100% none none);
--stratakit-color-static-accent: oklch(54% 0.1 170.26);
--stratakit-color-glow-hue: oklch(0% none none);
--stratakit-color-brand-logo: oklch(41.45% 0.013 256.75);
--stratakit-shadow-surface-xs:
0px 1px 0px 0px oklch(0% none none/.04),
0px 0px 0px 1px oklch(0% none none/.08),
inset 0px 0px 0px 1px oklch(100% none none/.08),
0px 1px 1px -0.5px oklch(0% none none/.04);
--stratakit-shadow-surface-sm:
0px 1px 0px 0px oklch(0% none none/.04),
0px 0px 0px 1px oklch(0% none none/.08),
inset 0px 0px 0px 1px oklch(100% none none/.08),
0px 1px 1px -0.5px oklch(0% none none/.04),
0px 3px 3px -1.5px oklch(0% none none/.04);
--stratakit-shadow-surface-md:
0px 1px 0px 0px oklch(0% none none/.04),
0px 0px 0px 1px oklch(0% none none/.08),
inset 0px 0px 0px 1px oklch(100% none none/.08),
0px 1px 1px -0.5px oklch(0% none none/.04),
0px 3px 3px -1.5px oklch(0% none none/.04),
0px 6px 6px -3px oklch(0% none none/.04);
--stratakit-shadow-surface-lg:
0px 1px 0px 0px oklch(0% none none/.04),
0px 0px 0px 1px oklch(0% none none/.08),
inset 0px 0px 0px 1px oklch(100% none none/.08),
0px 1px 1px -0.5px oklch(0% none none/.04),
0px 3px 3px -1.5px oklch(0% none none/.04),
0px 6px 6px -3px oklch(0% none none/.04),
0px 12px 12px -6px oklch(0% none none/.04);
--stratakit-shadow-surface-xl:
0px 1px 0px 0px oklch(0% none none/.04),
0px 0px 0px 1px oklch(0% none none/.08),
inset 0px 0px 0px 1px oklch(100% none none/.08),
0px 1px 1px -0.5px oklch(0% none none/.04),
0px 3px 3px -1.5px oklch(0% none none/.04),
0px 6px 6px -3px oklch(0% none none/.04),
0px 12px 12px -6px oklch(0% none none/.04),
0px 24px 24px -12px oklch(0% none none/.04);
--stratakit-shadow-button-base-drop:
0px 1px 1px -0.5px oklch(0% none none/.04),
0px 3px 3px -1.5px oklch(0% none none/.04);
--stratakit-shadow-button-base-inset: inset 0px -1px 0px 0px
oklch(0% none none/.08);
--stratakit-shadow-dialog-base:
0px 1px 0px 0px oklch(0% none none/.08),
0px 0px 0px 1px oklch(0% none none/.12),
inset 0px 0px 0px 1px oklch(100% none none/.02),
0px 1px 1px -0.5px oklch(0% none none/.08),
0px 3px 3px -1.5px oklch(0% none none/.08),
0px 6px 6px -3px oklch(0% none none/.08),
0px 12px 12px -6px oklch(0% none none/.08),
0px 24px 24px -12px oklch(0% none none/.08);
--stratakit-shadow-dropdown-base:
0px 1px 0px 0px oklch(0% none none/.04),
0px 0px 0px 1px oklch(0% none none/.12),
inset 0px 0px 0px 1px oklch(100% none none/.02),
0px 1px 1px -0.5px oklch(0% none none/.04),
0px 3px 3px -1.5px oklch(0% none none/.04),
0px 6px 6px -3px oklch(0% none none/.04),
0px 12px 12px -6px oklch(0% none none/.04),
0px 24px 24px -12px oklch(0% none none/.04);
--stratakit-shadow-input-base:
inset 0px 1px 2px 0px oklch(0% none none/.04),
inset 0px 2px 4px 0px oklch(0% none none/.04);
--stratakit-shadow-table-strong: 0px -1px 0px 0px oklch(54% 0.1 170.26);
--stratakit-shadow-toolbar-base:
0px 1px 0px 0px oklch(0% none none/.08),
0px 0px 0px 1px oklch(0% none none/.24),
inset 0px 0px 0px 1px oklch(100% none none/.8),
0px 1px 1px -0.5px oklch(0% none none/.08),
0px 3px 3px -1.5px oklch(0% none none/.08),
0px 6px 6px -3px oklch(0% none none/.08),
0px 12px 12px -6px oklch(0% none none/.08),
0px 24px 24px -12px oklch(0% none none/.08);
--stratakit-shadow-tooltip-base:
inset 0px 0px 0px 1px oklch(0% none none/.96),
0px 1px 1px -0.5px oklch(0% none none/.04),
0px 3px 3px -1.5px oklch(0% none none/.04),
0px 6px 6px -3px oklch(0% none none/.04),
0px 12px 12px -6px oklch(0% none none/.04);
}
html:where([data-color-scheme="light"]),
:host([data-color-scheme="light"]),
.🥝-root:where([data-kiwi-theme="light"]) {
color-scheme: light;
--stratakit-color-border-shadow-base: var(
--stratakit-color-border-neutral-base
);
--stratakit-color-border-shadow-strong: oklch(0% none none/.12);
}
@supports not (color: oklch(0% 0 0)) {
:is(
html:where([data-color-scheme="light"]),
:host([data-color-scheme="light"]),
.🥝-root:where([data-kiwi-theme="light"])
) {
--stratakit-color-bg-mono-base: #6b737d;
--stratakit-color-bg-mono-muted: #d4d7da;
--stratakit-color-bg-mono-faded: #36393f;
--stratakit-color-bg-mono-transparent: #6b737d29;
--stratakit-color-bg-accent-base: #188166;
--stratakit-color-bg-accent-muted: #cae2dc;
--stratakit-color-bg-accent-faded: #0d4133;
--stratakit-color-bg-accent-transparent: #18816629;
--stratakit-color-bg-info-base: #0470dd;
--stratakit-color-bg-info-muted: #c8dff8;
--stratakit-color-bg-info-faded: #033970;
--stratakit-color-bg-info-transparent: #0470dd29;
--stratakit-color-bg-positive-base: #228404;
--stratakit-color-bg-positive-muted: #cde3c6;
--stratakit-color-bg-positive-faded: #114302;
--stratakit-color-bg-positive-transparent: #22840429;
--stratakit-color-bg-attention-base: #9a6804;
--stratakit-color-bg-attention-muted: #ecdbb9;
--stratakit-color-bg-attention-faded: #4e3402;
--stratakit-color-bg-attention-transparent: #c7480129;
--stratakit-color-bg-critical-base: #df1c41;
--stratakit-color-bg-critical-muted: #f9d4db;
--stratakit-color-bg-critical-faded: #730e22;
--stratakit-color-bg-critical-transparent: #df1c4129;
--stratakit-color-bg-page-depth: #edeeef;
--stratakit-color-bg-page-base: #fbfcfd;
--stratakit-color-bg-page-zebra: #0000000a;
--stratakit-color-bg-elevation-base: #fff;
--stratakit-color-bg-elevation-emphasis: #111213;
--stratakit-color-bg-elevation-level-1: #fff;
--stratakit-color-bg-elevation-overlay: #fbfcfd;
--stratakit-color-bg-elevation-level-2: #fff;
--stratakit-color-bg-neutral-base: #fff;
--stratakit-color-bg-neutral-muted: #f7f8f9;
--stratakit-color-bg-neutral-faded: #edeeef;
--stratakit-color-bg-neutral-inverse: #fff;
--stratakit-color-bg-glow-base-hover-\%: 4%;
--stratakit-color-bg-glow-base-pressed-\%: 8%;
--stratakit-color-bg-glow-on-surface-accent-hover: #1881661f;
--stratakit-color-bg-glow-on-surface-accent-pressed: #18816629;
--stratakit-color-bg-glow-on-surface-neutral-hover: #0000000a;
--stratakit-color-bg-glow-on-surface-neutral-pressed: #00000014;
--stratakit-color-bg-glow-on-surface-critical-pressed: #df1c4129;
--stratakit-color-bg-glow-on-surface-critical-hover: #df1c411f;
--stratakit-color-bg-glow-on-surface-disabled: #0000000a;
--stratakit-color-bg-glow-strong-pressed-\%: 16%;
--stratakit-color-bg-glow-strong-hover-\%: 8%;
--stratakit-color-bg-control-textbox: #fff;
--stratakit-color-bg-control-scrollbar-surface: #0000007a;
--stratakit-color-bg-control-scrollbar-canvas: #0000007a;
--stratakit-color-bg-control-switch: #edeeef;
--stratakit-color-bg-control-slider-track: #d4d7da;
--stratakit-color-bg-control-select: #fff;
--stratakit-color-icon-neutral-hover: #24262a;
--stratakit-color-icon-neutral-base: #6b737d;
--stratakit-color-icon-neutral-secondary: #808791;
--stratakit-color-icon-neutral-tertiary: #969ca4;
--stratakit-color-icon-neutral-disabled: #acb1b7;
--stratakit-color-icon-neutral-emphasis: #fff;
--stratakit-color-icon-neutral-muted: #b8bdc1;
--stratakit-color-icon-accent-base: #146b54;
--stratakit-color-icon-accent-strong: #146b54;
--stratakit-color-icon-accent-faded: #125544;
--stratakit-color-icon-info-base: #035db8;
--stratakit-color-icon-info-faded: #024a93;
--stratakit-color-icon-positive-base: #1c6d01;
--stratakit-color-icon-positive-faded: #175801;
--stratakit-color-icon-attention-base: #805604;
--stratakit-color-icon-attention-faded: #664502;
--stratakit-color-icon-critical-base: #ba1536;
--stratakit-color-icon-critical-faded: #96122c;
--stratakit-color-icon-mono-base: #585f68;
--stratakit-color-icon-mono-faded: #474c53;
--stratakit-color-icon-glow-base-hover-\%: 8%;
--stratakit-color-icon-glow-base-pressed-\%: 12%;
--stratakit-color-icon-glow-strong-hover-\%: 8%;
--stratakit-color-icon-glow-strong-pressed-\%: 16%;
--stratakit-color-border-mono-base: #6b737d;
--stratakit-color-border-mono-faded: #474c53;
--stratakit-color-border-mono-muted: #b8bdc1;
--stratakit-color-border-accent-base: #188166;
--stratakit-color-border-accent-faded: #125544;
--stratakit-color-border-accent-muted: #a7cfc4;
--stratakit-color-border-accent-strong: #146b54;
--stratakit-color-border-info-base: #0470dd;
--stratakit-color-border-info-faded: #024a93;
--stratakit-color-border-info-muted: #a3caf3;
--stratakit-color-border-positive-base: #228404;
--stratakit-color-border-positive-muted: #acd1a0;
--stratakit-color-border-positive-faded: #175801;
--stratakit-color-border-attention-base: #9a6804;
--stratakit-color-border-attention-muted: #dfc38a;
--stratakit-color-border-attention-faded: #664502;
--stratakit-color-border-critical-base: #df1c41;
--stratakit-color-border-critical-muted: #f5b6c2;
--stratakit-color-border-critical-faded: #96122c;
--stratakit-color-border-glow-base-hover-\%: 8%;
--stratakit-color-border-glow-base-pressed-\%: 12%;
--stratakit-color-border-glow-base-default: #00000014;
--stratakit-color-border-glow-on-surface-faded: #0000000a;
--stratakit-color-border-glow-on-surface-disabled: #00000014;
--stratakit-color-border-glow-strong-hover-\%: 8%;
--stratakit-color-border-glow-strong-pressed-\%: 16%;
--stratakit-color-border-glow-strong-default: #0000001f;
--stratakit-color-border-neutral-base: #d4d7da;
--stratakit-color-border-neutral-muted: #e1e3e6;
--stratakit-color-border-neutral-faded: #c3c7cb;
--stratakit-color-border-neutral-inverse: #090a0b;
--stratakit-color-border-neutral-disabled: #e1e3e6;
--stratakit-color-border-elevation-base: #000000a3;
--stratakit-color-border-page-base: #00000014;
--stratakit-color-border-page-depth: #00000014;
--stratakit-color-border-control-scrollbar-canvas: #ffffff3d;
--stratakit-color-border-control-switch: #ced1d5;
--stratakit-color-border-control-checkbox: #b8bdc1;
--stratakit-color-border-control-radio: #b8bdc1;
--stratakit-color-border-control-textbox: #b8bdc1;
--stratakit-color-border-control-select: #b8bdc1;
--stratakit-color-text-mono-base: #585f68;
--stratakit-color-text-mono-faded: #474c53;
--stratakit-color-text-accent-base: #146b54;
--stratakit-color-text-accent-faded: #125544;
--stratakit-color-text-accent-strong: #146b54;
--stratakit-color-text-info-base: #035db8;
--stratakit-color-text-info-faded: #024a93;
--stratakit-color-text-positive-base: #1c6d01;
--stratakit-color-text-positive-faded: #175801;
--stratakit-color-text-attention-base: #805604;
--stratakit-color-text-attention-faded: #664502;
--stratakit-color-text-critical-base: #ba1536;
--stratakit-color-text-critical-faded: #96122c;
--stratakit-color-text-neutral-emphasis: #fff;
--stratakit-color-text-neutral-primary: #2b2d33;
--stratakit-color-text-neutral-secondary: #474c53;
--stratakit-color-text-neutral-tertiary: #6b737d;
--stratakit-color-text-neutral-disabled: #acb1b7;
--stratakit-color-text-glow-base-hover-\%: 8%;
--stratakit-color-text-glow-base-pressed-\%: 12%;
--stratakit-color-text-glow-strong-hover-\%: 8%;
--stratakit-color-text-glow-strong-pressed-\%: 16%;
--stratakit-color-static-black: #000;
--stratakit-color-static-white: #fff;
--stratakit-color-static-accent: #188166;
--stratakit-color-glow-hue: #000;
--stratakit-color-brand-logo: #474c53;
--stratakit-shadow-surface-xs:
0px 1px 0px 0px #0000000a, 0px 0px 0px 1px #00000014,
inset 0px 0px 0px 1px #ffffff14, 0px 1px 1px -0.5px #0000000a;
--stratakit-shadow-surface-sm:
0px 1px 0px 0px #0000000a, 0px 0px 0px 1px #00000014,
inset 0px 0px 0px 1px #ffffff14, 0px 1px 1px -0.5px #0000000a,
0px 3px 3px -1.5px #0000000a;
--stratakit-shadow-surface-md:
0px 1px 0px 0px #0000000a, 0px 0px 0px 1px #00000014,
inset 0px 0px 0px 1px #ffffff14, 0px 1px 1px -0.5px #0000000a,
0px 3px 3px -1.5px #0000000a, 0px 6px 6px -3px #0000000a;
--stratakit-shadow-surface-lg:
0px 1px 0px 0px #0000000a, 0px 0px 0px 1px #00000014,
inset 0px 0px 0px 1px #ffffff14, 0px 1px 1px -0.5px #0000000a,
0px 3px 3px -1.5px #0000000a, 0px 6px 6px -3px #0000000a,
0px 12px 12px -6px #0000000a;
--stratakit-shadow-surface-xl:
0px 1px 0px 0px #0000000a, 0px 0px 0px 1px #00000014,
inset 0px 0px 0px 1px #ffffff14, 0px 1px 1px -0.5px #0000000a,
0px 3px 3px -1.5px #0000000a, 0px 6px 6px -3px #0000000a,
0px 12px 12px -6px #0000000a, 0px 24px 24px -12px #0000000a;
--stratakit-shadow-button-base-drop:
0px 1px 1px -0.5px #0000000a, 0px 3px 3px -1.5px #0000000a;
--stratakit-shadow-button-base-inset: inset 0px -1px 0px 0px #00000014;
--stratakit-shadow-dialog-base:
0px 1px 0px 0px #00000014, 0px 0px 0px 1px #0000001f,
inset 0px 0px 0px 1px #ffffff05, 0px 1px 1px -0.5px #00000014,
0px 3px 3px -1.5px #00000014, 0px 6px 6px -3px #00000014,
0px 12px 12px -6px #00000014, 0px 24px 24px -12px #00000014;
--stratakit-shadow-dropdown-base:
0px 1px 0px 0px #0000000a, 0px 0px 0px 1px #0000001f,
inset 0px 0px 0px 1px #ffffff05, 0px 1px 1px -0.5px #0000000a,
0px 3px 3px -1.5px #0000000a, 0px 6px 6px -3px #0000000a,
0px 12px 12px -6px #0000000a, 0px 24px 24px -12px #0000000a;
--stratakit-shadow-input-base:
inset 0px 1px 2px 0px #0000000a, inset 0px 2px 4px 0px #0000000a;
--stratakit-shadow-table-strong: 0px -1px 0px 0px #188166;
--stratakit-shadow-toolbar-base:
0px 1px 0px 0px #00000014, 0px 0px 0px 1px #0000003d,
inset 0px 0px 0px 1px #fffc, 0px 1px 1px -0.5px #00000014,
0px 3px 3px -1.5px #00000014, 0px 6px 6px -3px #00000014,
0px 12px 12px -6px #00000014, 0px 24px 24px -12px #00000014;
--stratakit-shadow-tooltip-base:
inset 0px 0px 0px 1px #000000f5, 0px 1px 1px -0.5px #0000000a,
0px 3px 3px -1.5px #0000000a, 0px 6px 6px -3px #0000000a,
0px 12px 12px -6px #0000000a;
}
}
:is(
html:where([data-color-scheme="dark"]),
:host([data-color-scheme="dark"]),
.🥝-root:where([data-kiwi-theme="dark"])
) {
--stratakit-color-bg-mono-base: oklch(55.22% 0.018 253.99);
--stratakit-color-bg-mono-muted: oklch(34.4% 0.011 264.42);
--stratakit-color-bg-mono-faded: oklch(69.04% 0.014 255.53);
--stratakit-color-bg-mono-transparent: oklch(55.22% 0.018 253.99/0.16);
--stratakit-color-bg-accent-base: oklch(54% 0.1 170.26);
--stratakit-color-bg-accent-muted: oklch(33.76% 0.059 170.74);
--stratakit-color-bg-accent-faded: oklch(67.95% 0.077 175.72);
--stratakit-color-bg-accent-transparent: oklch(54% 0.1 170.26/0.16);
--stratakit-color-bg-info-base: oklch(55.68% 0.187 255.82);
--stratakit-color-bg-info-muted: oklch(34.71% 0.108 254.29);
--stratakit-color-bg-info-faded: oklch(68.84% 0.131 251.14);
--stratakit-color-bg-info-transparent: oklch(55.68% 0.187 255.82/0.16);
--stratakit-color-bg-positive-base: oklch(53.64% 0.173 140.57);
--stratakit-color-bg-positive-muted: oklch(33.63% 0.106 139.87);
--stratakit-color-bg-positive-faded: oklch(67.58% 0.14 138.68);
--stratakit-color-bg-positive-transparent: oklch(53.64% 0.173 140.57/0.16);
--stratakit-color-bg-attention-base: oklch(55.63% 0.116 75.58);
--stratakit-color-bg-attention-muted: oklch(34.69% 0.071 77.24);
--stratakit-color-bg-attention-faded: oklch(69.31% 0.129 79.75);
--stratakit-color-bg-attention-transparent: oklch(56.98% 0.174 41.22/0.16);
--stratakit-color-bg-critical-base: oklch(58.02% 0.221 19.39);
--stratakit-color-bg-critical-muted: oklch(36.08% 0.133 17.52);
--stratakit-color-bg-critical-faded: oklch(70.76% 0.147 9.28);
--stratakit-color-bg-critical-transparent: oklch(58.02% 0.221 19.39/0.16);
--stratakit-color-bg-page-depth: oklch(22.52% 0.005 268.32);
--stratakit-color-bg-page-base: oklch(24.37% 0.006 268.32);
--stratakit-color-bg-page-zebra: oklch(0% none none/.08);
--stratakit-color-bg-elevation-base: oklch(26.92% 0.008 268.32);
--stratakit-color-bg-elevation-emphasis: oklch(14.4% 0.003 247.09);
--stratakit-color-bg-elevation-level-1: oklch(29.76% 0.011 268.32);
--stratakit-color-bg-elevation-overlay: oklch(18.15% 0.003 247.97);
--stratakit-color-bg-elevation-level-2: oklch(32.63% 0.014 268.32);
--stratakit-color-bg-neutral-base: oklch(34.4% 0.011 264.42);
--stratakit-color-bg-neutral-muted: oklch(32.63% 0.014 268.32);
--stratakit-color-bg-neutral-faded: oklch(48.26% 0.017 254.7);
--stratakit-color-bg-neutral-inverse: oklch(99.06% 0.002 247.84);
--stratakit-color-bg-glow-base-hover-\%: 4%;
--stratakit-color-bg-glow-base-pressed-\%: 8%;
--stratakit-color-bg-glow-on-surface-accent-hover: oklch(
54% 0.1 170.26/0.12
);
--stratakit-color-bg-glow-on-surface-accent-pressed: oklch(
54% 0.1 170.26/0.16
);
--stratakit-color-bg-glow-on-surface-neutral-hover: oklch(
100% none none/.04
);
--stratakit-color-bg-glow-on-surface-neutral-pressed: oklch(
100% none none/.08
);
--stratakit-color-bg-glow-on-surface-critical-pressed: oklch(
58.02% 0.221 19.39/0.16
);
--stratakit-color-bg-glow-on-surface-critical-hover: oklch(
58.02% 0.221 19.39/0.12
);
--stratakit-color-bg-glow-on-surface-disabled: oklch(100% none none/.04);
--stratakit-color-bg-glow-strong-pressed-\%: 16%;
--stratakit-color-bg-glow-strong-hover-\%: 8%;
--stratakit-color-bg-control-textbox: oklch(24.37% 0.006 268.32);
--stratakit-color-bg-control-scrollbar-surface: oklch(100% none none/.4);
--stratakit-color-bg-control-scrollbar-canvas: oklch(0% none none/.48);
--stratakit-color-bg-control-switch: oklch(22.52% 0.005 268.32);
--stratakit-color-bg-control-slider-track: oklch(34.4% 0.011 264.42);
--stratakit-color-bg-control-select: oklch(24.37% 0.006 268.32);
--stratakit-color-icon-neutral-hover: oklch(99.06% 0.002 247.84);
--stratakit-color-icon-neutral-base: oklch(75.82% 0.01 252.83);
--stratakit-color-icon-neutral-secondary: oklch(62.09% 0.017 257.22);
--stratakit-color-icon-neutral-tertiary: oklch(55.22% 0.018 253.99);
--stratakit-color-icon-neutral-disabled: oklch(48.26% 0.017 254.7);
--stratakit-color-icon-neutral-emphasis: oklch(100% none none);
--stratakit-color-icon-neutral-muted: oklch(48.26% 0.017 254.7);
--stratakit-color-icon-accent-base: oklch(67.95% 0.077 175.72);
--stratakit-color-icon-accent-strong: oklch(87.59% 0.175 168.9);
--stratakit-color-icon-accent-faded: oklch(75.2% 0.062 176.03);
--stratakit-color-icon-info-base: oklch(68.84% 0.131 251.14);
--stratakit-color-icon-info-faded: oklch(75.7% 0.101 250.13);
--stratakit-color-icon-positive-base: oklch(67.58% 0.14 138.68);
--stratakit-color-icon-positive-faded: oklch(74.8% 0.109 138.51);
--stratakit-color-icon-attention-base: oklch(69.31% 0.129 79.75);
--stratakit-color-icon-attention-faded: oklch(76.1% 0.109 83.1);
--stratakit-color-icon-critical-base: oklch(70.76% 0.147 9.28);
--stratakit-color-icon-critical-faded: oklch(77.16% 0.109 6.79);
--stratakit-color-icon-mono-base: oklch(69.04% 0.014 255.53);
--stratakit-color-icon-mono-faded: oklch(75.82% 0.01 252.83);
--stratakit-color-icon-glow-base-hover-\%: 8%;
--stratakit-color-icon-glow-base-pressed-\%: 12%;
--stratakit-color-icon-glow-strong-hover-\%: 16%;
--stratakit-color-icon-glow-strong-pressed-\%: 24%;
--stratakit-color-border-mono-base: oklch(62.09% 0.017 257.22);
--stratakit-color-border-mono-faded: oklch(79.56% 0.008 241.69);
--stratakit-color-border-mono-muted: oklch(41.45% 0.013 256.75);
--stratakit-color-border-accent-base: oklch(60.98% 0.092 173.18);
--stratakit-color-border-accent-faded: oklch(82.26% 0.045 176.56);
--stratakit-color-border-accent-muted: oklch(40.38% 0.071 171.73);
--stratakit-color-border-accent-strong: oklch(87.59% 0.175 168.9);
--stratakit-color-border-info-base: oklch(62.11% 0.161 252.88);
--stratakit-color-border-info-faded: oklch(82.51% 0.071 249.98);
--stratakit-color-border-info-muted: oklch(41.55% 0.136 255.23);
--stratakit-color-border-positive-base: oklch(60.59% 0.164 139.21);
--stratakit-color-border-positive-muted: oklch(40.36% 0.129 140.08);
--stratakit-color-border-positive-faded: oklch(82.11% 0.078 138.1);
--stratakit-color-border-attention-base: oklch(62.6% 0.132 74.4);
--stratakit-color-border-attention-muted: oklch(41.7% 0.086 77.28);
--stratakit-color-border-attention-faded: oklch(82.78% 0.08 84.58);
--stratakit-color-border-critical-base: oklch(64.49% 0.185 12.51);
--stratakit-color-border-critical-muted: oklch(43.46% 0.163 18.38);
--stratakit-color-border-critical-faded: oklch(83.74% 0.075 6.15);
--stratakit-color-border-glow-base-hover-\%: 8%;
--stratakit-color-border-glow-base-pressed-\%: 12%;
--stratakit-color-border-glow-base-default: oklch(100% none none/.08);
--stratakit-color-border-glow-on-surface-faded: oklch(100% none none/.04);
--stratakit-color-border-glow-on-surface-disabled: oklch(
100% none none/.08
);
--stratakit-color-border-glow-strong-hover-\%: 16%;
--stratakit-color-border-glow-strong-pressed-\%: 24%;
--stratakit-color-border-glow-strong-default: oklch(100% none none/.16);
--stratakit-color-border-neutral-base: oklch(41.45% 0.013 256.75);
--stratakit-color-border-neutral-muted: oklch(32.63% 0.014 268.32);
--stratakit-color-border-neutral-faded: oklch(62.09% 0.017 257.22);
--stratakit-color-border-neutral-inverse: oklch(99.06% 0.002 247.84);
--stratakit-color-border-neutral-disabled: oklch(48.26% 0.017 254.7);
--stratakit-color-border-elevation-base: oklch(0% none none/.64);
--stratakit-color-border-page-base: oklch(100% none none/.08);
--stratakit-color-border-page-depth: oklch(100% none none/.08);
--stratakit-color-border-control-scrollbar-canvas: oklch(
100% none none/.24
);
--stratakit-color-border-control-switch: oklch(41.45% 0.013 256.75);
--stratakit-color-border-control-checkbox: oklch(48.26% 0.017 254.7);
--stratakit-color-border-control-radio: oklch(48.26% 0.017 254.7);
--stratakit-color-border-control-textbox: oklch(48.26% 0.017 254.7);
--stratakit-color-border-control-select: oklch(48.26% 0.017 254.7);
--stratakit-color-text-mono-base: oklch(69.04% 0.014 255.53);
--stratakit-color-text-mono-faded: oklch(75.82% 0.01 252.83);
--stratakit-color-text-accent-base: oklch(67.95% 0.077 175.72);
--stratakit-color-text-accent-faded: oklch(75.2% 0.062 176.03);
--stratakit-color-text-accent-strong: oklch(87.59% 0.175 168.9);
--stratakit-color-text-info-base: oklch(68.84% 0.131 251.14);
--stratakit-color-text-info-faded: oklch(75.7% 0.101 250.13);
--stratakit-color-text-positive-base: oklch(67.58% 0.14 138.68);
--stratakit-color-text-positive-faded: oklch(74.8% 0.109 138.51);
--stratakit-color-text-attention-base: oklch(69.31% 0.129 79.75);
--stratakit-color-text-attention-faded: oklch(76.1% 0.109 83.1);
--stratakit-color-text-critical-base: oklch(70.76% 0.147 9.28);
--stratakit-color-text-critical-faded: oklch(77.16% 0.109 6.79);
--stratakit-color-text-neutral-emphasis: oklch(100% none none);
--stratakit-color-text-neutral-primary: oklch(99.06% 0.002 247.84);
--stratakit-color-text-neutral-secondary: oklch(79.56% 0.008 241.69);
--stratakit-color-text-neutral-tertiary: oklch(69.04% 0.014 255.53);
--stratakit-color-text-neutral-disabled: oklch(48.26% 0.017 254.7);
--stratakit-color-text-glow-base-hover-\%: 8%;
--stratakit-color-text-glow-base-pressed-\%: 12%;
--stratakit-color-text-glow-strong-hover-\%: 16%;
--stratakit-color-text-glow-strong-pressed-\%: 24%;
--stratakit-color-static-black: oklch(0% none none);
--stratakit-color-static-white: oklch(100% none none);
--stratakit-color-static-accent: oklch(54% 0.1 170.26);
--stratakit-color-glow-hue: oklch(100% none none);
--stratakit-color-brand-logo: oklch(94.86% 0.002 247.84);
--stratakit-shadow-surface-xs:
0px 1px 0px 0px oklch(0% none none/.08),
0px 0px 0px 1px oklch(0% none none/.16),
inset 0px 0px 0px 1px oklch(100% none none/.08),
0px 1px 1px -0.5px oklch(0% none none/.16);
--stratakit-shadow-surface-sm:
0px 1px 0px 0px oklch(0% none none/.08),
0px 0px 0px 1px oklch(0% none none/.16),
inset 0px 0px 0px 1px oklch(100% none none/.08),
0px 1px 1px -0.5px oklch(0% none none/.16),
0px 3px 3px -1.5px oklch(0% none none/.16);
--stratakit-shadow-surface-md:
0px 1px 0px 0px oklch(0% none none/.08),
0px 0px 0px 1px oklch(0% none none/.16),
inset 0px 0px 0px 1px oklch(100% none none/.08),
0px 1px 1px -0.5px oklch(0% none none/.16),
0px 3px 3px -1.5px oklch(0% none none/.16),
0px 6px 6px -3px oklch(0% none none/.16);
--stratakit-shadow-surface-lg:
0px 1px 0px 0px oklch(0% none none/.08),
0px 0px 0px 1px oklch(0% none none/.16),
inset 0px 0px 0px 1px oklch(100% none none/.08),
0px 1px 1px -0.5px oklch(0% none none/.16),
0px 3px 3px -1.5px oklch(0% none none/.16),
0px 6px 6px -3px oklch(0% none none/.16),
0px 12px 12px -6px oklch(0% none none/.16);
--stratakit-shadow-surface-xl:
0px 1px 0px 0px oklch(0% none none/.08),
0px 0px 0px 1px oklch(0% none none/.16),
inset 0px 0px 0px 1px oklch(100% none none/.08),
0px 1px 1px -0.5px oklch(0% none none/.16),
0px 3px 3px -1.5px oklch(0% none none/.16),
0px 6px 6px -3px oklch(0% none none/.16),
0px 12px 12px -6px oklch(0% none none/.16),
0px 24px 24px -12px oklch(0% none none/.16);
--stratakit-shadow-button-base-drop:
0px 1px 1px -0.5px oklch(0% none none/.16),
0px 3px 3px -1.5px oklch(0% none none/.16);
--stratakit-shadow-button-base-inset: inset 0px -1px 0px 0px
oklch(0% none none/.08);
--stratakit-shadow-dialog-base:
0px 1px 0px 0px oklch(0% none none/.08),
0px 0px 0px 1px oklch(0% none none/.8),
inset 0px 0px 0px 1px oklch(100% none none/.12),
0px 1px 1px -0.5px oklch(0% none none/.16),
0px 3px 3px -1.5px oklch(0% none none/.16),
0px 6px 6px -3px oklch(0% none none/.16),
0px 12px 12px -6px oklch(0% none none/.16),
0px 24px 24px -12px oklch(0% none none/.16);
--stratakit-shadow-dropdown-base:
0px 1px 0px 0px oklch(0% none none/.08),
0px 0px 0px 1px oklch(0% none none/.48),
inset 0px 0px 0px 1px oklch(100% none none/.12),
0px 1px 1px -0.5px oklch(0% none none/.12),
0px 3px 3px -1.5px oklch(0% none none/.12),
0px 6px 6px -3px oklch(0% none none/.12),
0px 12px 12px -6px oklch(0% none none/.12),
0px 24px 24px -12px oklch(0% none none/.12);
--stratakit-shadow-input-base:
inset 0px 1px 2px 0px oklch(0% none none/.16),
inset 0px 2px 4px 0px oklch(0% none none/.16);
--stratakit-shadow-table-strong: 0px -1px 0px 0px oklch(87.59% 0.175 168.9);
--stratakit-shadow-toolbar-base:
0px 1px 0px 0px oklch(0% none none/.08),
0px 0px 0px 1px oklch(0% none none/.8),
inset 0px 0px 0px 1px oklch(100% none none/.08),
0px 1px 1px -0.5px oklch(0% none none/.16),
0px 3px 3px -1.5px oklch(0% none none/.16),
0px 6px 6px -3px oklch(0% none none/.16),
0px 12px 12px -6px oklch(0% none none/.16),
0px 24px 24px -12px oklch(0% none none/.16);
--stratakit-shadow-tooltip-base:
inset 0px 0px 0px 1px oklch(0% none none/.8),
0px 1px 1px -0.5px oklch(0% none none/.16),
0px 3px 3px -1.5px oklch(0% none none/.16),
0px 6px 6px -3px oklch(0% none none/.16),
0px 12px 12px -6px oklch(0% none none/.16);
}
html:where([data-color-scheme="dark"]),
:host([data-color-scheme="dark"]),
.🥝-root:where([data-kiwi-theme="dark"]) {
color-scheme: dark;
--stratakit-color-border-shadow-base: oklch(100% none none/.08);
--stratakit-color-border-shadow-strong: oklch(100% none none/.16);
}
@supports not (color: oklch(0% 0 0)) {
:is(
html:where([data-color-scheme="dark"]),
:host([data-color-scheme="dark"]),
.🥝-root:where([data-kiwi-theme="dark"])
) {
--stratakit-color-bg-mono-base: #6b737d;
--stratakit-color-bg-mono-muted: #36393f;
--stratakit-color-bg-mono-faded: #969ca4;
--stratakit-color-bg-mono-transparent: #6b737d29;
--stratakit-color-bg-accent-base: #188166;
--stratakit-color-bg-accent-muted: #0d4133;
--stratakit-color-bg-accent-faded: #61a896;
--stratakit-color-bg-accent-transparent: #18816629;
--stratakit-color-bg-info-base: #0470dd;
--stratakit-color-bg-info-muted: #033970;
--stratakit-color-bg-info-faded: #589fe9;
--stratakit-color-bg-info-transparent: #0470dd29;
--stratakit-color-bg-positive-base: #228404;
--stratakit-color-bg-positive-muted: #114302;
--stratakit-color-bg-positive-faded: #68ab53;
--stratakit-color-bg-positive-transparent: #22840429;
--stratakit-color-bg-attention-base: #9a6804;
--stratakit-color-bg-attention-muted: #4e3402;
--stratakit-color-bg-attention-faded: #c6922c;
--stratakit-color-bg-attention-transparent: #c7480129;
--stratakit-color-bg-critical-base: #df1c41;
--stratakit-color-bg-critical-muted: #730e22;
--stratakit-color-bg-critical-faded: #ec768d;
--stratakit-color-bg-critical-transparent: #df1c4129;
--stratakit-color-bg-page-depth: #1b1c1e;
--stratakit-color-bg-page-base: #1f2023;
--stratakit-color-bg-page-zebra: #00000014;
--stratakit-color-bg-elevation-base: #24262a;
--stratakit-color-bg-elevation-emphasis: #090a0b;
--stratakit-color-bg-elevation-level-1: #2b2d33;
--stratakit-color-bg-elevation-overlay: #111213;
--stratakit-color-bg-elevation-level-2: #31343c;
--stratakit-color-bg-neutral-base: #36393f;
--stratakit-color-bg-neutral-muted: #31343c;
--stratakit-color-bg-neutral-faded: #585f68;
--stratakit-color-bg-neutral-inverse: #fbfcfd;
--stratakit-color-bg-glow-base-hover-\%: 4%;
--stratakit-color-bg-glow-base-pressed-\%: 8%;
--stratakit-color-bg-glow-on-surface-accent-hover: #1881661f;
--stratakit-color-bg-glow-on-surface-accent-pressed: #18816629;
--stratakit-color-bg-glow-on-surface-neutral-hover: #ffffff0a;
--stratakit-color-bg-glow-on-surface-neutral-pressed: #ffffff14;
--stratakit-color-bg-glow-on-surface-critical-pressed: #df1c4129;
--stratakit-color-bg-glow-on-surface-critical-hover: #df1c411f;
--stratakit-color-bg-glow-on-surface-disabled: #ffffff0a;
--stratakit-color-bg-glow-strong-pressed-\%: 16%;
--stratakit-color-bg-glow-strong-hover-\%: 8%;
--stratakit-color-bg-control-textbox: #1f2023;
--stratakit-color-bg-control-scrollbar-surface: #fff6;
--stratakit-color-bg-control-scrollbar-canvas: #0000007a;
--stratakit-color-bg-control-switch: #1b1c1e;
--stratakit-color-bg-control-slider-track: #36393f;
--stratakit-color-bg-control-select: #1f2023;
--stratakit-color-icon-neutral-hover: #fbfcfd;
--stratakit-color-icon-neutral-base: #acb1b7;
--stratakit-color-icon-neutral-secondary: #808791;
--stratakit-color-icon-neutral-tertiary: #6b737d;
--stratakit-color-icon-neutral-disabled: #585f68;
--stratakit-color-icon-neutral-emphasis: #fff;
--stratakit-color-icon-neutral-muted: #585f68;
--stratakit-color-icon-accent-base: #61a896;
--stratakit-color-icon-accent-strong: #06fac2;
--stratakit-color-icon-accent-faded: #84bcad;
--stratakit-color-icon-info-base: #589fe9;
--stratakit-color-icon-info-faded: #7eb5ee;
--stratakit-color-icon-positive-base: #68ab53;
--stratakit-color-icon-positive-faded: #8abe7a;
--stratakit-color-icon-attention-base: #c6922c;
--stratakit-color-icon-attention-faded: #d3ab5b;
--stratakit-color-icon-critical-base: #ec768d;
--stratakit-color-icon-critical-faded: #f097a9;
--stratakit-color-icon-mono-base: #969ca4;
--stratakit-color-icon-mono-faded: #acb1b7;
--stratakit-color-icon-glow-base-hover-\%: 8%;
--stratakit-color-icon-glow-base-pressed-\%: 12%;
--stratakit-color-icon-glow-strong-hover-\%: 16%;
--stratakit-color-icon-glow-strong-pressed-\%: 24%;
--stratakit-color-border-mono-base: #808791;
--stratakit-color-border-mono-faded: #b8bdc1;
--stratakit-color-border-mono-muted: #474c53;
--stratakit-color-border-accent-base: #3d957e;
--stratakit-color-border-accent-faded: #a7cfc4;
--stratakit-color-border-accent-muted: #125544;
--stratakit-color-border-accent-strong: #06fac2;
--stratakit-color-border-info-base: #3088e4;
--stratakit-color-border-info-faded: #a3caf3;
--stratakit-color-border-info-muted: #024a93;
--stratakit-color-border-positive-base: #46982c;
--stratakit-color-border-positive-muted: #175801;
--stratakit-color-border-positive-faded: #acd1a0;
--stratakit-color-border-attention-base: #b67a02;
--stratakit-color-border-attention-muted: #664502;
--stratakit-color-border-attention-faded: #dfc38a;
--stratakit-color-border-critical-base: #e7516e;
--stratakit-color-border-critical-muted: #96122c;
--stratakit-color-border-critical-faded: #f5b6c2;
--stratakit-color-border-glow-base-hover-\%: 8%;
--stratakit-color-border-glow-base-pressed-\%: 12%;
--stratakit-color-border-glow-base-default: #ffffff14;
--stratakit-color-border-glow-on-surface-faded: #ffffff0a;
--stratakit-color-border-glow-on-surface-disabled: #ffffff14;
--stratakit-color-border-glow-strong-hover-\%: 16%;
--stratakit-color-border-glow-strong-pressed-\%: 24%;
--stratakit-color-border-glow-strong-default: #ffffff29;
--stratakit-color-border-neutral-base: #474c53;
--stratakit-color-border-neutral-muted: #31343c;
--stratakit-color-border-neutral-faded: #808791;
--stratakit-color-border-neutral-inverse: #fbfcfd;
--stratakit-color-border-neutral-disabled: #585f68;
--stratakit-color-border-elevation-base: #000000a3;
--stratakit-color-border-page-base: #ffffff14;
--stratakit-color-border-page-depth: #ffffff14;
--stratakit-color-border-control-scrollbar-canvas: #ffffff3d;
--stratakit-color-border-control-switch: #474c53;
--stratakit-color-border-control-checkbox: #585f68;
--stratakit-color-border-control-radio: #585f68;
--stratakit-color-border-control-textbox: #585f68;
--stratakit-color-border-control-select: #585f68;
--stratakit-color-text-mono-base: #969ca4;
--stratakit-color-text-mono-faded: #acb1b7;
--stratakit-color-text-accent-base: #61a896;
--stratakit-color-text-accent-faded: #84bcad;
--stratakit-color-text-accent-strong: #06fac2;
--stratakit-color-text-info-base: #589fe9;
--stratakit-color-text-info-faded: #7eb5ee;
--stratakit-color-text-positive-base: #68ab53;
--stratakit-color-text-positive-faded: #8abe7a;
--stratakit-color-text-attention-base: #c6922c;
--stratakit-color-text-attention-faded: #d3ab5b;
--stratakit-color-text-critical-base: #ec768d;
--stratakit-color-text-critical-faded: #f097a9;
--stratakit-color-text-neutral-emphasis: #fff;
--stratakit-color-text-neutral-primary: #fbfcfd;
--stratakit-color-text-neutral-secondary: #b8bdc1;
--stratakit-color-text-neutral-tertiary: #969ca4;
--stratakit-color-text-neutral-disabled: #585f68;
--stratakit-color-text-glow-base-hover-\%: 8%;
--stratakit-color-text-glow-base-pressed-\%: 12%;
--stratakit-color-text-glow-strong-hover-\%: 16%;
--stratakit-color-text-glow-strong-pressed-\%: 24%;
--stratakit-color-static-black: #000;
--stratakit-color-static-white: #fff;
--stratakit-color-static-accent: #188166;
--stratakit-color-glow-hue: #fff;
--stratakit-color-brand-logo: #edeeef;
--stratakit-shadow-surface-xs:
0px 1px 0px 0px #00000014, 0px 0px 0px 1px #00000029,
inset 0px 0px 0px 1px #ffffff14, 0px 1px 1px -0.5px #00000029;
--stratakit-shadow-surface-sm:
0px 1px 0px 0px #00000014, 0px 0px 0px 1px #00000029,
inset 0px 0px 0px 1px #ffffff14, 0px 1px 1px -0.5px #00000029,
0px 3px 3px -1.5px #00000029;
--stratakit-shadow-surface-md:
0px 1px 0px 0px #00000014, 0px 0px 0px 1px #00000029,
inset 0px 0px 0px 1px #ffffff14, 0px 1px 1px -0.5px #00000029,
0px 3px 3px -1.5px #00000029, 0px 6px 6px -3px #00000029;
--stratakit-shadow-surface-lg:
0px 1px 0px 0px #00000014, 0px 0px 0px 1px #00000029,
inset 0px 0px 0px 1px #ffffff14, 0px 1px 1px -0.5px #00000029,
0px 3px 3px -1.5px #00000029, 0px 6px 6px -3px #00000029,
0px 12px 12px -6px #00000029;
--stratakit-shadow-surface-xl:
0px 1px 0px 0px #00000014, 0px 0px 0px 1px #00000029,
inset 0px 0px 0px 1px #ffffff14, 0px 1px 1px -0.5px #00000029,
0px 3px 3px -1.5px #00000029, 0px 6px 6px -3px #00000029,
0px 12px 12px -6px #00000029, 0px 24px 24px -12px #00000029;
--stratakit-shadow-button-base-drop:
0px 1px 1px -0.5px #00000029, 0px 3px 3px -1.5px #00000029;
--stratakit-shadow-button-base-inset: inset 0px -1px 0px 0px #00000014;
--stratakit-shadow-dialog-base:
0px 1px 0px 0px #00000014, 0px 0px 0px 1px #000c,
inset 0px 0px 0px 1px #ffffff1f, 0px 1px 1px -0.5px #00000029,
0px 3px 3px -1.5px #00000029, 0px 6px 6px -3px #00000029,
0px 12px 12px -6px #00000029, 0px 24px 24px -12px #00000029;
--stratakit-shadow-dropdown-base:
0px 1px 0px 0px #00000014, 0px 0px 0px 1px #0000007a,
inset 0px 0px 0px 1px #ffffff1f, 0px 1px 1px -0.5px #0000001f,
0px 3px 3px -1.5px #0000001f, 0px 6px 6px -3px #0000001f,
0px 12px 12px -6px #0000001f, 0px 24px 24px -12px #0000001f;
--stratakit-shadow-input-base:
inset 0px 1px 2px 0px #00000029, inset 0px 2px 4px 0px #00000029;
--stratakit-shadow-table-strong: 0px -1px 0px 0px #06fac2;
--stratakit-shadow-toolbar-base:
0px 1px 0px 0px #00000014, 0px 0px 0px 1px #000c,
inset 0px 0px 0px 1px #ffffff14, 0px 1px 1px -0.5px #00000029,
0px 3px 3px -1.5px #00000029, 0px 6px 6px -3px #00000029,
0px 12px 12px -6px #00000029, 0px 24px 24px -12px #00000029;
--stratakit-shadow-tooltip-base:
inset 0px 0px 0px 1px #000c, 0px 1px 1px -0.5px #00000029,
0px 3px 3px -1.5px #00000029, 0px 6px 6px -3px #00000029,
0px 12px 12px -6px #00000029;
}
}
:root,
:host {
--stratakit-font-family-sans:
"InterVariable", "Noto Sans", "Open Sans", sans-serif;
--stratakit-font-family-mono:
"Geist Mono", "Noto Sans Mono", ui-monospace, "Segoe UI Mono", Consolas,
monospace;
}
:is(:root, :host) {
--stratakit-font-size-8: 0.5rem;
--stratakit-font-size-10: 0.625rem;
--stratakit-font-size-11: 0.6875rem;
--stratakit-font-size-12: 0.75rem;
--stratakit-font-size-14: 0.875rem;
--stratakit-font-size-16: 1rem;
--stratakit-font-size-20: 1.25rem;
--stratakit-font-size-24: 1.5rem;
--stratakit-font-size-28: 1.75rem;
--stratakit-font-size-32: 2rem;
--stratakit-font-size-40: 2.5rem;
--stratakit-font-size-48: 3rem;
}
.🥝-root:where([data-kiwi-density="dense"]) {
font-size: var(--stratakit-font-size-12);
line-height: 1.3333;
}
@font-feature-values InterVariable {
@character-variant {
alt-double-s: 7;
cv04: 4;
cv07: 7;
single-story-a: 11;
open-6: 3;
cv11: 11;
cv03: 3;
cv13: 13;
uc-g-with-spur: 10;
lc-l-with-tail: 5;
cv01: 1;
cv09: 9;
simplified-u: 6;
cv05: 5;
cv08: 8;
uc-i-with-serif: 8;
cv06: 6;
compact-lc-t: 13;
compact-lc-f: 12;
cv02: 2;
alt-3: 9;
alt-1: 1;
cv12: 12;
open-9: 4;
cv10: 10;
open-4: 2;
}
@styleset {
ss06: 6;
ss03: 3;
round-quotes-and-commas: 3;
circled-characters: 5;
ss08: 8;
ss05: 5;
square-punctuation: 7;
ss01: 1;
open-digits: 1;
ss04: 4;
squared-characters: 6;
ss07: 7;
square-quotes: 8;
disambiguation-except-zero: 4;
disambiguation: 2;
ss02: 2;
}
}
html {
background-color: var(--stratakit-color-bg-page-base);
scrollbar-color: var(--stratakit-color-bg-control-scrollbar-surface)
var(--stratakit-color-bg-page-base);
}
body {
font-size: var(--stratakit-font-size-14);
line-height: 1.4286;
}
:is(body, .🥝-root) {
font-family: var(--stratakit-font-family-sans);
font-variant-alternates: character-variant(
alt-1,
alt-3,
lc-l-with-tail,
uc-i-with-serif
);
color: var(--stratakit-color-text-neutral-primary);
--🥝focus-outline: 2px solid var(--stratakit-color-border-accent-strong);
--🥝focus-outline-offset: 1px;
--🥝selection-color-bg: var(--stratakit-color-bg-accent-base);
--🥝selection-color-text: var(--stratakit-color-text-neutral-emphasis);
}
@media (forced-colors: active) {
:is(body, .🥝-root) {
--🥝focus-outline: 2px solid Highlight;
}
}
::selection {
background-color: var(--🥝selection-color-bg);
color: var(--🥝selection-color-text);
}
:focus-visible {
outline: var(--🥝focus-outline);
outline-offset: var(--🥝focus-outline-offset);
}
}
@layer itwinui.components.base, itwinui.components.modifiers, itwinui.components.states;
@layer itwinui.components {
@layer base {
.🥝-icon {
width: var(--🥝icon-size, 1rem);
height: var(--🥝icon-size, 1rem);
color: var(--🥝icon-color);
flex-shrink: 0;
transition: color 0.15s ease-out;
}
}
@layer modifiers {
.🥝-icon:where([data-kiwi-size="regular"]) {
--🥝icon-size: 1rem;
}
.🥝-icon:where([data-kiwi-size="large"]) {
--🥝icon-size: 1.5rem;
}
}
@layer base {
.🥝-disclosure-arrow {
rotate: var(--🥝disclosure-arrow-rotate);
margin-inline-end: calc(var(--stratakit-space-x2) * -1);
}
@media (prefers-reduced-motion: no-preference) {
.🥝-disclosure-arrow {
transition: rotate 0.15s ease-in-out;
}
}
}
@layer base {
.🥝-chevron-down {
rotate: var(--🥝chevron-down-rotate);
}
@media (prefers-reduced-motion: no-preference) {
.🥝-chevron-down {
transition: rotate 0.15s ease-in-out;
}
}
}
@media (forced-colors: active) {
.🥝-icon {
--🥝icon-color: currentColor;
}
}
}
@layer itwinui.components {
@layer base {
.🥝-visually-hidden:where(:not(:active, :focus-within)) {
clip-path: inset(50%) !important;
white-space: nowrap !important;
user-select: none !important;
block-size: 1px !important;
inline-size: 1px !important;
position: absolute !important;
overflow: hidden !important;
}
}
@layer base {
.🥝-dot {
inline-size: var(--🥝dot-size, 4px);
block-size: var(--🥝dot-size, 4px);
background-color: var(--stratakit-color-bg-accent-base);
border: 1px solid var(--stratakit-color-border-glow-strong-default);
border-radius: 9999px;
display: inline-block;
}
}
@media (forced-colors: active) {
.🥝-dot {
background-color: canvastext;
}
}
@layer base {
.🥝-ghost-aligner:where([data-kiwi-ghost-align="inline"]) {
margin-inline: calc(-1 * var(--🥝ghost-inline-offset));
}
.🥝-ghost-aligner:where([data-kiwi-ghost-align="inline-start"]) {
margin-inline-start: calc(-1 * var(--🥝ghost-inline-offset));
}
.🥝-ghost-aligner:where([data-kiwi-ghost-align="inline-end"]) {
margin-inline-end: calc(-1 * var(--🥝ghost-inline-offset));
}
.🥝-ghost-aligner:where([data-kiwi-ghost-align="block"]) {
margin-block: calc(-1 * var(--🥝ghost-block-offset));
}
.🥝-ghost-aligner:where([data-kiwi-ghost-align="block-start"]) {
margin-block-start: calc(-1 * var(--🥝ghost-block-offset));
}
.🥝-ghost-aligner:where([data-kiwi-ghost-align="block-end"]) {
margin-block-end: calc(-1 * var(--🥝ghost-block-offset));
}
}
@layer base {
.🥝-anchor {
cursor: pointer;
font-size: var(--stratakit-font-size-12);
text-underline-offset: var(
--🌀anchor-state--default,
var(--stratakit-space-x05)
)
var(--🌀anchor-state--hover, var(--stratakit-space-x1))
var(--🌀anchor-state--pressed, var(--stratakit-space-x1));
text-decoration-color: var(--🌀anchor-state--default, currentColor)
var(--🌀anchor-state--hover, currentColor)
var(--🌀anchor-state--pressed, transparent);
font-weight: 500;
text-decoration-line: underline;
}
.🥝-anchor:where(:has(.🥝-anchor-text)) {
text-decoration-line: none;
}
.🥝-anchor {
color: var(--🥝anchor-color, var(--stratakit-color-text-neutral-primary));
-webkit-tap-highlight-color: var(
--stratakit-color-bg-glow-on-surface-neutral-pressed
);
border-radius: 4px;
transition:
color 0.15s ease-out,
text-decoration-color 0.15s ease-out,
text-underline-offset 0.15s ease-out;
}
}
@layer modifiers {
.🥝-anchor:where([data-kiwi-tone="accent"]) {
--🥝anchor-color: var(
--🌀anchor-state--default,
var(--stratakit-color-text-accent-strong)
)
var(
--🌀anchor-state--hover,
color-mix(
in oklch,
var(--stratakit-color-text-accent-strong) 100%,
var(--stratakit-color-glow-hue)
var(--stratakit-color-text-glow-strong-hover-\%)
)
)
var(
--🌀anchor-state--pressed,
color-mix(
in oklch,
var(--stratakit-color-text-accent-strong) 100%,
var(--stratakit-color-glow-hue)
var(--stratakit-color-text-glow-strong-pressed-\%)
)
);
-webkit-tap-highlight-color: var(
--stratakit-color-bg-glow-on-surface-accent-pressed
);
}
.🥝-anchor:where([data-kiwi-tone="critical"]) {
--🥝anchor-color: var(
--🌀anchor-state--default,
var(--stratakit-color-text-critical-base)
)
var(
--🌀anchor-state--hover,
color-mix(
in oklch,
var(--stratakit-color-text-critical-base) 100%,
var(--stratakit-color-glow-hue)
var(--stratakit-color-text-glow-strong-hover-\%)
)
)
var(
--🌀anchor-state--pressed,
color-mix(
in oklch,
var(--stratakit-color-text-critical-base) 100%,
var(--stratakit-color-glow-hue)
var(--stratakit-color-text-glow-strong-pressed-\%)
)
);
-webkit-tap-highlight-color: var(
--stratakit-color-bg-glow-on-surface-critical-pressed
);
}
}
@layer states {
@media (any-hover: hover) {
.🥝-anchor:where(:hover) {
--🌀anchor-state: var(--🌀anchor-state--hover);
}
}
.🥝-anchor:where(:active) {
--🌀anchor-state: var(--🌀anchor-state--pressed);
}
.🥝-anchor:where(:focus-visible) {
--🥝focus-outline-offset: var(--stratakit-space-x05);
}
.🥝-anchor:where(:disabled, [aria-disabled="true"]) {
--🥝anchor-color: var(--stratakit-color-text-neutral-disabled);
cursor: not-allowed;
text-decoration: none;
}
}
@layer base.🌀 {
.🥝-anchor {
--🌀anchor-state: var(--🌀anchor-state--default);
--🌀anchor-state--default: var(--🌀anchor-state,);
--🌀anchor-state--hover: var(--🌀anchor-state,);
--🌀anchor-state--pressed: var(--🌀anchor-state,);
}
}
@layer base {
.🥝-anchor-text {
unicode-bidi: bidi-override;
text-decoration-line: underline;
}
}
@layer base {
.🥝-anchor-external-marker {
user-select: none;
}
}
@media (forced-colors: active) {
.🥝-anchor:where(button) {
color: linktext;
}
}
@layer base {
.🥝-avatar {
--🥝avatar-background-color: var(--stratakit-color-bg-mono-base);
block-size: var(--🥝avatar-size);
inline-size: var(--🥝avatar-size);
background-color: var(--🥝avatar-background-color);
color: var(--stratakit-color-text-neutral-emphasis);
user-select: none;
border-radius: 50%;
place-items: center;
display: inline-grid;
position: relative;
overflow: hidden;
}
.🥝-avatar::after {
content: "";
border-radius: inherit;
box-shadow: 0px 0px 0px 1px
var(--stratakit-color-border-glow-strong-default) inset;
position: absolute;
inset: 0px;
}
.🥝-avatar > img {
background-color: inherit;
block-size: inherit;
inline-size: inherit;
object-fit: cover;
object-position: center center;
}
}
@layer modifiers {
.🥝-avatar:where([data-kiwi-size="small"]) {
--🥝avatar-size: 1rem;
--🥝avatar-font-size: var(--stratakit-font-size-8);
--🥝icon-size: 0.75rem;
}
.🥝-avatar:where([data-kiwi-size="medium"]) {
--🥝avatar-size: 1.5rem;
--🥝avatar-font-size: var(--stratakit-font-size-10);
--🥝icon-size: 1rem;
}
.🥝-avatar:where([data-kiwi-size="large"]) {
--🥝avatar-size: 2rem;
--🥝avatar-font-size: var(--stratakit-font-size-12);
--🥝icon-size: 1rem;
}
.🥝-avatar:where([data-kiwi-size="xlarge"]) {
--🥝avatar-size: 3rem;
--🥝avatar-font-size: var(--stratakit-font-size-16);
--🥝icon-size: 1.5rem;
}
}
@layer base {
.🥝-avatar-initials {
font-size: var(--🥝avatar-font-size);
text-align: center;
text-transform: uppercase;
font-weight: 600;
}
}
@media (forced-colors: active) {
.🥝-avatar {
border: 1px solid;
}
}
@layer base {
.🥝-badge {
font-size: var(--stratakit-font-size-12);
line-height: 1.3333;
}
.🥝-badge {
white-space: nowrap;
box-shadow: 0px 0px 0px 1px var(--🥝badge-border-color) inset;
background-color: var(--🥝badge-background-color);
color: var(--🥝badge-text-color);
block-size: 1.25rem;
padding-inline: var(--stratakit-space-x2);
border-radius: 9999px;
flex-shrink: 0;
justify-content: center;
align-items: center;
font-weight: 500;
display: inline-flex;
}
}
@layer modifiers {
.🥝-badge:where([data-kiwi-variant="solid"]) {
--🥝badge-border-color: var(--stratakit-color-border-glow-strong-default);
--🥝badge-text-color: var(--stratakit-color-text-neutral-emphasis);
}
.🥝-badge:where([data-kiwi-variant="solid"]):where(
[data-kiwi-tone="neutral"]
) {
--🥝badge-background-color: var(--stratakit-color-bg-mono-base);
}
.🥝-badge:where([data-kiwi-variant="solid"]):where(
[data-kiwi-tone="info"]
) {
--🥝badge-background-color: var(--stratakit-color-bg-info-base);
}
.🥝-badge:where([data-kiwi-variant="solid"]):where(
[data-kiwi-tone="positive"]
) {
--🥝badge-background-color: var(--stratakit-color-bg-positive-base);
}
.🥝-badge:where([data-kiwi-variant="solid"]):where(
[data-kiwi-tone="attention"]
) {
--🥝badge-background-color: var(--stratakit-color-bg-attention-base);
}
.🥝-badge:where([data-kiwi-variant="solid"]):where(
[data-kiwi-tone="critical"]
) {
--🥝badge-background-color: var(--stratakit-color-bg-critical-base);
}
.🥝-badge:where([data-kiwi-variant="solid"]):where(
[data-kiwi-tone="accent"]
) {
--🥝badge-background-color: var(--stratakit-color-bg-accent-base);
}
.🥝-badge:where([data-kiwi-variant="muted"]):where(
[data-kiwi-tone="neutral"]
) {
--🥝badge-background-color: var(--stratakit-color-bg-mono-muted);
--🥝badge-border-color: var(--stratakit-color-border-mono-muted);
--🥝badge-text-color: var(--stratakit-color-text-mono-faded);
}
.🥝-badge:where([data-kiwi-variant="muted"]):where(
[data-kiwi-tone="info"]
) {
--🥝badge-background-color: var(--stratakit-color-bg-info-muted);
--🥝badge-border-color: var(--stratakit-color-border-info-muted);
--🥝badge-text-color: var(--stratakit-color-text-info-faded);
}
.🥝-badge:where([data-kiwi-variant="muted"]):where(
[data-kiwi-tone="positive"]
) {
--🥝badge-background-color: var(--stratakit-color-bg-positive-muted);
--🥝badge-border-color: var(--stratakit-color-border-positive-muted);
--🥝badge-text-color: var(--stratakit-color-text-positive-faded);
}
.🥝-badge:where([data-kiwi-variant="muted"]):where(
[data-kiwi-tone="attention"]
) {
--🥝badge-background-color: var(--stratakit-color-bg-attention-muted);
--🥝badge-border-color: var(--stratakit-color-border-attention-muted);
--🥝badge-text-color: var(--stratakit-color-text-attention-faded);
}
.🥝-badge:where([data-kiwi-variant="muted"]):where(
[data-kiwi-tone="critical"]
) {
--🥝badge-background-color: var(--stratakit-color-bg-critical-muted);
--🥝badge-border-color: var(--stratakit-color-border-critical-muted);
--🥝badge-text-color: var(--stratakit-color-text-critical-faded);
}
.🥝-badge:where([data-kiwi-variant="muted"]):where(
[data-kiwi-tone="accent"]
) {
--🥝badge-background-color: var(--stratakit-color-bg-accent-muted);
--🥝badge-border-color: var(--stratakit-color-border-accent-muted);
--🥝badge-text-color: var(--stratakit-color-text-accent-faded);
}
.🥝-badge:where([data-kiwi-variant="outline"]) {
--🥝badge-background-color: transparent;
}
.🥝-badge:where([data-kiwi-variant="outline"]):where(
[data-kiwi-tone="neutral"]
) {
--🥝badge-text-color: var(--stratakit-color-text-mono-base);
--🥝badge-border-color: var(--stratakit-color-border-mono-base);
}
.🥝-badge:where([data-kiwi-variant="outline"]):where(
[data-kiwi-tone="info"]
) {
--🥝badge-text-color: var(--stratakit-color-text-info-base);
--🥝badge-border-color: var(--stratakit-color-border-info-base);
}
.🥝-badge:where([data-kiwi-variant="outline"]):where(
[data-kiwi-tone="positive"]
) {
--🥝badge-text-color: var(--stratakit-color-text-positive-base);
--🥝badge-border-color: var(--stratakit-color-border-positive-base);
}
.🥝-badge:where([data-kiwi-variant="outline"]):where(
[data-kiwi-tone="attention"]
) {
--🥝badge-text-color: var(--stratakit-color-text-attention-base);
--🥝badge-border-color: var(--stratakit-color-border-attention-base);
}
.🥝-badge:where([data-kiwi-variant="outline"]):where(
[data-kiwi-tone="critical"]
) {
--🥝badge-text-color: var(--stratakit-color-text-critical-base);
--🥝badge-border-color: var(--stratakit-color-border-critical-base);
}
.🥝-badge:where([data-kiwi-variant="outline"]):where(
[data-kiwi-tone="accent"]
) {
--🥝badge-text-color: var(--stratakit-color-text-accent-base);
--🥝badge-border-color: var(--stratakit-color-border-accent-base);
}
}
@media (forced-colors: active) {
.🥝-badge {
border: 1px solid;
}
}
@layer base {
.🥝-button {
user-select: none;
cursor: pointer;
line-height: 1.2;
font-size: var(--stratakit-font-size-12);
justify-content: center;
align-items: center;
gap: var(--stratakit-space-x1);
min-block-size: 1.5rem;
padding-inline: var(--🥝button-padding-inline, var(--stratakit-space-x3));
padding-block: var(--stratakit-space-x1);
--🥝ghost-inline-offset: var(--stratakit-space-x3);
--🥝ghost-block-offset: var(--stratakit-space-x1);
background-color: var(--🥝button-background-color);
box-shadow: 0px 0px 0px 1px var(--🥝button-border-color) inset;
color: var(--🥝button-color, var(--stratakit-color-text-neutral-primary));
-webkit-tap-highlight-color: var(
--stratakit-color-bg-glow-on-surface-neutral-pressed
);
--🥝icon-color: var(
--🌀button-state--default,
var(--stratakit-color-icon-neutral-base)
)
var(--🌀button-state--hover, var(--stratakit-color-icon-neutral-hover))
var(
--🌀button-state--pressed,
var(--stratakit-color-icon-neutral-hover)
)
var(--🌀button-state--active, var(--stratakit-color-icon-accent-strong));
border: none;
border-radius: 4px;
flex-shrink: 0;
font-weight: 500;
text-decoration: none;
transition: background-color 0.15s ease-out;
display: inline-flex;
position: relative;
}
}
@layer modifiers {
.🥝-button:where([data-kiwi-variant="solid"]) {
--🥝button-background-color: var(
--🌀button-state--default,
var(--🥝button-bg--solid-default)
)
var(
--🌀button-state--hover,
color-mix(
in oklch,
var(--🥝button-bg--solid-default) 100%,
var(--stratakit-color-glow-hue)
var(--stratakit-color-bg-glow-base-hover-\%)
)
)
var(
--🌀button-state--pressed,
color-mix(
in oklch,
var(--🥝button-bg--solid-default) 100%,
var(--stratakit-color-glow-hue)
var(--stratakit-color-bg-glow-base-pressed-\%)
)
)
var(
--🌀button-state--active,
var(--stratakit-color-bg-glow-on-surface-accent-pressed)
)
var(
--🌀button-state--disabled,
var(--stratakit-color-bg-glow-on-surface-disabled)
);
box-shadow: var(
--🌀button-state--default,
var(--stratakit-shadow-button-base-inset),
0px 0px 0px 1px var(--🥝button-border-color) inset,
var(--stratakit-shadow-button-base-drop)
)
var(
--🌀button-state--hover,
var(--stratakit-shadow-button-base-inset),
0px 0px 0px 1px var(--🥝button-border-color) inset,
var(--stratakit-shadow-button-base-drop)
)
var(
--🌀button-state--pressed,
0px 0px 0px 1px var(--🥝button-border-color) inset
)
var(
--🌀button-state--active,
0px 0px 0px 1px var(--🥝button-border-color) inset
)
var(--🌀button-state--disabled, none);
}
.🥝-button:where([data-kiwi-variant="solid"]):where(
[data-kiwi-tone="neutral"]
) {
--🥝button-bg--solid-default: var(--stratakit-color-bg-neutral-base);
--🥝button-border-color: var(
--🌀button-state--default,
var(--stratakit-color-border-shadow-base)
)
var(
--🌀button-state--hover,
color-mix(
in oklch,
var(--stratakit-color-border-shadow-base) 100%,
var(--stratakit-color-glow-hue)
var(--stratakit-color-border-glow-base-hover-\%)
)
)
var(
--🌀button-state--pressed,
color-mix(
in oklch,
var(--stratakit-color-border-shadow-base) 100%,
var(--stratakit-color-glow-hue)
var(--stratakit-color-border-glow-base-pressed-\%)
)
)
var(--🌀button-state--disabled, transparent);
}
.🥝-button:where([data-kiwi-variant="solid"]):where(
[data-kiwi-tone="accent"]
) {
--🥝button-bg--solid-default: var(--stratakit-color-bg-accent-base);
--🥝button-border-color: var(
--🌀button-state--default,
var(--stratakit-color-border-shadow-strong)
)
var(
--🌀button-state--hover,
color-mix(
in oklch,
var(--stratakit-color-border-shadow-strong) 100%,
var(--stratakit-color-glow-hue)
var(--stratakit-color-border-glow-strong-hover-\%)
)
)
var(
--🌀button-state--pressed,
color-mix(
in oklch,
var(--stratakit-color-border-shadow-strong) 100%,
var(--stratakit-color-glow-hue)
var(--stratakit-color-border-glow-strong-pressed-\%)
)
)
var(--🌀button-state--disabled, transparent);
--🥝button-color: var(--stratakit-color-text-neutral-emphasis);
--🥝icon-color: var(--stratakit-color-icon-neutral-emphasis);
-webkit-tap-highlight-color: var(
--stratakit-color-bg-glow-on-surface-accent-pressed
);
}
.🥝-button:where([data-kiwi-variant="outline"]):where(
[data-kiwi-tone="neutral"]
) {
--🥝button-background-color: var(--🌀button-state--default, transparent)
var(
--🌀button-state--hover,
var(--stratakit-color-bg-glow-on-surface-neutral-hover)
)
var(
--🌀button-state--pressed,
var(--stratakit-color-bg-glow-on-surface-neutral-pressed)
)
var(
--🌀button-state--active,
var(--stratakit-color-bg-glow-on-surface-accent-pressed)
)
var(--🌀button-state--disabled, transparent);
--🥝button-border-color: var(
--🌀button-state--default,
var(--stratakit-color-border-neutral-base)
)
var(
--🌀button-state--hover,
color-mix(
in oklch,
var(--stratakit-color-border-neutral-base) 100%,
var(--stratakit-color-glow-hue)
var(--stratakit-color-border-glow-base-hover-\%)
)
)
var(
--🌀button-state--pressed,
color-mix(
in oklch,
var(--stratakit-color-border-neutral-base) 100%,
var(--stratakit-color-glow-hue)
var(--stratakit-color-border-glow-base-pressed-\%)
)
)
var(
--🌀button-state--disabled,
var(--stratakit-color-border-glow-on-surface-disabled)
);
}
.🥝-button:where([data-kiwi-variant="outline"]):where(
[data-kiwi-tone="accent"]
) {
--🥝button-background-color: var(--🌀button-state--default, transparent)
var(
--🌀button-state--hover,
var(--stratakit-color-bg-glow-on-surface-accent-hover)
)
var(
--🌀button-state--pressed,
var(--stratakit-color-bg-glow-on-surface-accent-pressed)
)
var(
--🌀button-state--active,
var(--stratakit-color-bg-glow-on-surface-accent-pressed)
)
var(--🌀button-state--disabled, transparent);
--🥝button-border-color: var(
--🌀button-state--default,
var(--stratakit-color-border-accent-base)
)
var(
--🌀button-state--hover,
color-mix(
in oklch,
var(--stratakit-color-border-accent-base) 100%,
var(--stratakit-color-glow-hue)
var(--stratakit-color-border-glow-strong-hover-\%)
)
)
var(
--🌀button-state--pressed,
color-mix(
in oklch,
var(--stratakit-color-border-accent-base) 100%,
var(--stratakit-color-glow-hue)
var(--stratakit-color-border-glow-strong-pressed-\%)
)
)
var(
--🌀button-state--disabled,
var(--stratakit-color-border-glow-on-surface-disabled)
);
--🥝button-color: var(
--🌀button-state--default,
var(--stratakit-color-text-accent-strong)
)
var(
--🌀button-state--hover,
color-mix(
in oklch,
var(--stratakit-color-text-accent-strong) 100%,
var(--stratakit-color-glow-hue)
var(--stratakit-color-text-glow-strong-hover-\%)
)
)
var(
--🌀button-state--pressed,
color-mix(
in oklch,
var(--stratakit-color-text-accent-strong) 100%,
var(--stratakit-color-glow-hue)
var(--stratakit-color-text-glow-strong-pressed-\%)
)
);
--🥝icon-color: var(
--🌀button-state--default,
var(--stratakit-color-icon-accent-strong)
)
var(
--🌀button-state--hover,
color-mix(
in oklch,
var(--stratakit-color-icon-accent-strong) 100%,
var(--stratakit-color-glow-hue)
var(--stratakit-color-icon-glow-strong-hover-\%)
)
)
var(
--🌀button-state--pressed,
color-mix(
in oklch,
var(--stratakit-color-icon-accent-strong) 100%,
var(--stratakit-color-glow-hue)
var(--stratakit-color-icon-glow-strong-pressed-\%)
)
);
}
.🥝-button:where([data-kiwi-variant="ghost"]) {
--🥝button-border-color: transparent;
}
.🥝-button:where([data-kiwi-variant="ghost"]):where(
[data-kiwi-tone="neutral"]
) {
--🥝button-background-color: var(--🌀button-state--default, transparent)
var(
--🌀button-state--hover,
var(--stratakit-color-bg-glow-on-surface-neutral-hover)
)
var(
--🌀button-state--pressed,
var(--stratakit-color-bg-glow-on-surface-neutral-pressed)
)
var(
--🌀button-state--active,
var(--stratakit-color-bg-glow-on-surface-accent-pressed)
)
var(--🌀button-state--disabled, transparent);
}
.🥝-button:where([data-kiwi-variant="ghost"]):where(
[data-kiwi-tone="accent"]
) {
--🥝button-background-color: var(--🌀button-state--default, transparent)
var(
--🌀button-state--hover,
var(--stratakit-color-bg-glow-on-surface-accent-hover)
)
var(
--🌀button-state--pressed,
var(--stratakit-color-bg-glow-on-surface-accent-pressed)
)
var(
--🌀button-state--active,
var(--stratakit-color-bg-glow-on-surface-accent-pressed)
)
var(--🌀button-state--disabled, transparent);
--🥝button-color: var(
--🌀button-state--default,
var(--stratakit-color-text-accent-strong)
)
var(
--🌀button-state--hover,
color-mix(
in oklch,
var(--stratakit-color-text-accent-strong) 100%,
var(--stratakit-color-glow-hue)
var(--stratakit-color-text-glow-strong-hover-\%)
)
)
var(
--🌀button-state--pressed,
color-mix(
in oklch,
var(--stratakit-color-text-accent-strong) 100%,
var(--stratakit-color-glow-hue)
var(--stratakit-color-text-glow-strong-pressed-\%)
)
);
--🥝icon-color: var(
--🌀button-state--default,
var(--stratakit-color-icon-accent-strong)
)
var(
--🌀button-state--hover,
color-mix(
in oklch,
var(--stratakit-color-icon-accent-strong) 100%,
var(--stratakit-color-glow-hue)
var(--stratakit-color-icon-glow-strong-hover-\%)
)
)
var(
--🌀button-state--pressed,
color-mix(
in oklch,
var(--stratakit-color-icon-accent-strong) 100%,
var(--stratakit-color-glow-hue)
var(--stratakit-color-icon-glow-strong-pressed-\%)
)
);
}
}
@layer states {
@media (any-hover: hover) {
.🥝-button:where(:hover) {
--🌀button-state: var(--🌀button-state--hover);
}
}
.🥝-button:where([data-has-popover-open]) {
--🌀button-state: var(--🌀button-state--hover);
}
.🥝-button:where(:active) {
--🌀button-state: var(--🌀button-state--pressed);
}
.🥝-button:where([aria-pressed="true"]) {
--🌀button-state: var(--🌀button-state--active);
--🥝button-border-color: var(--stratakit-color-border-accent-strong);
}
.🥝-button:where(:disabled, [aria-disabled="true"]) {
--🌀button-state: var(--🌀button-state--disabled);
color: var(--stratakit-color-text-neutral-disabled);
cursor: not-allowed;
-webkit-tap-highlight-color: transparent;
--🥝icon-color: var(--stratakit-color-icon-neutral-disabled);
}
}
@layer base.🌀 {
.🥝-button {
--🌀button-state: var(--🌀button-state--default);
--🌀button-state--default: var(--🌀button-state,);
--🌀button-state--hover: var(--🌀button-state,);
--🌀button-state--pressed: var(--🌀button-state,);
--🌀button-state--active: var(--🌀button-state,);
--🌀button-state--disabled: var(--🌀button-state,);
}
}
@media (forced-colors: active) {
.🥝-button {
color: buttontext;
background-color: buttonface;
border: 1px solid buttonborder;
}
.🥝-button:where([aria-pressed="true"]) {
color: selecteditemtext;
background-color: selecteditem;
}
.🥝-button:where(:disabled, [aria-disabled="true"]) {
color: graytext;
border-color: graytext;
}
}
@layer base {
.🥝-checkbox {
--🥝checkbox-color-svg: var(--stratakit-color-icon-neutral-emphasis);
--🥝checkbox-border-radius: 4px;
--🥝checkbox-unchecked-svg: url('data:image/svg+xml;utf8,');
--🥝checkbox-checkmark-svg: url('data:image/svg+xml;utf8,');
--🥝checkbox-indeterminate-svg: url('data:image/svg+xml;utf8,');
appearance: none;
cursor: pointer;
background-color: var(
--🌀checkbox-visual-state--default,
var(--stratakit-color-bg-neutral-base)
)
var(
--🌀checkbox-visual-state--hover,
color-mix(
in oklch,
var(--stratakit-color-bg-neutral-base) 100%,
var(--stratakit-color-glow-hue)
var(--stratakit-color-bg-glow-base-hover-\%)
)
)
var(
--🌀checkbox-visual-state--checked,
var(--stratakit-color-bg-accent-base)
)
var(
--🌀checkbox-visual-state--checked-hover,
color-mix(
in oklch,
var(--stratakit-color-bg-accent-base) 100%,
var(--stratakit-color-glow-hue)
var(--stratakit-color-bg-glow-base-pressed-\%)
)
)
var(
--🌀checkbox-visual-state--disabled,
var(--stratakit-color-bg-glow-on-surface-disabled)
);
border-radius: var(--🥝checkbox-border-radius);
block-size: 1rem;
inline-size: 1rem;
color: var(--🌀checkbox-aria-state--unchecked, transparent)
var(--🌀checkbox-aria-state--checked, var(--🥝checkbox-color-svg))
var(--🌀checkbox-aria-state--indeterminate, var(--🥝checkbox-color-svg));
box-shadow:
var(--stratakit-shadow-button-base-inset),
0px 0px 0px 1px var(--🥝checkbox-border-color) inset,
var(--stratakit-shadow-button-base-drop);
-webkit-tap-highlight-color: var(
--stratakit-color-bg-glow-on-surface-accent-pressed
);
--🥝checkbox-border-color: var(
--🌀checkbox-visual-state--default,
var(--stratakit-color-border-shadow-base)
)
var(
--🌀checkbox-visual-state--hover,
color-mix(
in oklch,
var(--stratakit-color-border-shadow-base) 100%,
var(--stratakit-color-glow-hue)
var(--stratakit-color-border-glow-base-hover-\%)
)
)
var(
--🌀checkbox-visual-state--checked,
var(--stratakit-color-border-shadow-strong)
)
var(
--🌀checkbox-visual-state--checked-hover,
color-mix(
in oklch,
var(--stratakit-color-border-shadow-strong) 100%,
var(--stratakit-color-glow-hue)
var(--stratakit-color-border-glow-base-pressed-\%)
)
)
var(--🌀checkbox-visual-state--disabled, transparent);
--🥝checkbox-mask-image: var(
--🌀checkbox-aria-state--unchecked,
var(--🥝checkbox-unchecked-svg)
)
var(--🌀checkbox-aria-state--checked, var(--🥝checkbox-checkmark-svg))
var(
--🌀checkbox-aria-state--indeterminate,
var(--🥝checkbox-indeterminate-svg)
);
transition:
background-color 0.15s ease-out,
border-color 0.15s ease-out,
box-shadow 0.15s ease-out,
--🥝checkbox-border-color 0.15s ease-out;
position: relative;
}
.🥝-checkbox::before,
.🥝-checkbox::after {
content: "";
position: absolute;
inset: 0px;
}
.🥝-checkbox::before {
inset: calc((1rem - var(--stratakit-space-x6)) / 2);
}
.🥝-checkbox::after {
mask-image: var(--🥝checkbox-mask-image, initial);
background-color: currentcolor;
mask-position: 50% center;
mask-repeat: no-repeat;
}
}
@layer states {
@media (any-hover: hover) {
.🥝-checkbox:where(:hover) {
--🌀checkbox-visual-state: var(--🌀checkbox-visual-state--hover);
}
}
.🥝-checkbox:where(:checked, [aria-checked="true"]) {
--🌀checkbox-visual-state: var(--🌀checkbox-visual-state--checked);
--🌀checkbox-aria-state: var(--🌀checkbox-aria-state--checked);
}
@media (any-hover: hover) {
.🥝-checkbox:where(:checked, [aria-checked="true"]):where(:hover) {
--🌀checkbox-visual-state: var(
--🌀checkbox-visual-state--checked-hover
);
}
}
.🥝-checkbox:where(:indeterminate, [aria-checked="mixed"]) {
--🌀checkbox-visual-state: var(--🌀checkbox-visual-state--checked);
--🌀checkbox-aria-state: var(--🌀checkbox-aria-state--indeterminate);
}
.🥝-checkbox:where(:disabled, [aria-disabled="true"]) {
--🌀checkbox-visual-state: var(--🌀checkbox-visual-state--disabled);
--🥝checkbox-color-svg: var(--stratakit-color-icon-neutral-disabled);
cursor: not-allowed;
box-shadow: none;
-webkit-tap-highlight-color: transparent;
}
}
@layer base.🌀 {
.🥝-checkbox {
--🌀checkbox-visual-state: var(--🌀checkbox-visual-state--default);
--🌀checkbox-visual-state--default: var(--🌀checkbox-visual-state,);
--🌀checkbox-visual-state--hover: var(--🌀checkbox-visual-state,);
--🌀checkbox-visual-state--checked: var(--🌀checkbox-visual-state,);
--🌀checkbox-visual-state--checked-hover: var(--🌀checkbox-visual-state,);
--🌀checkbox-visual-state--disabled: var(--🌀checkbox-visual-state,);
--🌀checkbox-aria-state: var(--🌀checkbox-aria-state--unchecked);
--🌀checkbox-aria-state--unchecked: var(--🌀checkbox-aria-state,);
--🌀checkbox-aria-state--checked: var(--🌀checkbox-aria-state,);
--🌀checkbox-aria-state--indeterminate: var(--🌀checkbox-aria-state,);
}
}
@media (forced-colors: active) {
.🥝-checkbox {
border: 1px solid canvastext;
}
.🥝-checkbox:where(
:checked,
[type="checkbox"]:indeterminate,
[aria-checked="true"],
[aria-checked="mixed"]
) {
background-color: selecteditem;
}
.🥝-checkbox:where(
:checked,
[type="checkbox"]:indeterminate,
[aria-checked="true"],
[aria-checked="mixed"]
)::after {
background-color: selecteditemtext;
}
.🥝-checkbox:where(:disabled, [aria-disabled="true"]) {
background-color: canvas;
border-color: graytext;
}
.🥝-checkbox:where(:disabled, [aria-disabled="true"])::after {
background-color: graytext;
}
}
@layer modifiers {
.🥝-description.🥝-text:where([data-kiwi-tone="neutral"]) {
color: var(--stratakit-color-text-neutral-tertiary);
}
.🥝-description.🥝-text:where([data-kiwi-tone="critical"]) {
color: var(--stratakit-color-text-critical-base);
}
}
@layer base {
.🥝-divider {
background-color: var(--stratakit-color-border-neutral-muted);
flex: 0 0 auto;
align-self: stretch;
}
.🥝-divider:where(hr) {
border: none;
margin: 0px;
}
}
@layer modifiers {
.🥝-divider:where(
:not([aria-orientation="vertical"], [data-kiwi-orientation="vertical"])
) {
block-size: 1px;
}
.🥝-divider:where(
[aria-orientation="vertical"],
[data-kiwi-orientation="vertical"]
) {
min-block-size: 100%;
inline-size: 1px;
}
}
@media (forced-colors: active) {
.🥝-divider {
background-color: canvastext;
}
}
@layer base {
.🥝-icon-button.🥝-button {
aspect-ratio: 1 / 1;
--🥝button-padding-inline: var(--stratakit-space-x1);
--🥝ghost-inline-offset: var(--stratakit-space-x1);
}
}
@layer base {
.🥝-icon-button-dot.🥝-dot {
position: absolute;
inset-block-start: var(--stratakit-space-x05);
inset-inline-end: var(--stratakit-space-x05);
}
}
@media (forced-colors: active) {
.🥝-icon-button:where([inert]) {
border: none;
}
:where(.🥝-icon-button[aria-pressed="true"]) .🥝-icon-button-dot.🥝-dot {
background-color: selecteditemtext;
}
}
@layer base {
.🥝-kbd {
font-size: var(--stratakit-font-size-12);
line-height: 1.3333;
}
.🥝-kbd {
color: var(--stratakit-color-text-neutral-secondary);
column-gap: var(--stratakit-space-x1);
min-block-size: var(--stratakit-space-x4);
flex-shrink: 0;
justify-content: center;
align-items: center;
font-family: inherit;
font-weight: 500;
display: inline-flex;
}
}
@layer modifiers {
.🥝-kbd:where([data-kiwi-variant="solid"], [data-kiwi-variant="muted"]) {
background-color: var(--stratakit-color-bg-neutral-base);
padding-inline: var(--stratakit-space-x1);
border-radius: 4px;
}
.🥝-kbd:where([data-kiwi-variant="solid"]) {
box-shadow:
var(--stratakit-shadow-button-base-inset),
0px 0px 0px 1px var(--stratakit-color-border-shadow-base) inset,
var(--stratakit-shadow-button-base-drop);
}
.🥝-kbd:where([data-kiwi-variant="ghost"]) {
color: var(--stratakit-color-text-neutral-tertiary);
}
}
@media (forced-colors: active) {
.🥝-kbd:where([data-kiwi-variant="solid"]) {
border: 1px solid;
}
}
@layer base {
.🥝-label {
color: var(--stratakit-color-text-neutral-secondary);
cursor: default;
font-size: var(--stratakit-font-size-12);
}
.🥝-label:is(label) {
cursor: pointer;
-webkit-tap-highlight-color: var(
--stratakit-color-bg-glow-on-surface-neutral-pressed
);
}
}
@layer states {
.🥝-label:has(+ :where(:disabled, [aria-disabled="true"])) {
color: var(--stratakit-color-text-neutral-disabled);
}
.🥝-label:has(+ :where(:disabled, [aria-disabled="true"])):is(label) {
cursor: not-allowed;
-webkit-tap-highlight-color: transparent;
}
}
@layer base {
.🥝-progress-bar {
block-size: var(--🥝progress-bar-size);
contain: strict;
background-color: var(--🥝progress-bar-track-color);
border-radius: 9999px;
inline-size: 100%;
display: grid;
}
.🥝-progress-bar::before {
content: "";
block-size: inherit;
inline-size: var(--🥝progress-bar-fill-size);
transform: translateX(
calc(-100% + var(--🥝progress-bar-fill-portion-shown))
);
border-radius: inherit;
background-color: var(--🥝progress-bar-fill-color);
animation: var(--🥝progress-bar-animation);
}
@media (prefers-reduced-motion: no-preference) {
.🥝-progress-bar:where([data-kiwi-variant="determinate"])::before {
transition: transform 0.15s ease-in-out;
}
}
}
@layer modifiers {
.🥝-progress-bar:where([data-kiwi-tone="neutral"]) {
--🥝progress-bar-fill-color: var(--stratakit-color-icon-neutral-base);
--🥝progress-bar-track-color: var(--stratakit-color-border-page-base);
}
.🥝-progress-bar:where([data-kiwi-tone="accent"]) {
--🥝progress-bar-fill-color: var(--stratakit-color-icon-accent-strong);
--🥝progress-bar-track-color: var(--stratakit-color-bg-accent-muted);
}
.🥝-progress-bar:where([data-kiwi-size="medium"]) {
--🥝progress-bar-size: 0.125rem;
}
.🥝-progress-bar:where([data-kiwi-size="large"]) {
--🥝progress-bar-size: 0.25rem;
}
.🥝-progress-bar:where([data-kiwi-variant="indeterminate"]) {
--🥝progress-bar-animation: calc(4 * 1.5s * 2)
--🥝progress-bar-animation-indeterminate steps(4, end) infinite;
--🥝progress-bar-fill-size: 25%;
--🥝progress-bar-fill-start-point: 0%;
}
@media (prefers-reduced-motion: no-preference) {
.🥝-progress-bar:where([data-kiwi-variant="indeterminate"]) {
--🥝progress-bar-animation:
1.5s --🥝progress-bar-animation-indeterminate
cubic-bezier(0.5, 0, 0.5, 1) 4,
calc(1.5s * 2) --🥝progress-bar-animation-indeterminate-slow
cubic-bezier(0.5, 0, 0.5, 1) calc(4 * 1.5s) infinite;
--🥝progress-bar-fill-start-point: -100%;
}
}
.🥝-progress-bar:where([data-kiwi-variant="determinate"]) {
--🥝progress-bar-fill-size: 100%;
}
}
@keyframes --🥝progress-bar-animation-indeterminate {
0% {
transform: translateX(var(--🥝progress-bar-fill-start-point));
}
100% {
transform: translate(400%);
}
}
@keyframes --🥝progress-bar-animation-indeterminate-slow {
0% {
transform: translate(-100%);
}
50% {
transform: translate(-95%);
}
100% {
transform: translate(400%);
}
}
@media (forced-colors: active) {
.🥝-progress-bar {
--🥝progress-bar-fill-color: CanvasText;
--🥝progress-bar-track-color: Canvas;
outline: oklch(from canvastext l c h / 50%) solid 1px;
forced-color-adjust: none;
}
}
.🥝-radio.🥝-checkbox {
--🥝checkbox-border-radius: 9999px;
--🥝checkbox-checkmark-svg: url('data:image/svg+xml;utf8,');
--🥝checkbox-indeterminate-svg: var(--🥝checkbox-unchecked-svg);
}
@layer states {
.🥝-radio.🥝-checkbox:where(:indeterminate) {
--🌀checkbox-visual-state: var(--🌀checkbox-visual-state--default);
}
}
@layer base {
.🥝-spinner {
block-size: var(--🥝spinner-size);
inline-size: var(--🥝spinner-size);
display: inline-block;
}
}
@layer modifiers {
.🥝-spinner:where([data-kiwi-tone="neutral"]) {
--🥝spinner-fill-color: var(--stratakit-color-icon-neutral-base);
--🥝spinner-track-color: var(--stratakit-color-border-page-base);
}
.🥝-spinner:where([data-kiwi-tone="accent"]) {
--🥝spinner-fill-color: var(--stratakit-color-icon-accent-strong);
--🥝spinner-track-color: var(--stratakit-color-bg-accent-muted);
}
.🥝-spinner:where([data-kiwi-size="small"]) {
--🥝spinner-size: 1rem;
}
.🥝-spinner:where([data-kiwi-size="medium"]) {
--🥝spinner-size: 1.5rem;
}
.🥝-spinner:where([data-kiwi-size="large"]) {
--🥝spinner-size: 2rem;
}
.🥝-spinner:where([data-kiwi-size="xlarge"]) {
--🥝spinner-size: 3rem;
}
.🥝-spinner:where([data-kiwi-variant="indeterminate"]) {
--🥝spinner-animation: --🥝spinner-animation-indeterminate linear infinite;
--🥝spinner-animation-duration: 1s;
--🥝spinner-dash-array: 25 75;
}
@media (prefers-reduced-motion) {
.🥝-spinner:where([data-kiwi-variant="indeterminate"]) {
--🥝spinner-animation-duration: 2s;
}
}
}
@layer base {
.🥝-spinner-svg {
block-size: inherit;
inline-size: inherit;
fill: none;
}
}
.🥝-spinner-svg-track {
stroke: var(--🥝spinner-track-color);
}
.🥝-spinner-svg-fill {
animation-timing-function:;
animation-delay:;
animation-iteration-count:;
animation-direction:;
animation-fill-mode:;
animation-play-state:;
animation-name:;
animation-timeline:;
animation-range-start:;
animation-range-end:;
animation-duration: var(--🥝spinner-animation-duration);
stroke: var(--🥝spinner-fill-color);
stroke-dasharray: var(--🥝spinner-dash-array);
stroke-dashoffset: 25px;
stroke-linecap: round;
transform-box: fill-box;
transform-origin: 50% center;
}
@keyframes --🥝spinner-animation-indeterminate {
100% {
rotate: 360deg;
}
}
@media (forced-colors: active) {
.🥝-spinner {
--🥝spinner-fill-color: Canvas;
--🥝spinner-track-color: CanvasText;
}
.🥝-spinner:where([data-kiwi-variant="indeterminate"]) {
--🥝spinner-dash-array: 75 25;
}
.🥝-spinner-svg-track {
stroke-width: 2px;
}
.🥝-spinner-svg-fill {
stroke-dashoffset: 0;
}
}
@layer base {
.🥝-select-root:where(
:has(select.🥝-select),
[data-kiwi-has-select="true"]
) {
isolation: isolate;
align-items: center;
display: inline-grid;
}
.🥝-select-root:where(:has(select.🥝-select), [data-kiwi-has-select="true"])
> * {
grid-area: 1 / 1 / -1 / -1;
}
}
@layer base {
.🥝-select.🥝-button {
min-inline-size: calc(
var(--stratakit-space-x2) + 1ch +
calc(
var(--stratakit-space-x1) + var(--stratakit-space-x4) +
var(--stratakit-space-x1)
)
);
text-overflow: ellipsis;
}
.🥝-select.🥝-button:where(select:not([multiple])) {
appearance: none;
--🥝button-padding-inline: var(--stratakit-space-x2)
calc(
var(--stratakit-space-x1) + var(--stratakit-space-x4) +
var(--stratakit-space-x1)
);
--🥝ghost-inline-offset: var(--stratakit-space-x2);
}
.🥝-select.🥝-button:where(select:not([multiple])) > option {
background-color: var(--stratakit-color-bg-neutral-base);
}
}
@layer base {
.🥝-select-arrow.🥝-disclosure-arrow {
pointer-events: none;
z-index: 1;
--🥝icon-color: var(
--🌀select-arrow-state--default,
var(--stratakit-color-icon-neutral-base)
)
var(
--🌀select-arrow-state--hover,
var(--stratakit-color-icon-neutral-hover)
)
var(
--🌀select-arrow-state--disabled,
var(--stratakit-color-icon-neutral-disabled)
);
justify-self: end;
margin-inline-end: var(--stratakit-space-x1);
}
}
@layer states {
@media (any-hover: hover) {
:where(.🥝-select:hover) + .🥝-select-arrow.🥝-disclosure-arrow {
--🌀select-arrow-state: var(--🌀select-arrow-state--hover);
}
}
:where(.🥝-select:disabled) + .🥝-select-arrow.🥝-disclosure-arrow {
--🌀select-arrow-state: var(--🌀select-arrow-state--disabled);
}
}
@layer base.🌀 {
.🥝-select-arrow.🥝-disclosure-arrow {
--🌀select-arrow-state: var(--🌀select-arrow-state--default);
--🌀select-arrow-state--default: var(--🌀select-arrow-state,);
--🌀select-arrow-state--hover: var(--🌀select-arrow-state,);
--🌀select-arrow-state--disabled: var(--🌀select-arrow-state,);
}
}
@layer base {
.🥝-skeleton {
background-color: var(--stratakit-color-bg-glow-on-surface-disabled);
border-radius: var(--🥝skeleton-border-radius);
block-size: var(--🥝skeleton-height);
inline-size: var(--🥝skeleton-width);
}
@media (prefers-reduced-motion: no-preference) {
.🥝-skeleton {
background-image:;
background-position-y:;
background-repeat:;
background-origin:;
background-clip:;
background-color:;
background-position-x: 100%;
background-size: 300%;
background-attachment: fixed;
animation: 1.6s cubic-bezier(0.32, 1, 0.64, 1) 0s infinite normal none
running --🥝skeleton-shimmer;
}
}
}
@layer modifiers {
.🥝-skeleton:where([data-kiwi-variant="text"]) {
--🥝skeleton-width: 100%;
--🥝skeleton-border-radius: 2px;
}
.🥝-skeleton:where([data-kiwi-variant="text"]):where(
[data-kiwi-size="xsmall"]
) {
--🥝skeleton-height: 0.75rem;
}
.🥝-skeleton:where([data-kiwi-variant="text"]):where(
[data-kiwi-size="small"]
) {
--🥝skeleton-height: 0.875rem;
}
.🥝-skeleton:where([data-kiwi-variant="text"]):where(
[data-kiwi-size="medium"]
) {
--🥝skeleton-height: 1rem;
}
.🥝-skeleton:where([data-kiwi-variant="text"]):where(
[data-kiwi-size="large"]
) {
--🥝skeleton-height: 1.25rem;
}
.🥝-skeleton:where([data-kiwi-variant="text"]):where(
[data-kiwi-size="xlarge"]
) {
--🥝skeleton-height: 1.5rem;
}
.🥝-skeleton:where([data-kiwi-variant="object"]):where(
[data-kiwi-size="xsmall"]
) {
--🥝skeleton-border-radius: 2px;
--🥝skeleton-height: 0.75rem;
--🥝skeleton-width: 0.75rem;
}
.🥝-skeleton:where([data-kiwi-variant="object"]):where(
[data-kiwi-size="small"]
) {
--🥝skeleton-border-radius: 2px;
--🥝skeleton-height: 1rem;
--🥝skeleton-width: 1rem;
}
.🥝-skeleton:where([data-kiwi-variant="object"]):where(
[data-kiwi-size="medium"]
) {
--🥝skeleton-border-radius: 4px;
--🥝skeleton-height: 1.5rem;
--🥝skeleton-width: 1.5rem;
}
.🥝-skeleton:where([data-kiwi-variant="object"]):where(
[data-kiwi-size="large"]
) {
--🥝skeleton-border-radius: 4px;
--🥝skeleton-height: 2rem;
--🥝skeleton-width: 2rem;
}
.🥝-skeleton:where([data-kiwi-variant="object"]):where(
[data-kiwi-size="xlarge"]
) {
--🥝skeleton-border-radius: 4px;
--🥝skeleton-height: 3rem;
--🥝skeleton-width: 3rem;
}
}
@keyframes --🥝skeleton-shimmer {
100% {
background-position-x: 0%;
}
}
@media (forced-colors: active) {
.🥝-skeleton {
background-color: rgba(0, 0, 0, 0);
border: 1px solid;
}
}
@layer base {
.🥝-switch {
appearance: none;
cursor: pointer;
background-color: var(
--🌀switch-state--default,
var(--stratakit-color-bg-page-base)
)
var(
--🌀switch-state--hover,
color-mix(
in oklch,
var(--stratakit-color-bg-page-base) 100%,
var(--stratakit-color-glow-hue)
var(--stratakit-color-bg-glow-base-hover-\%)
)
)
var(
--🌀switch-state--pressed,
color-mix(
in oklch,
var(--stratakit-color-bg-page-base) 100%,
var(--stratakit-color-glow-hue)
var(--stratakit-color-bg-glow-base-hover-\%)
)
)
var(--🌀switch-state--checked, var(--stratakit-color-bg-accent-base))
var(
--🌀switch-state--checked-hover,
color-mix(
in oklch,
var(--stratakit-color-bg-accent-base) 100%,
var(--stratakit-color-glow-hue)
var(--stratakit-color-bg-glow-strong-hover-\%)
)
)
var(--🌀switch-state--disabled, var(--stratakit-color-bg-page-base));
border-width: 1px;
border-style: solid;
border-image: initial;
border-color: var(
--🌀switch-state--default,
var(--stratakit-color-border-neutral-base)
)
var(
--🌀switch-state--hover,
color-mix(
in oklch,
var(--stratakit-color-border-neutral-base) 100%,
var(--stratakit-color-glow-hue)
var(--stratakit-color-border-glow-base-hover-\%)
)
)
var(
--🌀switch-state--pressed,
color-mix(
in oklch,
var(--stratakit-color-border-neutral-base) 100%,
var(--stratakit-color-glow-hue)
var(--stratakit-color-border-glow-base-pressed-\%)
)
)
var(
--🌀switch-state--checked,
color-mix(
in oklch,
var(--stratakit-color-bg-accent-base) 100%,
var(--stratakit-color-glow-hue)
var(--stratakit-color-border-glow-strong-hover-\%)
)
)
var(
--🌀switch-state--checked-hover,
color-mix(
in oklch,
var(--stratakit-color-bg-accent-base) 100%,
var(--stratakit-color-glow-hue)
var(--stratakit-color-border-glow-strong-hover-\%)
)
)
var(
--🌀switch-state--disabled,
var(--stratakit-color-border-glow-on-surface-disabled)
);
-webkit-tap-highlight-color: var(
--stratakit-color-bg-glow-on-surface-accent-pressed
);
border-radius: 9999px;
align-items: center;
block-size: auto;
inline-size: 2rem;
transition:
background-color 0.15s ease-out,
border-color 0.15s ease-out;
display: inline-grid;
position: relative;
}
.🥝-switch::before,
.🥝-switch::after {
content: "";
grid-area: 1 / 1 / -1 / -1;
display: block;
}
.🥝-switch::before {
inline-size: 2rem;
block-size: var(--stratakit-space-x6);
margin: -1px;
position: absolute;
}
.🥝-switch::after {
background-color: var(--🥝switch-thumb-color);
block-size: 1rem;
inline-size: 1rem;
box-shadow:
var(--stratakit-shadow-button-base-inset),
0px 0px 0px 1px var(--stratakit-color-border-shadow-base) inset,
var(--stratakit-shadow-button-base-drop);
border-radius: var(--🥝switch-thumb-radius, 9999px);
transform-origin: 0px center;
transform: var(--🥝switch-thumb-transform);
margin: calc(-1px + 0.125rem);
}
@media (prefers-reduced-motion: no-preference) {
.🥝-switch::after {
will-change: transform, border-radius;
transition:
transform 0.15s ease-out,
border-radius 0.15s ease-out;
}
}
}
@layer states {
.🥝-switch {
--🥝switch-thumb-color: var(--stratakit-color-bg-neutral-inverse);
}
@media (any-hover: hover) {
.🥝-switch:where(:hover) {
--🌀switch-state: var(--🌀switch-state--hover);
}
}
.🥝-switch:where(:checked, [aria-checked="true"]) {
--🌀switch-state: var(--🌀switch-state--checked);
--🥝switch-thumb-transform: translateX(75%);
}
@media (any-hover: hover) {
.🥝-switch:where(:checked, [aria-checked="true"]):where(:hover) {
--🌀switch-state: var(--🌀switch-state--checked-hover);
}
}
.🥝-switch:where(:active) {
--🌀switch-state: var(--🌀switch-state--pressed);
--🥝switch-thumb-transform: scaleX(1.75);
--🥝switch-thumb-radius: calc(9999px / 1.75) / 9999px;
}
.🥝-switch:where(:disabled, [aria-disabled="true"]) {
--🌀switch-state: var(--🌀switch-state--disabled);
--🥝switch-thumb-color: var(--stratakit-color-icon-neutral-disabled);
cursor: not-allowed;
-webkit-tap-highlight-color: transparent;
}
.🥝-switch:where(:disabled, [aria-disabled="true"])::after {
box-shadow: none;
}
}
@layer base.🌀 {
.🥝-switch {
--🌀switch-state: var(--🌀switch-state--default);
--🌀switch-state--default: var(--🌀switch-state,);
--🌀switch-state--hover: var(--🌀switch-state,);
--🌀switch-state--pressed: var(--🌀switch-state,);
--🌀switch-state--checked: var(--🌀switch-state,);
--🌀switch-state--checked-hover: var(--🌀switch-state,);
--🌀switch-state--disabled: var(--🌀switch-state,);
}
}
@media (forced-colors: active) {
.🥝-switch {
--🥝switch-thumb-color: CanvasText;
border-color: canvastext;
}
.🥝-switch:where(:checked, [aria-checked="true"]) {
--🥝switch-thumb-color: SelectedItemText;
background-color: selecteditem;
}
.🥝-switch:where(:disabled, [aria-disabled="true"]) {
--🥝switch-thumb-color: GrayText;
background-color: canvas;
border-color: graytext;
}
}
@layer modifiers {
.🥝-text:where([data-kiwi-text-variant="display-lg"]) {
font-size: var(--stratakit-font-size-48);
line-height: 1.1667;
}
.🥝-text:where([data-kiwi-text-variant="display-md"]) {
font-size: var(--stratakit-font-size-40);
line-height: 1.2;
}
.🥝-text:where([data-kiwi-text-variant="display-sm"]) {
font-size: var(--stratakit-font-size-32);
line-height: 1.25;
}
.🥝-text:where([data-kiwi-text-variant="headline-lg"]) {
font-size: var(--stratakit-font-size-28);
line-height: 1.2857;
}
.🥝-text:where([data-kiwi-text-variant="headline-md"]) {
font-size: var(--stratakit-font-size-24);
line-height: 1.3333;
}
.🥝-text:where([data-kiwi-text-variant="headline-sm"]) {
font-size: var(--stratakit-font-size-20);
line-height: 1.4;
}
.🥝-text:where([data-kiwi-text-variant="body-lg"]) {
font-size: var(--stratakit-font-size-16);
line-height: 1.5;
}
.🥝-text:where([data-kiwi-text-variant="body-md"]) {
font-size: var(--stratakit-font-size-14);
line-height: 1.4286;
}
.🥝-text:where([data-kiwi-text-variant="body-sm"]) {
font-size: var(--stratakit-font-size-12);
line-height: 1.3333;
}
.🥝-text:where([data-kiwi-text-variant="caption-lg"]) {
font-size: var(--stratakit-font-size-11);
line-height: 1.4545;
}
.🥝-text:where([data-kiwi-text-variant="caption-md"]) {
font-size: var(--stratakit-font-size-10);
line-height: 1.2;
}
.🥝-text:where([data-kiwi-text-variant="caption-sm"]) {
font-size: var(--stratakit-font-size-8);
line-height: 1.5;
}
.🥝-text:where([data-kiwi-text-variant="mono-sm"]) {
font-family: var(--stratakit-font-family-mono);
font-size: var(--stratakit-font-size-12);
line-height: 1.3333;
}
}
@layer base {
.🥝-text-box {
cursor: var(--🥝text-box-cursor);
font-size: var(--stratakit-font-size-12);
min-block-size: 1.5rem;
min-inline-size: 0px;
padding-inline: var(--stratakit-space-x2);
background-color: var(--🥝text-box-background-color);
box-shadow: var(--stratakit-shadow-input-base);
color: var(--stratakit-color-text-neutral-primary);
-webkit-tap-highlight-color: transparent;
--🥝text-box-cursor: text;
--🥝text-box-background-color: var(
--🌀text-box-state--default,
var(--stratakit-color-bg-page-base)
)
var(
--🌀text-box-state--hover,
color-mix(
in oklch,
var(--stratakit-color-bg-page-base) 100%,
var(--stratakit-color-glow-hue)
var(--stratakit-color-bg-glow-base-hover-\%)
)
)
var(
--🌀text-box-state--disabled,
var(--stratakit-color-bg-control-textbox)
);
--🥝text-box-border-color: var(
--🌀text-box-state--default,
var(--stratakit-color-border-neutral-base)
)
var(
--🌀text-box-state--hover,
color-mix(
in oklch,
var(--stratakit-color-border-neutral-base) 100%,
var(--stratakit-color-glow-hue)
var(--stratakit-color-border-glow-base-hover-\%)
)
)
var(
--🌀text-box-state--disabled,
var(--stratakit-color-border-glow-on-surface-disabled)
);
border-radius: 4px;
transition:
background-color 0.15s ease-out,
border-color 0.15s ease-out;
}
.🥝-text-box:where(:not(input, textarea)) {
align-items: center;
gap: var(--stratakit-space-x1);
display: inline-flex;
position: relative;
}
.🥝-text-box:where(:not(input, textarea))::before {
content: "";
border-radius: inherit;
pointer-events: none;
border: 1px solid var(--🥝text-box-border-color);
transition: border-color 0.15s ease-out;
position: absolute;
inset: 0px;
}
.🥝-text-box:where(:not(input, textarea)):where(
:not(:has(.🥝-text-box-decoration ~ :is(input, textarea)))
) {
padding-inline-start: 0px;
}
.🥝-text-box:where(:not(input, textarea)):where(
:not(:has(.🥝-text-box-decoration ~ :is(input, textarea)))
)
:where(input, textarea) {
padding-inline-start: var(--stratakit-space-x2);
}
.🥝-text-box:where(:not(input, textarea)):where(
:not(:has(:is(input, textarea) ~ .🥝-text-box-decoration))
) {
padding-inline-end: 0px;
}
.🥝-text-box:where(:not(input, textarea)):where(
:not(:has(:is(input, textarea) ~ .🥝-text-box-decoration))
)
:where(input, textarea) {
padding-inline-end: var(--stratakit-space-x2);
}
.🥝-text-box:where(input, textarea),
.🥝-text-box :where(input, textarea) {
appearance: none;
border: 1px solid var(--🥝text-box-border-color);
min-inline-size: 0px;
cursor: var(--🥝text-box-cursor);
padding-block: max(0px, (1.5rem - var(--stratakit-space-x05) - 1lh)/2);
line-height: 1.3;
}
:is(
.🥝-text-box:where(input, textarea),
.🥝-text-box :where(input, textarea)
)::placeholder {
color: var(--stratakit-color-text-neutral-secondary);
opacity: 1;
user-select: none;
}
.🥝-text-box:where(textarea),
.🥝-text-box :where(textarea) {
resize: block;
}
.🥝-text-box :where(input, textarea) {
background-color: var(--🥝text-box-background-color);
outline: unset;
min-height: inherit;
border: none;
flex: 999 1 0%;
align-self: stretch;
transition: background-color 0.15s ease-out;
}
}
@layer states {
@media (any-hover: hover) {
.🥝-text-box:where(:hover) {
--🌀text-box-state: var(--🌀text-box-state--hover);
}
}
.🥝-text-box:where(
:has(:is(input, textarea):focus-visible),
:is(input, textarea):focus-visible
) {
outline: var(--🥝focus-outline);
outline-offset: var(--🥝focus-outline-offset);
--🥝text-box-border-color: var(--stratakit-color-border-accent-strong);
--🥝icon-color: var(--stratakit-color-icon-accent-strong);
}
@supports not selector(:has(+ *)) {
.🥝-text-box:where(:not(input, textarea):focus-within) {
outline: var(--🥝focus-outline);
outline-offset: var(--🥝focus-outline-offset);
--🥝text-box-border-color: var(--stratakit-color-border-accent-strong);
--🥝icon-color: var(--stratakit-color-icon-accent-strong);
}
}
.🥝-text-box:where(
:disabled,
[aria-disabled="true"],
[data-kiwi-disabled="true"],
:has(:is(input, textarea):is(:disabled, [aria-disabled="true"]))
) {
--🌀text-box-state: var(--🌀text-box-state--disabled);
box-shadow: none;
color: var(--stratakit-color-text-neutral-disabled);
--🥝text-box-cursor: not-allowed;
}
}
@layer base.🌀 {
.🥝-text-box {
--🌀text-box-state: var(--🌀text-box-state--default);
--🌀text-box-state--default: var(--🌀text-box-state,);
--🌀text-box-state--hover: var(--🌀text-box-state,);
--🌀text-box-state--disabled: var(--🌀text-box-state,);
}
}
@layer base {
.🥝-text-box-decoration {
flex-shrink: 0;
}
}
@media (forced-colors: active) {
.🥝-text-box {
--🥝text-box-background-color: Field;
--🥝text-box-border-color: CanvasText;
color: fieldtext;
}
.🥝-text-box:where(
:disabled,
[aria-disabled="true"],
[data-kiwi-disabled="true"],
:has(:is(input, textarea):is(:disabled, [aria-disabled="true"]))
) {
--🥝text-box-border-color: GrayText;
color: graytext;
}
}
@layer base {
.🥝-tooltip {
font-size: var(--stratakit-font-size-12);
line-height: 1.3333;
}
.🥝-tooltip {
background-color: var(--stratakit-color-bg-elevation-emphasis);
box-shadow: var(--stratakit-shadow-tooltip-base);
color: var(--stratakit-color-text-neutral-emphasis);
justify-content: center;
gap: var(--stratakit-space-x1);
border: 1px solid var(--stratakit-color-border-elevation-base);
padding-block: calc(var(--stratakit-space-x1) - 1px);
padding-inline: calc(var(--stratakit-space-x2) - 1px);
border-radius: 4px;
min-block-size: 1rem;
max-inline-size: 12.25rem;
display: flex;
}
}
@layer base {
.🥝-field {
gap: var(--stratakit-space-x1);
--🥝field-description-column: label-start/label-end;
grid-template-columns: [label-start] auto [label-end control-start] auto [control-end];
justify-content: start;
align-items: center;
display: grid;
}
.🥝-field:where(
[data-kiwi-control-type="checkable"][data-kiwi-label-placement="after"]
) {
grid-template-columns: [control-start] auto [control-end label-start] auto [label-end];
}
.🥝-field:where([data-kiwi-control-type="textlike"]) {
--🥝field-description-column: control-start/control-end;
align-items: baseline;
}
.🥝-field:where([data-kiwi-control-type="textlike"]):where(
:not([data-kiwi-layout="inline"])
) {
grid-template-columns: [label-start control-start] auto [label-end control-end];
justify-content: stretch;
}
.🥝-field :where(.🥝-description) {
grid-column: var(--🥝field-description-column);
}
}
@layer base {
.🥝-list-item {
cursor: pointer;
line-height: 1.2;
font-size: var(--stratakit-font-size-12);
min-block-size: var(--🥝list-item-height, 1.75rem);
padding-inline: var(--stratakit-space-x2);
background-color: var(--🥝list-item-background-color);
--🥝list-item-background-color: var(
--🌀list-item-state--default,
transparent
)
var(
--🌀list-item-state--hover,
var(--stratakit-color-bg-glow-on-surface-neutral-hover)
)
var(
--🌀list-item-state--pressed,
var(--stratakit-color-bg-glow-on-surface-neutral-pressed)
)
var(
--🌀list-item-state--active,
var(--stratakit-color-bg-glow-on-surface-accent-pressed)
)
var(
--🌀list-item-state--active-hover,
color-mix(
in oklch,
var(--stratakit-color-bg-glow-on-surface-accent-pressed) 100%,
var(--stratakit-color-glow-hue)
var(--stratakit-color-bg-glow-strong-hover-\%)
)
)
var(--🌀list-item-state--disabled, transparent);
color: var(
--🥝list-item-color,
var(
--🌀list-item-state--default,
var(--stratakit-color-text-neutral-primary)
)
var(
--🌀list-item-state--hover,
var(--stratakit-color-text-neutral-primary)
)
var(
--🌀list-item-state--pressed,
var(--stratakit-color-text-neutral-primary)
)
var(
--🌀list-item-state--active,
var(--stratakit-color-text-accent-strong)
)
var(
--🌀list-item-state--active-hover,
var(--stratakit-color-text-accent-strong)
)
var(
--🌀list-item-state--disabled,
var(--stratakit-color-text-neutral-disabled)
)
);
--🥝icon-color: var(
--🌀list-item-state--default,
var(--stratakit-color-icon-neutral-base)
)
var(
--🌀list-item-state--hover,
var(--stratakit-color-icon-neutral-hover)
)
var(
--🌀list-item-state--pressed,
var(--stratakit-color-icon-neutral-hover)
)
var(
--🌀list-item-state--active,
var(--stratakit-color-icon-accent-strong)
)
var(
--🌀list-item-state--active-hover,
var(--stratakit-color-icon-accent-strong)
)
var(
--🌀list-item-state--disabled,
var(--stratakit-color-icon-neutral-disabled)
);
grid-template-columns:
[decoration-before-start] auto [decoration-before-end content-start] minmax(
0px,
1fr
)
[content-end decoration-after-start] auto [decoration-after-end];
align-content: center;
align-items: center;
display: grid;
}
}
@layer states {
@media (any-hover: hover) {
.🥝-list-item:where(:hover) {
--🌀list-item-state: var(--🌀list-item-state--hover);
}
}
.🥝-list-item:where(:active) {
--🌀list-item-state: var(--🌀list-item-state--pressed);
}
.🥝-list-item:where(:disabled, [aria-disabled="true"]) {
--🌀list-item-state: var(--🌀list-item-state--disabled);
cursor: not-allowed;
}
}
@layer modifiers {
.🥝-list-item:where(:has(> :nth-child(2 of .🥝-list-item-content))) {
--🥝list-item-height: 2.75rem;
grid-template-rows: repeat(auto-fit, minmax(0px, auto));
}
}
@layer base.🌀 {
.🥝-list-item {
--🌀list-item-state: var(--🌀list-item-state--default);
--🌀list-item-state--default: var(--🌀list-item-state,);
--🌀list-item-state--hover: var(--🌀list-item-state,);
--🌀list-item-state--pressed: var(--🌀list-item-state,);
--🌀list-item-state--active: var(--🌀list-item-state,);
--🌀list-item-state--active-hover: var(--🌀list-item-state,);
--🌀list-item-state--disabled: var(--🌀list-item-state,);
}
}
@layer base {
.🥝-list-item-content {
grid-column: content;
}
}
@layer base {
.🥝-list-item-decoration {
grid-area: 1 / decoration-before / -1;
align-self: start;
align-items: center;
margin-inline-end: var(--stratakit-space-x1);
display: flex;
}
:where(.🥝-list-item-content) ~ .🥝-list-item-decoration {
margin-inline: var(--stratakit-space-x1) 0;
grid-column: decoration-after;
}
}
@media (forced-colors: active) {
.🥝-list-item:where(:disabled, [aria-disabled="true"]) {
color: graytext;
}
}
.🥝-accordion-item {
--🥝accordion-item-gap: var(--stratakit-space-x3);
--🥝accordion-item-padding: var(--stratakit-space-x3);
}
@layer base {
.🥝-accordion-item {
contain: paint;
border-block-end: 1px solid var(--stratakit-color-border-neutral-muted);
grid-template-rows: [header-start] auto [header-end content-start] auto [content-end];
grid-template-columns:
[marker-before-start] auto [marker-before-end decoration-before-start] auto [decoration-before-end header-content-start body-content-start] minmax(
0px,
1fr
)
[header-content-end decoration-after-start] auto [decoration-after-end marker-after-start] auto [marker-after-end body-content-end];
display: grid;
}
}
@layer states {
.🥝-accordion-item:where([data-kiwi-open="true"]) {
--🥝chevron-down-rotate: -0.5turn;
}
}
@layer base {
.🥝-accordion-item-header {
background-color: var(--🥝accordion-item-header-background-color);
padding: var(--🥝accordion-item-padding);
--🥝accordion-item-header-background-color: var(
--🌀accordion-item-header-state--default,
transparent
)
var(
--🌀accordion-item-header-state--hover,
var(--stratakit-color-bg-glow-on-surface-neutral-hover)
)
var(
--🌀accordion-item-header-state--pressed,
var(--stratakit-color-bg-glow-on-surface-neutral-pressed)
);
grid-area: header / marker-before-start / header / marker-after-end;
grid-template-columns: inherit;
align-items: center;
transition: background-color 0.15s ease-out;
display: grid;
position: relative;
}
@supports (grid-template-columns: subgrid) {
.🥝-accordion-item-header {
grid-template-columns: subgrid;
}
}
}
@layer states {
@media (any-hover: hover) {
.🥝-accordion-item-header:where(:hover) {
--🌀accordion-item-header-state: var(
--🌀accordion-item-header-state--hover
);
}
}
.🥝-accordion-item-header:where(:active) {
--🌀accordion-item-header-state: var(
--🌀accordion-item-header-state--pressed
);
}
}
@layer base.🌀 {
.🥝-accordion-item-header {
--🌀accordion-item-header-state: var(
--🌀accordion-item-header-state--default
);
--🌀accordion-item-header-state--default: var(
--🌀accordion-item-header-state,
);
--🌀accordion-item-header-state--hover: var(
--🌀accordion-item-header-state,
);
--🌀accordion-item-header-state--pressed: var(
--🌀accordion-item-header-state,
);
}
}
@layer base {
.🥝-accordion-item-marker {
pointer-events: none;
grid-area: 1 / marker-before;
margin-inline-start: calc(-1 * var(--🥝ghost-inline-offset));
margin-inline-end: var(--🥝accordion-item-gap);
}
:where(.🥝-accordion-item-heading, .🥝-accordion-item-button)
~ .🥝-accordion-item-marker {
grid-column: marker-after;
margin-inline-start: var(--🥝accordion-item-gap);
margin-inline-end: calc(-1 * var(--🥝ghost-inline-offset));
}
}
@layer base {
.🥝-accordion-item-label.🥝-text {
hyphens: auto;
overflow-wrap: break-word;
text-box: cap alphabetic;
font-weight: 500;
display: inline-block;
}
}
@layer base {
.🥝-accordion-item-button {
cursor: pointer;
border-radius: var(--stratakit-space-x3);
--🥝focus-outline-offset: calc(var(--stratakit-space-x1) * -1);
grid-column: header-content;
}
.🥝-accordion-item-button::after {
content: "";
border-radius: inherit;
position: absolute;
inset: 0px;
}
}
@layer states {
.🥝-accordion-item-button:focus-visible {
outline: 0px;
}
.🥝-accordion-item-button:focus-visible::after {
outline: var(--🥝focus-outline);
outline-offset: var(--🥝focus-outline-offset);
}
}
@layer base {
.🥝-accordion-item-content {
padding-block: var(--🥝accordion-item-padding);
text-box: cap alphabetic;
color: var(--stratakit-color-text-neutral-secondary);
grid-area: content / body-content;
}
}
@layer base {
.🥝-accordion-item-decoration {
align-items: center;
gap: var(--stratakit-space-x1);
grid-column: decoration-before;
margin-inline-end: var(--🥝accordion-item-gap);
display: flex;
}
:where(.🥝-accordion-item-heading, .🥝-accordion-item-button)
~ .🥝-accordion-item-decoration {
grid-column: decoration-after;
margin-inline-start: var(--🥝accordion-item-gap);
margin-inline-end: 0px;
}
}
@layer base {
.🥝-accordion-item-heading {
text-box: cap alphabetic;
grid-column: header-content;
margin-block: 0px;
}
}
@layer base {
.🥝-banner {
background-color: var(--🥝banner-color-background);
border: 1px solid var(--🥝banner-color-border);
padding: var(--stratakit-space-x3);
border-radius: 8px;
grid-template-columns: [start] auto [content] minmax(0px, 1fr) [end] auto;
align-items: center;
inline-size: 100%;
display: grid;
}
}
@layer modifiers {
.🥝-banner:where([data-kiwi-variant="outline"]) {
--🥝banner-color-background: var(--stratakit-color-bg-elevation-base);
}
.🥝-banner:where([data-kiwi-variant="outline"]):where(
[data-kiwi-tone="neutral"]
) {
--🥝banner-color-border: var(--stratakit-color-border-neutral-base);
}
.🥝-banner:where([data-kiwi-tone="info"]) {
--🥝banner-color-border: var(--stratakit-color-border-info-base);
--🥝icon-color: var(--stratakit-color-icon-info-base);
}
.🥝-banner:where([data-kiwi-tone="positive"]) {
--🥝banner-color-border: var(--stratakit-color-border-positive-base);
--🥝icon-color: var(--stratakit-color-icon-positive-base);
}
.🥝-banner:where([data-kiwi-tone="attention"]) {
--🥝banner-color-border: var(--stratakit-color-border-attention-base);
--🥝icon-color: var(--stratakit-color-icon-attention-base);
}
.🥝-banner:where([data-kiwi-tone="critical"]) {
--🥝banner-color-border: var(--stratakit-color-border-critical-base);
--🥝icon-color: var(--stratakit-color-icon-critical-base);
}
}
@layer base {
.🥝-banner-icon {
grid-area: 1 / start;
align-self: start;
margin-inline-end: var(--stratakit-space-x2);
}
}
@layer base {
.🥝-banner-label {
grid-column: content;
align-self: start;
margin-block-end: var(--stratakit-space-x1);
font-weight: 500;
}
}
@layer base {
.🥝-banner-message {
overflow-wrap: break-word;
hyphens: auto;
grid-column: content;
overflow: hidden;
}
}
@layer base {
.🥝-banner-actions {
justify-self: start;
align-items: baseline;
gap: var(--stratakit-space-x2);
flex-wrap: wrap;
grid-column: content;
margin-block-start: var(--stratakit-space-x3);
display: flex;
}
}
@layer base {
.🥝-banner-dismiss-button {
grid-area: 1 / end;
align-self: start;
margin-inline-start: var(--stratakit-space-x3);
}
}
@media (forced-colors: active) {
.🥝-banner {
--🥝icon-color: CanvasText;
}
}
@layer base {
.🥝-chip {
isolation: isolate;
--🥝chip-padding-inline: var(--stratakit-space-x2);
padding-inline: var(--🥝chip-padding-inline);
border: none;
border-radius: 9999px;
align-items: center;
min-block-size: 1.5rem;
display: inline-flex;
position: relative;
}
}
.🥝-chip::before {
z-index: -1;
content: "";
border-radius: inherit;
border: 1px solid var(--stratakit-color-border-neutral-base);
pointer-events: none;
position: absolute;
inset: 0px;
}
@layer modifiers {
.🥝-chip:where([data-kiwi-variant="solid"]) {
background-color: var(--stratakit-color-bg-neutral-base);
}
.🥝-chip:where([data-kiwi-variant="outline"]) {
background-color: var(--stratakit-color-bg-page-base);
}
}
@layer base {
.🥝-chip-label:where(button) {
border-radius: inherit;
}
.🥝-chip-label:where(button)::after {
content: "";
border-radius: inherit;
position: absolute;
inset: 0px;
}
}
@layer base {
.🥝-chip-dismiss-button.🥝-icon-button {
border-radius: inherit;
margin-inline-end: calc(-1 * var(--🥝chip-padding-inline));
position: relative;
}
}
@layer base {
.🥝-dropdown-menu {
background-color: var(--stratakit-color-bg-elevation-level-1);
min-inline-size: min(95vi, 164px);
padding: var(--stratakit-space-x1);
box-shadow: var(--stratakit-shadow-dropdown-base);
border-radius: 8px;
flex-direction: column;
display: flex;
}
}
@layer states {
.🥝-dropdown-menu-button:where([aria-expanded="true"]) {
--🥝disclosure-arrow-rotate: 0.5turn;
}
}
@layer base {
.🥝-dropdown-menu-item.🥝-list-item {
border-radius: 4px;
}
}
@layer states {
.🥝-dropdown-menu-item.🥝-list-item:where(
[role="menuitemcheckbox"]:not([aria-checked="true"])
) {
--🥝dropdown-menu-checkmark-visibility: hidden;
}
}
@layer base {
.🥝-dropdown-menu-item-dot.🥝-dot {
align-self: center;
}
}
@layer base {
.🥝-dropdown-menu-checkmark {
visibility: var(--🥝dropdown-menu-checkmark-visibility);
}
}
@layer base {
.🥝-dropdown-menu-item-shortcuts {
margin-inline-start: var(--stratakit-space-x2);
}
}
@media (forced-colors: active) {
.🥝-dropdown-menu {
border: 1px solid;
}
}
@layer base {
.🥝-error-region {
z-index: 1;
position: relative;
}
}
@layer states {
.🥝-error-region:where([data-kiwi-expanded="true"]) {
--🥝chevron-down-rotate: -0.5turn;
--🥝error-region-header-border-end-radius: 0;
}
.🥝-error-region:where([data-kiwi-visible="true"]) {
padding-inline: var(--stratakit-space-x1);
padding-block: var(--stratakit-space-x1);
block-size: 2.625rem;
}
.🥝-error-region:where([data-kiwi-visible="false"]) {
--🥝error-region-container-display: none;
}
}
@layer base {
.🥝-error-region-container {
isolation: isolate;
display: var(--🥝error-region-container-display, flex);
border: 1px solid var(--stratakit-color-border-attention-base);
background-color: var(--stratakit-color-bg-elevation-base);
box-shadow: var(--stratakit-shadow-surface-sm);
border-radius: 8px;
flex-direction: column;
position: relative;
}
@media (prefers-reduced-motion: no-preference) {
.🥝-error-region-container::before {
content: "";
border-radius: inherit;
z-index: -1;
position: absolute;
inset: 0px;
}
}
}
@layer base {
.🥝-error-region-header {
min-block-size: 2rem;
border-start-start-radius: 7px;
border-start-end-radius: 7px;
border-end-end-radius: var(
--🥝error-region-header-border-end-radius,
calc(8px - 1px)
);
border-end-start-radius: var(
--🥝error-region-header-border-end-radius,
calc(8px - 1px)
);
flex-wrap: wrap;
padding-inline-start: var(--stratakit-space-x2);
padding-inline-end: var(--stratakit-space-x1);
font-weight: 400;
transition: border-radius linear 0.15s;
}
}
@layer base {
.🥝-error-region-icon {
--🥝icon-color: var(--stratakit-color-icon-attention-base);
}
}
@layer base {
.🥝-error-region-label {
text-align: start;
overflow-wrap: break-word;
flex: 1 1 0%;
max-inline-size: 100%;
}
}
@layer base {
.🥝-error-region-dialog {
transition:
max-block-size 0.15s linear,
opacity 0.15s linear;
overflow: hidden;
}
}
@layer states {
.🥝-error-region-dialog:where(:not([data-enter])) {
opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
.🥝-error-region-dialog:where(:not([data-enter])) {
max-block-size: 0px;
}
}
.🥝-error-region-dialog:where([data-enter]) {
opacity: 1;
}
@media (prefers-reduced-motion: no-preference) {
.🥝-error-region-dialog:where([data-enter]) {
max-block-size: calc(348px - 2rem);
}
@supports (interpolate-size: allow-keywords) {
.🥝-error-region-dialog:where([data-enter]) {
max-block-size: max-content;
}
}
}
}
@layer base {
.🥝-error-region-items {
border-block-start: 1px solid var(--stratakit-color-border-page-base);
max-block-size: calc(348px - 2rem);
overflow: auto;
}
}
@layer base {
.🥝-error-region-item {
padding-block: calc(
var(--stratakit-space-x1) + var(--stratakit-space-x2)
);
flex-direction: column;
padding-inline-start: calc(
var(--stratakit-space-x2) + 1rem + var(--stratakit-space-x1)
);
padding-inline-end: var(--stratakit-space-x1);
display: flex;
}
.🥝-error-region-item:where(:not(:nth-child(1 of .🥝-error-region-item))) {
border-block-start: 1px solid var(--stratakit-color-border-page-base);
}
}
@layer base {
.🥝-error-region-item-actions {
margin-block-start: var(--stratakit-space-x2);
}
}
@layer base {
.🥝-table:where(table) {
table-layout: fixed;
border-collapse: separate;
border-spacing: 0px;
inline-size: 100%;
}
}
@layer base {
.🥝-table-header {
color: var(--stratakit-color-text-neutral-secondary);
}
}
@layer base {
.🥝-table-row:where([role="row"]) {
display: flex;
}
}
@layer base {
.🥝-table-caption,
.🥝-table-cell {
min-block-size: 3rem;
padding-block: var(--stratakit-space-x2);
overflow-wrap: anywhere;
hyphens: auto;
align-content: center;
padding-inline-start: var(--stratakit-space-x4);
padding-inline-end: var(--stratakit-space-x3);
}
:is(.🥝-table-caption, .🥝-table-cell):where(th, td) {
block-size: 3rem;
}
}
@layer base {
.🥝-table-cell {
background-color: var(
--🌀table-cell-state--default,
var(--stratakit-color-bg-page-base)
)
var(
--🌀table-cell-state--hover,
color-mix(
in oklch,
var(--stratakit-color-bg-page-base) 100%,
var(--stratakit-color-glow-hue)
var(--stratakit-color-bg-glow-base-hover-\%)
)
)
var(
--🌀table-cell-state--active,
var(--stratakit-color-bg-glow-on-surface-accent-pressed)
)
var(
--🌀table-cell-state--active-hover,
color-mix(
in oklch,
var(--stratakit-color-bg-glow-on-surface-accent-pressed) 100%,
var(--stratakit-color-glow-hue)
var(--stratakit-color-bg-glow-strong-hover-\%)
)
);
--🥝table-cell-border-color--active: var(
--stratakit-color-border-accent-strong
);
border-block-end: 1px solid
var(
--🌀table-cell-state--default,
var(--stratakit-color-border-neutral-muted)
)
var(
--🌀table-cell-state--hover,
var(--stratakit-color-border-neutral-muted)
)
var(
--🌀table-cell-state--active,
var(--🥝table-cell-border-color--active)
)
var(
--🌀table-cell-state--active-hover,
var(--🥝table-cell-border-color--active)
);
min-inline-size: 4rem;
position: relative;
}
.🥝-table-cell:where(:not(th, td)) {
column-gap: var(--stratakit-space-x2);
flex-grow: 1;
flex-basis: 4rem;
}
.🥝-table-cell:where(th) {
font-weight: inherit;
}
.🥝-table-cell::before {
content: "";
pointer-events: none;
border-block-start: 1px solid
var(--🌀table-cell-state--default, transparent)
var(--🌀table-cell-state--hover, transparent)
var(
--🌀table-cell-state--active,
var(--🥝table-cell-border-color--active)
)
var(
--🌀table-cell-state--active-hover,
var(--🥝table-cell-border-color--active)
);
position: absolute;
inset: -1px 0px 0px;
}
}
@layer states {
@media (any-hover: hover) {
.🥝-table-cell:where(:hover) {
--🌀table-cell-state: var(--🌀table-cell-state--hover);
}
:where(.🥝-table-row:hover) .🥝-table-cell:where([role="cell"], td) {
--🌀table-cell-state: var(--🌀table-cell-state--hover);
}
}
:where(
.🥝-table-row:has(
input[type="checkbox"]:checked,
[role="checkbox"][aria-checked="true"]
)
)
.🥝-table-cell:where([role="cell"], td) {
--🌀table-cell-state: var(--🌀table-cell-state--active);
}
@media (any-hover: hover) {
:where(
.🥝-table-row:hover:has(
input[type="checkbox"]:checked,
[role="checkbox"][aria-checked="true"]
)
)
.🥝-table-cell:where([role="cell"], td) {
--🌀table-cell-state: var(--🌀table-cell-state--active-hover);
}
}
}
@layer base.🌀 {
.🥝-table-cell {
--🌀table-cell-state: var(--🌀table-cell-state--default);
--🌀table-cell-state--default: var(--🌀table-cell-state,);
--🌀table-cell-state--hover: var(--🌀table-cell-state,);
--🌀table-cell-state--active: var(--🌀table-cell-state,);
--🌀table-cell-state--active-hover: var(--🌀table-cell-state,);
}
}
@layer base {
.🥝-tab-list {
--🥝tab-active-stripe-gap: var(--stratakit-space-x2);
--🥝tab-active-stripe-size: var(--stratakit-space-x05);
--🥝tab-padding-inline: var(--stratakit-space-x1);
gap: var(--stratakit-space-x2);
display: flex;
position: relative;
}
@supports (position-anchor: --foo) {
.🥝-tab-list::after {
content: "";
position-anchor: --🥝active-tab;
inline-size: calc(
anchor-size(inline) - 2 * var(--🥝tab-padding-inline)
);
block-size: var(--🥝tab-active-stripe-size);
background-color: var(--🥝tab-active-stripe-color);
will-change: transform;
position: absolute;
inset-block-end: calc(anchor(end) - var(--🥝tab-active-stripe-gap));
inset-inline-start: calc(anchor(start) + var(--🥝tab-padding-inline));
}
}
}
@layer modifiers {
.🥝-tab-list[aria-orientation="horizontal"] {
padding-block-end: var(--🥝tab-active-stripe-gap);
}
.🥝-tab-list:where([data-kiwi-tone="neutral"]) {
--🥝tab-active-stripe-color: var(
--stratakit-color-border-neutral-inverse
);
}
.🥝-tab-list:where([data-kiwi-tone="accent"]) {
--🥝tab-active-stripe-color: var(--stratakit-color-border-accent-strong);
}
}
@layer base {
.🥝-tab {
font-size: var(--stratakit-font-size-12);
color: var(--🥝tab-color);
background-color: var(--🥝tab-background-color);
block-size: 1.25rem;
padding-inline: var(--🥝tab-padding-inline);
user-select: none;
white-space: nowrap;
cursor: pointer;
align-items: center;
gap: var(--stratakit-space-x1);
border: none;
border-radius: 4px;
transition:
background-color 0.15s ease-out,
color 0.15s ease-out;
display: inline-flex;
position: relative;
}
.🥝-tab::before {
content: "";
inset-inline: 0px;
inset-block: 0 calc(var(--🥝tab-active-stripe-gap) * -1);
position: absolute;
}
}
@layer modifiers {
:where(.🥝-tab-list[data-kiwi-tone="neutral"]) .🥝-tab {
--🥝tab-background-color: var(--🌀tab-state--default, transparent)
var(
--🌀tab-state--hover,
var(--stratakit-color-bg-glow-on-surface-neutral-hover)
)
var(--🌀tab-state--selected, transparent)
var(--🌀tab-state--disabled, transparent);
--🥝tab-color: var(
--🌀tab-state--default,
var(--stratakit-color-text-neutral-tertiary)
)
var(--🌀tab-state--hover, var(--stratakit-color-text-neutral-primary))
var(
--🌀tab-state--selected,
var(--stratakit-color-text-neutral-primary)
)
var(
--🌀tab-state--disabled,
var(--stratakit-color-text-neutral-disabled)
);
-webkit-tap-highlight-color: var(
--stratakit-color-bg-glow-on-surface-neutral-pressed
);
}
:where(.🥝-tab-list[data-kiwi-tone="accent"]) .🥝-tab {
--🥝tab-background-color: var(--🌀tab-state--default, transparent)
var(
--🌀tab-state--hover,
var(--stratakit-color-bg-glow-on-surface-accent-hover)
)
var(--🌀tab-state--selected, transparent)
var(--🌀tab-state--disabled, transparent);
--🥝tab-color: var(
--🌀tab-state--default,
var(--stratakit-color-text-neutral-tertiary)
)
var(--🌀tab-state--hover, var(--stratakit-color-text-accent-strong))
var(--🌀tab-state--selected, var(--stratakit-color-text-accent-strong))
var(
--🌀tab-state--disabled,
var(--stratakit-color-text-neutral-disabled)
);
-webkit-tap-highlight-color: var(
--stratakit-color-bg-glow-on-surface-accent-pressed
);
}
}
@layer states {
.🥝-tab:where([aria-selected="true"]) {
--🌀tab-state: var(--🌀tab-state--selected);
anchor-name: --🥝active-tab;
}
@supports not (anchor-name: --foo) {
.🥝-tab:where([aria-selected="true"])::after {
content: "";
background-color: var(--🥝tab-active-stripe-color);
block-size: var(--🥝tab-active-stripe-size);
inset-inline: var(--🥝tab-padding-inline);
inset-block: auto calc(var(--🥝tab-active-stripe-gap) * -1);
position: absolute;
}
}
@media (any-hover: hover) {
.🥝-tab:where(:hover) {
--🌀tab-state: var(--🌀tab-state--hover);
}
}
.🥝-tab:where(:disabled, [aria-disabled="true"]) {
--🌀tab-state: var(--🌀tab-state--disabled);
--🥝tab-active-stripe-color: var(
--stratakit-color-border-neutral-disabled
);
cursor: not-allowed;
-webkit-tap-highlight-color: transparent;
}
}
@layer base.🌀 {
.🥝-tab {
--🌀tab-state: var(--🌀tab-state--default);
--🌀tab-state--default: var(--🌀tab-state,);
--🌀tab-state--hover: var(--🌀tab-state,);
--🌀tab-state--selected: var(--🌀tab-state,);
--🌀tab-state--disabled: var(--🌀tab-state,);
}
}
@layer base {
.🥝-tab-panel {
--🥝focus-outline-offset: calc(var(--stratakit-space-x05) * -1);
}
.🥝-tab-panel:not([data-open]) {
display: none !important;
}
}
@media (forced-colors: active) {
.🥝-tab-list,
.🥝-tab {
--🥝tab-active-stripe-color: CanvasText;
}
.🥝-tab {
--🥝tab-color: CanvasText;
}
.🥝-tab:where([aria-selected="true"]) {
forced-color-adjust: none;
--🥝tab-background-color: SelectedItem;
--🥝tab-color: SelectedItemText;
}
.🥝-tab:where(:disabled, [aria-disabled="true"]) {
--🥝tab-color: GrayText;
}
}
@layer base {
.🥝-toolbar {
gap: var(--stratakit-space-x1);
background-color: var(--stratakit-color-bg-page-base);
box-shadow: var(--stratakit-shadow-toolbar-base);
padding: var(--stratakit-space-x1);
border-radius: 8px;
align-items: center;
display: inline-flex;
}
}
@media (forced-colors: active) {
.🥝-toolbar {
border: 1px solid;
}
}
@layer base {
.🥝-tree {
background-color: var(--stratakit-color-bg-page-base);
align-content: start;
display: grid;
overflow: auto;
}
}
@layer base {
.🥝-tree-item {
min-inline-size: max-content;
position: relative;
}
}
@layer states {
.🥝-tree-item:focus-visible {
isolation: isolate;
outline: none;
}
.🥝-tree-item:focus-visible::before {
content: "";
z-index: 1;
pointer-events: none;
outline: var(--🥝focus-outline);
outline-offset: -1px;
position: absolute;
inset: 0px;
}
@media (any-hover: hover) {
.🥝-tree-item:where(
:not(
:hover,
:focus-visible,
:has(:focus-visible),
:has([data-has-popover-open])
)
) {
--🥝tree-item-action-visibility: hidden;
}
@supports not selector(:has(+ *)) {
.🥝-tree-item {
--🥝tree-item-action-visibility: visible;
}
}
}
}
@layer base {
.🥝-tree-item-node.🥝-list-item {
isolation: isolate;
--🥝list-item-color: var(--🥝tree-item-color);
padding-inline-start: calc(
var(--stratakit-space-x2) +
calc(var(--stratakit-space-x1) + var(--stratakit-space-x05)) *
(var(--🥝tree-item-level) - 1)
);
padding-inline-end: 0px;
position: relative;
}
}
@layer modifiers {
.🥝-tree-item-node.🥝-list-item:where([data-kiwi-error="true"]) {
--🥝icon-color: var(--stratakit-color-icon-attention-base);
--🥝tree-item-color: var(--stratakit-color-text-attention-base);
}
}
@layer states {
.🥝-tree-item-node.🥝-list-item:where([data-kiwi-selected="true"]) {
--🌀list-item-state: var(--🌀list-item-state--active);
}
@media (any-hover: hover) {
.🥝-tree-item-node.🥝-list-item:where(:hover[data-kiwi-selected="true"]) {
--🌀list-item-state: var(--🌀list-item-state--active-hover);
}
}
.🥝-tree-item-node.🥝-list-item:where([data-kiwi-expanded="false"]) {
--🥝chevron-down-rotate: -0.25turn;
}
.🥝-tree-item-node.🥝-list-item:where(:not([data-kiwi-expanded])) {
--🥝tree-item-expander-visibility: hidden;
}
}
@layer base {
.🥝-tree-item-content.🥝-list-item-content {
white-space: nowrap;
}
}
@layer base {
.🥝-tree-item-description.🥝-list-item-content {
color: var(
--🥝tree-item-color,
var(
--🌀list-item-state--default,
var(--stratakit-color-text-neutral-secondary)
)
);
}
}
@layer base {
.🥝-tree-item-actions-container.🥝-list-item-decoration {
background-color: var(--stratakit-color-bg-page-base);
visibility: var(
--🥝tree-item-actions-container-visibility,
var(--🥝tree-item-action-visibility)
);
align-self: stretch;
padding-inline-end: var(--stratakit-space-x1);
display: inline-flex;
position: sticky;
inset-inline-end: 0px;
}
.🥝-tree-item-actions-container.🥝-list-item-decoration::before {
content: "";
background-color: var(--🥝list-item-background-color);
z-index: -1;
position: absolute;
inset: 0px;
}
}
@layer modifiers {
.🥝-tree-item-actions-container.🥝-list-item-decoration:where(
:has(.🥝-tree-item-action[data-kiwi-visible="true"])
) {
--🥝tree-item-actions-container-visibility: visible;
}
}
@layer base {
.🥝-tree-item-action.🥝-icon-button {
visibility: var(--🥝tree-item-action-visibility);
transition: visibility 16ms;
}
}
@layer modifiers {
.🥝-tree-item-action.🥝-icon-button:where([data-kiwi-visible="false"]) {
--🥝tree-item-action-visibility: hidden;
}
.🥝-tree-item-action.🥝-icon-button:where([data-kiwi-visible="true"]) {
--🥝tree-item-action-visibility: visible;
}
}
@layer base {
.🥝-tree-item-expander.🥝-icon-button {
visibility: var(--🥝tree-item-expander-visibility);
z-index: 1;
}
}
@layer base {
.🥝-tree-item-decoration {
align-items: center;
gap: var(--stratakit-space-x1);
display: flex;
}
}
@media (forced-colors: active) {
.🥝-tree-item-node.🥝-list-item {
--🥝list-item-background-color: Canvas;
--🥝tree-item-color: CanvasText;
}
.🥝-tree-item-node.🥝-list-item:where(
[data-kiwi-error="true"],
[data-kiwi-selected="true"]
) {
forced-color-adjust: none;
}
.🥝-tree-item-node.🥝-list-item:where([data-kiwi-error="true"])
.🥝-tree-item-content,
.🥝-tree-item-node.🥝-list-item:where([data-kiwi-error="true"])
.🥝-tree-item-decoration {
color: marktext;
background-color: mark;
}
.🥝-tree-item-node.🥝-list-item:where([data-kiwi-selected="true"]) {
--🥝list-item-background-color: SelectedItem;
--🥝tree-item-color: SelectedItemText;
}
}
}