fluentui-svelte 0.1.0

package/dist/components/tree-view/tree-view.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { TreeViewProps } from './types.js';
+declare const TreeView: import("svelte").Component<TreeViewProps, {}, "ref" | "openItems" | "checkedItems">;
+type TreeView = ReturnType<typeof TreeView>;
+export default TreeView;

package/dist/components/tree-view/tree-view.svelte.js

@@ -0,0 +1,111 @@
+import { createFSContext } from '../../internal/index.js';
+export const [getTreeViewContext, setTreeViewContext] = createFSContext();
+export const [getTreeViewDepth, setTreeViewDepth] = createFSContext();
+export const [getTreeViewItemContext, setTreeViewItemContext] = createFSContext();
+/**  */
+export function cascadeCheck(itemId, state, checked) {
+    const node = state.get(itemId);
+    if (!node)
+        throw new Error(`Node with id ${itemId} not found in TREE_NODES.`);
+    if (node.disabled)
+        return true;
+    let indeterminate = false;
+    function checkItem(id, _checked, _indeterminate = false) {
+        const _node = state.get(id);
+        if (!_node)
+            throw new Error(`[checkItem()] - Node with id ${id} not found in TREE_NODES.`);
+        _node.checked = _checked;
+        _node.indeterminate = _indeterminate;
+        state.set(id, _node);
+    }
+    if (node.type === 'branch') {
+        const children = state.values().filter((n) => n.parentId === itemId);
+        for (const child of children) {
+            if (child.disabled) {
+                indeterminate = true;
+                continue;
+            }
+            let childIndeterminate = false;
+            if (child.type === 'branch') {
+                childIndeterminate = cascadeCheck(child.id, state, checked);
+                indeterminate = indeterminate || childIndeterminate;
+            }
+            checkItem(child.id, checked, childIndeterminate);
+        }
+    }
+    // Check Current (leaf or branch) Node
+    checkItem(itemId, checked, checked ? indeterminate : false);
+    return indeterminate;
+}
+export function bubbleCheck(itemId, state, checked, indeterminate = false) {
+    const node = state.get(itemId);
+    if (!node)
+        throw new Error(`Node with id ${itemId} not found in TREE_NODES.`);
+    // Get parent here to avoid infinite recursion if parent is not found in TREE_NODES
+    const parent = state.get(node?.parentId || '');
+    if (!parent) {
+        return;
+    }
+    let _indeterminate = indeterminate;
+    if (!_indeterminate) {
+        const siblings = state.values().filter((n) => n.parentId === node.parentId);
+        const { someSiblingsChecked, allSiblingsChecked } = siblings.reduce((acc, sibling) => {
+            if (sibling.disabled) {
+                acc.allSiblingsChecked = false;
+                return acc;
+            }
+            if (sibling.checked)
+                acc.someSiblingsChecked = true;
+            else
+                acc.allSiblingsChecked = false;
+            return acc;
+        }, { someSiblingsChecked: false, allSiblingsChecked: true });
+        _indeterminate = !allSiblingsChecked && someSiblingsChecked;
+        parent.checked = allSiblingsChecked;
+    }
+    parent.indeterminate = _indeterminate;
+    bubbleCheck(parent.id, state, checked, _indeterminate);
+}
+export function traversalSync(itemId, state, iterable, checked) {
+    const node = state.get(itemId);
+    if (!node)
+        return;
+    const isIndeterminate = cascadeCheck(itemId, state, checked);
+    if (node.parentId) {
+        bubbleCheck(node.id, state, checked, isIndeterminate);
+    }
+    const checkedItems = Array.from(state.values()).filter((n) => n.checked);
+    if (iterable instanceof Set) {
+        iterable.clear();
+        for (const { id } of checkedItems) {
+            iterable.add(id);
+        }
+    }
+    else if (Array.isArray(iterable)) {
+        iterable.length = 0;
+        iterable.push(...checkedItems.map(({ id }) => id));
+    }
+}
+export function traversalSyncSingleSelection(itemId, state, iterable) {
+    const node = state.get(itemId);
+    if (!node)
+        return;
+    // Uncheck all other nodes
+    for (const n of state.values()) {
+        if (n.id !== itemId && n.checked) {
+            n.checked = false;
+            n.indeterminate = false;
+        }
+    }
+    // Check the current node
+    node.checked = !node.checked;
+    node.indeterminate = false;
+    if (iterable instanceof Set) {
+        iterable.clear();
+        iterable.add(node.id);
+    }
+    else if (Array.isArray(iterable)) {
+        iterable.length = 0;
+        iterable.push(node.id);
+    }
+}

package/dist/components/tree-view/types.d.ts

@@ -0,0 +1,185 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { FSContext } from '../../internal/index.js';
+import type { Component, Snippet } from 'svelte';
+import type { SvelteMap, SvelteSet } from 'svelte/reactivity';
+import type { Sizes } from '../../types/index.js';
+export type TreeViewNavigation = 'tree' | 'treegrid';
+export type TreeViewSelectionMode = 'single' | 'multiple';
+export type TreeViewItemType = 'item' | 'branch';
+export type TreeViewNode = {
+    id: string;
+    type: TreeViewItemType;
+    parentId?: string;
+    disabled?: boolean;
+    checked?: boolean;
+    indeterminate?: boolean;
+    open?: boolean;
+};
+export type TreeViewEvent<T extends Record<string, unknown> | Iterable<unknown>> = (e: Event, data: T) => void;
+/**
+ * Bridge to a windowing/virtual-list library. When provided to `TreeView`, only the
+ * rendered slice of items lives in the DOM; the tree exposes the real index per item
+ * (`data-index`) and registers this adapter so keyboard navigation can scroll the
+ * target into view before activating it.
+ */
+export type TreeViewVirtualizer = {
+    /** Total number of real items (the whole data set, not just the rendered window). */
+    size: number;
+    /** Scroll so the item at `index` renders. May be async. */
+    scrollToIndex?: (index: number) => void | Promise<void>;
+    scrollToTop?: () => void | Promise<void>;
+    scrollToBottom?: () => void | Promise<void>;
+};
+/** The state shape of a virtualized tree: Sets, for the lookups a windowed list does on every render. */
+export type TreeViewVirtualProps = {
+    virtualizer?: TreeViewVirtualizer;
+    openItems?: SvelteSet<string>;
+    checkedItems?: SvelteSet<string>;
+};
+/** The state shape of a tree that renders every item. */
+export type TreeViewStaticProps = {
+    virtualizer?: never;
+    openItems?: string[];
+    checkedItems?: string[];
+};
+/** @propsmith TreeViewProps */
+export type TreeViewProps = {
+    /** The DOM reference of the tree element.
+     * @bindable
+     */
+    ref?: HTMLUListElement;
+    /** The size of every item in the tree.
+     * @default 'medium'
+     */
+    size?: Sizes;
+    /** Whether the tree takes a single tab stop, or every row is reachable on its own.
+     * @default 'tree'
+     */
+    navigationMode?: TreeViewNavigation;
+    /** Called whenever a branch opens or closes.
+     * @type (e: Event, openItems: string[]) => void
+     */
+    onOpenChange?: TreeViewEvent<string[]>;
+    /** How many items can be checked at a time.
+     * @default 'multiple'
+     */
+    selectionMode?: TreeViewSelectionMode;
+    /** Called whenever an item is checked or unchecked.
+     * @type (e: Event, checkedItems: string[]) => void
+     */
+    onCheckedChange?: TreeViewEvent<string[]>;
+    /** Bridge to a windowing library. Only the rendered slice of items lives in the DOM.
+     * @type TreeViewVirtualizer
+     */
+    virtualizer?: TreeViewVirtualizer;
+    /** The ids of the open branches. A `SvelteSet` is required when a `virtualizer` is set.
+     * @type string[] | SvelteSet<string>
+     * @bindable
+     */
+    openItems?: string[] | SvelteSet<string>;
+    /** The ids of the checked items. A `SvelteSet` is required when a `virtualizer` is set.
+     * @type string[] | SvelteSet<string>
+     * @bindable
+     */
+    checkedItems?: string[] | SvelteSet<string>;
+    /** The items of the tree. */
+    children?: Snippet;
+} & (TreeViewVirtualProps | TreeViewStaticProps) & HTMLAttributes<HTMLUListElement>;
+/** @propsmith TreeViewItemProps */
+export type TreeViewItemProps = {
+    /** The id of the item, used by the tree to track its state. Falls back to a generated id. */
+    id?: string;
+    /** Whether the item holds children, and can therefore be opened.
+     * @default 'item'
+     */
+    type?: TreeViewItemType;
+    /** The DOM reference of the item element. */
+    ref?: HTMLLIElement;
+    /** The value reported by the tree events. Falls back to the id of the item.
+     * @default id
+     */
+    value?: string | number;
+    /** The label of the item, used by the type-ahead navigation. */
+    text?: string;
+    /** Whether the branch is open. */
+    open?: boolean;
+    /** Whether the item is checked. */
+    checked?: boolean;
+    /** Renders the checkbox in its mixed state, when only some children are checked. */
+    indeterminate?: boolean;
+    /** Disables the user interaction. */
+    disabled?: boolean;
+    /** The real index of the item in the data set. Required when the tree is virtualized. */
+    index?: number;
+    /** Called when this branch opens or closes.
+     * @type (e: Event, data: { id: string; open: boolean }) => void
+     */
+    onOpenChange?: TreeViewEvent<{
+        id: string;
+        open: boolean;
+    }>;
+    /** Called when this item is checked or unchecked.
+     * @type (e: Event, data: { id: string; checked: boolean }) => void
+     */
+    onCheckedChange?: TreeViewEvent<{
+        id: string;
+        checked: boolean;
+    }>;
+} & HTMLAttributes<HTMLLIElement>;
+/** @propsmith TreeViewItemLayoutProps */
+export type TreeViewItemLayoutProps = {
+    /** The DOM reference of the layout element. */
+    ref?: HTMLDivElement;
+    /** Custom icon for the control that opens a branch.
+     * @type Snippet | Component
+     */
+    expandIcon?: Snippet | Component;
+    /** Content rendered before the label.
+     * @type Snippet | Component
+     */
+    iconBefore?: Snippet | Component;
+    /** Content rendered after the label.
+     * @type Snippet | Component
+     */
+    iconAfter?: Snippet | Component;
+    /** Content pinned to the end of the row.
+     * @type Snippet | Component
+     */
+    aside?: Snippet | Component;
+    /** Content pinned to the end of the row, revealed on hover and on focus.
+     * @type Snippet | Component
+     */
+    actions?: Snippet | Component;
+} & HTMLAttributes<HTMLDivElement>;
+export type TreeViewContext = FSContext<{
+    navigationMode: TreeViewNavigation;
+    size: Sizes;
+    virtualized: boolean;
+    virtualCount?: number;
+}, {
+    readonly selectionMode?: TreeViewSelectionMode;
+    readonly openItems: NonNullable<TreeViewProps['openItems']>;
+    readonly checkedItems: NonNullable<TreeViewProps['checkedItems']>;
+    readonly TREE_NODES: SvelteMap<string, TreeViewNode>;
+    forceVirtualRender: boolean;
+}, {
+    onOpenChange: TreeViewEvent<string[]>;
+    onCheckedChange: TreeViewEvent<string[]>;
+}, {
+    handleCheck: (e: Event | null, id: string, checked: boolean) => Promise<void>;
+    openItem: (e: Event | null, id: string) => void;
+    closeItem: (e: Event | null, id: string) => void;
+    registerItem: (node: TreeViewNode) => void;
+    unregisterItem: (id: string) => void;
+}>;
+export type TreeViewItemContext = {
+    readonly disabled?: boolean;
+    readonly value: string | number;
+    readonly depth: number;
+    readonly id: string;
+    readonly type: TreeViewItemType;
+    readonly parentId?: string;
+    open?: boolean;
+    checked?: boolean;
+    indeterminate?: boolean;
+};

package/dist/components/tree-view/types.js

@@ -0,0 +1 @@
+export {};

package/dist/css/class-darkmode.css

@@ -0,0 +1,186 @@
+:is(html:has(.dark), html.dark):root {
+	/* Text Colors */
+	--fs-text-primary: #fff;
+	--fs-text-secondary: #ffffffc5;
+	--fs-text-tertiary: #ffffff87;
+	--fs-text-disabled: #ffffff5d;
+
+	--fs-accent-text-primary: rgb(var(--fs-accent-light-3));
+	--fs-accent-text-secondary: rgb(var(--fs-accent-light-3));
+	--fs-accent-text-tertiary: rgb(var(--fs-accent-light-2));
+
+	--fs-text-on-accent-primary: #000;
+	--fs-text-on-accent-secondary: #00000080;
+	--fs-text-on-accent-disabled: #ffffff87;
+	/* --fs-text-on-accent-selected: #fff; <- Same on light/dark */
+
+	/* Control Fill Colors
+	 * These colors are used for standard controls like buttons, dropdowns, search, etc.
+	*/
+	--fs-control-fill-default: #ffffff0f;
+	--fs-control-fill-secondary: #ffffff15;
+	--fs-control-fill-tertiary: #ffffff0b;
+	--fs-control-fill-quaternary: #ffffff0f;
+	--fs-control-fill-disabled: #f9f9f90b;
+	/* --fs-control-fill-transparent: transparent; <- Same on light/dark */
+	--fs-control-fill-input-active: #1e1e1eb3;
+
+	/* Control Alt Fill Colors
+	* These colors are used for standard controls like toggle, radio, checkbox, rating, etc.
+	*/
+	--fs-control-alt-fill-transparent: transparent;
+	--fs-control-alt-fill-secondary: #00000019;
+	--fs-control-alt-fill-tertiary: #ffffff0b;
+	--fs-control-alt-fill-quaternary: #ffffff12;
+	--fs-control-alt-fill-disabled: transparent;
+
+	/* Special Control Colors (Control solid and control strong fill)
+		* --fs-control-solid Fills used for Sliders thumb control to cover the track beneath it.
+		---------------------------
+		* --fs-control-strong-default and --fs-control-strong-disabled Used for control fills that must meet contrast ratio requirements of 3:1 Examples: Scroll bar, Slider, Flip view
+	*/
+	--fs-control-solid: #454545;
+	--fs-control-strong-default: #ffffff8b;
+	--fs-control-strong-disabled: #ffffff3f;
+
+	/* Subtle Colors */
+	/* --fs-subtle-fill-transparent: transparent; <- Same on light/dark */
+	--fs-subtle-fill-secondary: #ffffff0f;
+	--fs-subtle-fill-tertiary: #ffffff0a;
+	/* --fs-subtle-fill-disabled: transparent; <- Same on light/dark */
+
+	/* Control On Image Fill
+		* These colors are used for controls that are placed on top of images.
+	*/
+	--fs-control-on-image-fill-default: #1c1c1cb3;
+	--fs-control-on-image-fill-secondary: #1a1a1a;
+	--fs-control-on-image-fill-tertiary: #131313;
+	--fs-control-on-image-fill-disabled: #1e1e1e;
+
+	/* Accent Fill Colors */
+	--fs-accent-fill-default: rgb(var(--fs-accent-light-2));
+	--fs-accent-fill-secondary: rgba(var(--fs-accent-light-2), 0.7);
+	--fs-accent-fill-tertiary: rgba(var(--fs-accent-light-2), 0.6);
+	--fs-accent-fill-disabled: #ffffff28;
+	/* --fs-accent-fill-selected-text-bg: rgb(var(--fs-accent-base)); <- Same on light/dark */
+
+	/* Elevation */
+	--fs-elevation-control-border: linear-gradient(180deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0.07) 10%);
+	--fs-elevation-accent-control-border: linear-gradient(
+		180deg,
+		rgba(255, 255, 255, 0.1) 91%,
+		/* Changed opacity to 0.1 from original 0.08 */ rgba(0, 0, 0, 0.14) 100%
+	);
+	--fs-elevation-circle-border: linear-gradient(180deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0.07) 50%);
+	--fs-elevation-text-border: linear-gradient(
+		180deg,
+		rgba(255, 255, 255, 0.03) calc(100% - 0.07rem),
+		rgba(255, 255, 255, 0.54) calc(100% - 0.07rem)
+	);
+	--fs-elevation-text-border-focused: linear-gradient(
+		180deg,
+		rgba(255, 255, 255, 0.08) 94.5%,
+		rgb(var(--fs-accent-light-1)) 94.5%
+	);
+
+	/* Control Stroke */
+	--fs-control-stroke-default: #ffffff12;
+	--fs-control-stroke-secondary: #ffffff18;
+	--fs-control-stroke-on-accent-default: #ffffff14;
+	--fs-control-stroke-on-accent-secondary: #00000023;
+	--fs-control-stroke-on-accent-tertiary: #00000037;
+	--fs-control-stroke-on-accent-disabled: #00000033;
+	--fs-control-stroke-on-image: #0000006b;
+	--fs-card-stroke-default: #00000019;
+	--fs-card-stroke-solid: #1c1c1c;
+
+	/* Control Strong Stroke */
+	--fs-control-strong-stroke-default: #ffffff8b;
+	--fs-control-strong-stroke-disabled: #ffffff28;
+
+	/* Control Surface Stroke */
+	/* --fs-control-surface-stroke-default: #75757566; <- Same on light/dark */
+	--fs-control-surface-stroke-flyout: #00000033;
+
+	/* Divider Stroke */
+	--fs-divider-stroke-default: #ffffff15;
+
+	/* Focus Stroke */
+	--fs-focus-stroke-outer: #fff;
+	--fs-focus-stroke-inner: #000000b3;
+
+	/* Card Background */
+	--fs-card-background-default: #ffffff0d;
+	--fs-card-background-secondary: #ffffff08;
+
+	/* Smoke Background */
+	/* --fs-smoke-background-default: #0000004d; <- Same on light/dark */
+
+	/* Layer */
+	--fs-layer-default: #3a3a3a4c;
+	--fs-layer-alt: #ffffff0d;
+
+	/* Layer on Acrylic */
+	--fs-layer-on-acrylic-default: #ffffff09;
+
+	/* Solid Background */
+	--fs-solid-background-base: #202020;
+	--fs-solid-background-secondary: #1c1c1c;
+	--fs-solid-background-tertiary: #282828;
+	--fs-solid-background-quaternary: #2c2c2c;
+
+	/* Acrylic Background */
+	--fs-acrylic-background-base: #202020;
+	--fs-acrylic-background-default: #2c2c2c;
+
+	/* Accent Acrylic Background */
+	--fs-accent-acrylic-background-base: rgba(var(--fs-accent-dark-2), 0.8);
+	--fs-accent-acrylic-background-default: rgba(var(--fs-accent-dark-1), 0.8);
+
+	/* System */
+	--fs-system-attention: rgb(var(--fs-accent-light-3));
+	--fs-system-attetion-bg: #f6f6f608;
+	--fs-system-attention-solid-bg: #2e2e2e;
+
+	--fs-system-success: #6ccb5f;
+	--fs-system-success-bg: #393d1b;
+
+	--fs-system-caution: #fce100;
+	--fs-system-caution-bg: #433519;
+
+	--fs-system-critical: #ff99a4;
+	--fs-system-critical-bg: #442726;
+
+	--fs-system-neutral: #ffffff8b;
+	--fs-system-neutral-bg: #ffffff08;
+
+	--fs-system-solid-neutral: #9d9d9d;
+	--fs-system-solid-neutral-bg: #2e2e2e;
+
+	/* Shadows */
+	--fs-shadow-card: 0 0.125rem 0.25rem #00000021; /* 13% opacity */
+	--fs-shadow-tooltip: 0 0.25rem 0.5rem #00000042; /* 26% opacity */
+	--fs-shadow-flyout: 0 0.5rem 1rem #00000042; /* 26% opacity */
+	--fs-shadow-dialog: 0 2rem 4rem #0000005e, 0 1.125rem 1.313rem #0000005e; /* 37% opacity */
+
+	/* Shell Shadows */
+	--fs-shell-shadow-inactive: 0 1rem 2rem #0000005e, 0 0.125rem 0.625rem #0000005e; /* 37% opacity */
+	--fs-shell-shadow-active: 0 2rem 4rem #0000008f, 0 0.125rem 1.313rem #0000008c; /* 56% and 55% opacity respectively */
+
+	/* Customs Variables */
+	--fs-radial-mica-bg: radial-gradient(
+		circle,
+		rgba(28, 35, 42, 1) 0%,
+		rgba(30, 35, 43, 1) 30%,
+		rgba(27, 33, 41, 1) 43%,
+		rgba(27, 32, 40, 1) 63%,
+		rgba(27, 33, 41, 1) 72%,
+		rgba(27, 33, 41, 1) 100%
+	);
+
+	--fs-system-neutral-text: color-mix(in srgb, var(--fs-system-neutral), white 50%);
+	--fs-system-attention-text: color-mix(in srgb, var(--fs-system-attention), white 50%);
+	--fs-system-caution-text: color-mix(in srgb, var(--fs-system-caution), white 50%);
+	--fs-system-success-text: color-mix(in srgb, var(--fs-system-success), white 50%);
+	--fs-system-critical-text: color-mix(in srgb, var(--fs-system-critical), white 50%);
+}

package/dist/css/media-darkmode.css

@@ -0,0 +1,189 @@
+@media (prefers-color-scheme: dark) {
+	:root {
+		/* Text Colors */
+		--fs-text-primary: #fff;
+		--fs-text-secondary: #ffffffc5;
+		--fs-text-tertiary: #ffffff87;
+		--fs-text-disabled: #ffffff5d;
+
+		--fs-accent-text-primary: rgb(var(--fs-accent-light-3));
+		--fs-accent-text-secondary: rgb(var(--fs-accent-light-3));
+		--fs-accent-text-tertiary: rgb(var(--fs-accent-light-2));
+
+		--fs-text-on-accent-primary: #000;
+		--fs-text-on-accent-secondary: #00000080;
+		--fs-text-on-accent-disabled: #ffffff87;
+		/* --fs-text-on-accent-selected: #fff; <- Same on light/dark */
+
+		/* Control Fill Colors
+	 * These colors are used for standard controls like buttons, dropdowns, search, etc.
+	*/
+		--fs-control-fill-default: #ffffff0f;
+		--fs-control-fill-secondary: #ffffff15;
+		--fs-control-fill-tertiary: #ffffff0b;
+		--fs-control-fill-quaternary: #ffffff0f;
+		--fs-control-fill-disabled: #f9f9f90b;
+		/* --fs-control-fill-transparent: transparent; <- Same on light/dark */
+		--fs-control-fill-input-active: #1e1e1eb3;
+
+		/* Control Alt Fill Colors
+	* These colors are used for standard controls like toggle, radio, checkbox, rating, etc.
+	*/
+		--fs-control-alt-fill-transparent: transparent;
+		--fs-control-alt-fill-secondary: #00000019;
+		--fs-control-alt-fill-tertiary: #ffffff0b;
+		--fs-control-alt-fill-quaternary: #ffffff12;
+		--fs-control-alt-fill-disabled: transparent;
+
+		/* Special Control Colors (Control solid and control strong fill)
+		* --fs-control-solid Fills used for Sliders thumb control to cover the track beneath it.
+		---------------------------
+		* --fs-control-strong-default and --fs-control-strong-disabled Used for control fills that must meet contrast ratio requirements of 3:1 Examples: Scroll bar, Slider, Flip view
+	*/
+		--fs-control-solid: #454545;
+		--fs-control-strong-default: #ffffff8b;
+		--fs-control-strong-disabled: #ffffff3f;
+
+		/* Subtle Colors */
+		/* --fs-subtle-fill-transparent: transparent; <- Same on light/dark */
+		--fs-subtle-fill-secondary: #ffffff0f;
+		--fs-subtle-fill-tertiary: #ffffff0a;
+		/* --fs-subtle-fill-disabled: transparent; <- Same on light/dark */
+
+		/* Control On Image Fill
+		* These colors are used for controls that are placed on top of images.
+	*/
+		--fs-control-on-image-fill-default: #1c1c1cb3;
+		--fs-control-on-image-fill-secondary: #1a1a1a;
+		--fs-control-on-image-fill-tertiary: #131313;
+		--fs-control-on-image-fill-disabled: #1e1e1e;
+
+		/* Accent Fill Colors */
+		--fs-accent-fill-default: rgb(var(--fs-accent-light-2));
+		--fs-accent-fill-secondary: rgba(var(--fs-accent-light-2), 0.7);
+		--fs-accent-fill-tertiary: rgba(var(--fs-accent-light-2), 0.6);
+		--fs-accent-fill-disabled: #ffffff28;
+		/* --fs-accent-fill-selected-text-bg: rgb(var(--fs-accent-base)); <- Same on light/dark */
+
+		/* Elevation */
+		--fs-elevation-control-border: linear-gradient(180deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0.07) 10%);
+		--fs-elevation-accent-control-border: linear-gradient(
+			180deg,
+			rgba(255, 255, 255, 0.1) 91%,
+			/* Changed opacity to 0.1 from original 0.08 */ rgba(0, 0, 0, 0.14) 100%
+		);
+		--fs-elevation-circle-border: linear-gradient(180deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0.07) 50%);
+		--fs-elevation-text-border: linear-gradient(
+			180deg,
+			rgba(255, 255, 255, 0.03) calc(100% - 0.07rem),
+			rgba(255, 255, 255, 0.54) calc(100% - 0.07rem)
+		);
+		--fs-elevation-text-border-focused: linear-gradient(
+			180deg,
+			rgba(255, 255, 255, 0.08) 94.5%,
+			rgb(var(--fs-accent-light-1)) 94.5%
+		);
+
+		/* Control Stroke */
+		--fs-control-stroke-default: #ffffff12;
+		--fs-control-stroke-secondary: #ffffff18;
+		--fs-control-stroke-on-accent-default: #ffffff14;
+		--fs-control-stroke-on-accent-secondary: #00000023;
+		--fs-control-stroke-on-accent-tertiary: #00000037;
+		--fs-control-stroke-on-accent-disabled: #00000033;
+		--fs-control-stroke-on-image: #0000006b;
+		--fs-card-stroke-default: #00000019;
+		--fs-card-stroke-solid: #1c1c1c;
+
+		/* Control Strong Stroke */
+		--fs-control-strong-stroke-default: #ffffff8b;
+		--fs-control-strong-stroke-disabled: #ffffff28;
+
+		/* Control Surface Stroke */
+		/* --fs-control-surface-stroke-default: #75757566; <- Same on light/dark */
+		--fs-control-surface-stroke-flyout: #00000033;
+
+		/* Divider Stroke */
+		--fs-divider-stroke-default: #ffffff15;
+
+		/* Focus Stroke */
+		--fs-focus-stroke-outer: #fff;
+		--fs-focus-stroke-inner: #000000b3;
+
+		/* Card Background */
+		--fs-card-background-default: #ffffff0d;
+		--fs-card-background-secondary: #ffffff08;
+
+		/* Smoke Background */
+		/* --fs-smoke-background-default: #0000004d; <- Same on light/dark */
+
+		/* Layer */
+		--fs-layer-default: #3a3a3a4c;
+		--fs-layer-alt: #ffffff0d;
+
+		/* Layer on Acrylic */
+		--fs-layer-on-acrylic-default: #ffffff09;
+
+		/* Solid Background */
+		--fs-solid-background-base: #202020;
+		--fs-solid-background-secondary: #1c1c1c;
+		--fs-solid-background-tertiary: #282828;
+		--fs-solid-background-quaternary: #2c2c2c;
+
+		/* Acrylic Background */
+		--fs-acrylic-background-base: #202020;
+		--fs-acrylic-background-default: #2c2c2c;
+
+		/* Accent Acrylic Background */
+		--fs-accent-acrylic-background-base: rgba(var(--fs-accent-dark-2), 0.8);
+		--fs-accent-acrylic-background-default: rgba(var(--fs-accent-dark-1), 0.8);
+
+		/* System */
+		--fs-system-attention: rgb(var(--fs-accent-light-3));
+		--fs-system-attetion-bg: #f6f6f608;
+		--fs-system-attention-solid-bg: #2e2e2e;
+
+		--fs-system-success: #6ccb5f;
+		--fs-system-success-bg: #393d1b;
+
+		--fs-system-caution: #fce100;
+		--fs-system-caution-bg: #433519;
+
+		--fs-system-critical: #ff4658; /* Changed from #ff99a4 to #ff4658 for better visibility */
+		--fs-system-critical-bg: #442726;
+
+		--fs-system-neutral: #ffffff8b;
+		--fs-system-neutral-bg: #ffffff08;
+
+		--fs-system-solid-neutral: #9d9d9d;
+		--fs-system-solid-neutral-bg: #2e2e2e;
+
+		/* Shadows */
+		--fs-shadow-card: 0 0.125rem 0.25rem #00000021; /* 13% opacity */
+		--fs-shadow-tooltip: 0 0.25rem 0.5rem #00000042; /* 26% opacity */
+		--fs-shadow-flyout: 0 0.5rem 1rem #00000042; /* 26% opacity */
+		--fs-shadow-dialog: 0 2rem 4rem #0000005e, 0 1.125rem 1.313rem #0000005e; /* 37% opacity */
+
+		/* Shell Shadows */
+		--fs-shell-shadow-inactive: 0 1rem 2rem #0000005e, 0 0.125rem 0.625rem #0000005e; /* 37% opacity */
+		--fs-shell-shadow-active:
+			0 2rem 4rem #0000008f, 0 0.125rem 1.313rem #0000008c; /* 56% and 55% opacity respectively */
+
+		/* Customs Variables */
+		--fs-radial-mica-bg: radial-gradient(
+			circle,
+			rgba(28, 35, 42, 1) 0%,
+			rgba(30, 35, 43, 1) 30%,
+			rgba(27, 33, 41, 1) 43%,
+			rgba(27, 32, 40, 1) 63%,
+			rgba(27, 33, 41, 1) 72%,
+			rgba(27, 33, 41, 1) 100%
+		);
+
+		--fs-system-neutral-text: color-mix(in srgb, var(--fs-system-neutral), white 50%);
+		--fs-system-attention-text: color-mix(in srgb, var(--fs-system-attention), white 50%);
+		--fs-system-caution-text: color-mix(in srgb, var(--fs-system-caution), white 50%);
+		--fs-system-success-text: color-mix(in srgb, var(--fs-system-success), white 50%);
+		--fs-system-critical-text: color-mix(in srgb, var(--fs-system-critical), white 20%);
+	}
+}