@stream-io/video-styling 2.0.0-beta.0 → 2.0.0-beta.1

package/src/tokens/generated/light.scss

@@ -0,0 +1,853 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+@mixin variables {
+  --str-video__subtle: 25px; /** Subtle background blur. Used on scrims and glass surfaces where the content behind stays partly legible. */
+  --str-video__strong: 50px; /** Strong background blur. Used on scrims and glass surfaces where the content behind should be obscured. */
+  --str-video__base-transparent-white-10: rgba(255, 255, 255, 0.1);
+  --str-video__base-transparent-white-20: rgba(255, 255, 255, 0.2);
+  --str-video__base-transparent-white-30: rgba(
+    255,
+    255,
+    255,
+    0.3
+  ); /** Legacy value, no longer defined in Figma. Kept for compatibility; prefer the 0/10/15/20/25/50/75 scale. */
+  --str-video__base-transparent-white-70: rgba(
+    255,
+    255,
+    255,
+    0.7
+  ); /** Legacy value, no longer defined in Figma. Kept for compatibility; prefer the 0/10/15/20/25/50/75 scale. */
+  --str-video__base-transparent-black-5: rgba(
+    0,
+    0,
+    0,
+    0.05
+  ); /** Legacy value, no longer defined in Figma. Kept for compatibility; prefer the 0/10/15/20/25/50/75 scale. */
+  --str-video__base-transparent-black-10: rgba(
+    0,
+    0,
+    0,
+    0.1
+  ); /** Used for bg in closeButton */
+  --str-video__base-transparent-black-70: rgba(
+    0,
+    0,
+    0,
+    0.7
+  ); /** Legacy value, no longer defined in Figma. Kept for compatibility; prefer the 0/10/15/20/25/50/75 scale. */
+  --str-video__base-transparent-black-0: rgba(0, 0, 0, 0);
+  --str-video__base-transparent-black-15: rgba(0, 0, 0, 0.15);
+  --str-video__base-transparent-black-20: rgba(0, 0, 0, 0.2);
+  --str-video__base-transparent-black-25: rgba(0, 0, 0, 0.25);
+  --str-video__base-transparent-black-50: rgba(0, 0, 0, 0.5);
+  --str-video__base-transparent-black-75: rgba(0, 0, 0, 0.75);
+  --str-video__base-transparent-white-0: rgba(255, 255, 255, 0);
+  --str-video__base-transparent-white-15: rgba(255, 255, 255, 0.15);
+  --str-video__base-transparent-white-25: rgba(255, 255, 255, 0.25);
+  --str-video__base-transparent-white-50: rgba(255, 255, 255, 0.5);
+  --str-video__base-transparent-white-75: rgba(255, 255, 255, 0.75);
+  --str-video__base-black: #000000;
+  --str-video__base-white: #ffffff;
+  --str-video__slate-50: #f6f8fa;
+  --str-video__slate-100: #ebeef1;
+  --str-video__slate-150: #d5dbe1;
+  --str-video__slate-200: #c0c8d2;
+  --str-video__slate-300: #a3acba;
+  --str-video__slate-400: #87909f;
+  --str-video__slate-500: #687385;
+  --str-video__slate-600: #545969;
+  --str-video__slate-700: #414552;
+  --str-video__slate-800: #30313d;
+  --str-video__slate-900: #1a1b25;
+  --str-video__neutral-50: #f8f8f8;
+  --str-video__neutral-100: #efefef;
+  --str-video__neutral-150: #d8d8d8;
+  --str-video__neutral-200: #c4c4c4;
+  --str-video__neutral-300: #ababab;
+  --str-video__neutral-400: #8f8f8f;
+  --str-video__neutral-500: #6a6a6a;
+  --str-video__neutral-600: #565656;
+  --str-video__neutral-700: #464646;
+  --str-video__neutral-800: #323232;
+  --str-video__neutral-900: #1c1c1c;
+  --str-video__blue-50: #f3f7ff;
+  --str-video__blue-100: #e3edff;
+  --str-video__blue-150: #c3d9ff;
+  --str-video__blue-200: #a5c5ff;
+  --str-video__blue-300: #78a8ff;
+  --str-video__blue-400: #4586ff;
+  --str-video__blue-500: #005fff;
+  --str-video__blue-600: #1b53bd;
+  --str-video__blue-700: #19418d;
+  --str-video__blue-800: #142f63;
+  --str-video__blue-900: #091a3b;
+  --str-video__cyan-50: #f1fbfc;
+  --str-video__cyan-100: #d1f3f6;
+  --str-video__cyan-150: #a9e4ea;
+  --str-video__cyan-200: #72d7e0;
+  --str-video__cyan-300: #45bcc7;
+  --str-video__cyan-400: #1e9ea9;
+  --str-video__cyan-500: #248088;
+  --str-video__cyan-600: #006970;
+  --str-video__cyan-700: #065056;
+  --str-video__cyan-800: #003a3f;
+  --str-video__cyan-900: #002124;
+  --str-video__green-50: #e1ffee;
+  --str-video__green-100: #bdfcdb;
+  --str-video__green-150: #8febbd;
+  --str-video__green-200: #59dea3;
+  --str-video__green-300: #00c384;
+  --str-video__green-400: #00a46e;
+  --str-video__green-500: #277e59;
+  --str-video__green-600: #006643;
+  --str-video__green-700: #004f33;
+  --str-video__green-800: #003a25;
+  --str-video__green-900: #002213;
+  --str-video__purple-50: #f7f8ff;
+  --str-video__purple-100: #ecedff;
+  --str-video__purple-150: #d4d7ff;
+  --str-video__purple-200: #c1c5ff;
+  --str-video__purple-300: #a1a3ff;
+  --str-video__purple-400: #8482fc;
+  --str-video__purple-500: #644af9;
+  --str-video__purple-600: #553bd8;
+  --str-video__purple-700: #4032a1;
+  --str-video__purple-800: #2e2576;
+  --str-video__purple-900: #1a114d;
+  --str-video__yellow-50: #fef9da;
+  --str-video__yellow-100: #fcedb9;
+  --str-video__yellow-150: #fcd579;
+  --str-video__yellow-200: #f6bf57;
+  --str-video__yellow-300: #fa922b;
+  --str-video__yellow-400: #f26d10;
+  --str-video__yellow-500: #c84801;
+  --str-video__yellow-600: #a82c00;
+  --str-video__yellow-700: #842106;
+  --str-video__yellow-800: #5f1a05;
+  --str-video__yellow-900: #331302;
+  --str-video__red-50: #fff5fa;
+  --str-video__red-100: #ffe7f2;
+  --str-video__red-150: #ffccdf;
+  --str-video__red-200: #ffb1cd;
+  --str-video__red-300: #fe87a1;
+  --str-video__red-400: #fc526a;
+  --str-video__red-500: #d90d10;
+  --str-video__red-600: #b3093c;
+  --str-video__red-700: #890d37;
+  --str-video__red-800: #68052b;
+  --str-video__red-900: #3e021a;
+  --str-video__violet-50: #fef4ff;
+  --str-video__violet-100: #fbe8fe;
+  --str-video__violet-150: #f7cffc;
+  --str-video__violet-200: #eeb5f4;
+  --str-video__violet-300: #e68bec;
+  --str-video__violet-400: #d75fe7;
+  --str-video__violet-500: #b716ca;
+  --str-video__violet-600: #9d00ae;
+  --str-video__violet-700: #7c0089;
+  --str-video__violet-800: #5c0066;
+  --str-video__violet-900: #36003d;
+  --str-video__lime-50: #f1fde8;
+  --str-video__lime-100: #d4ffb0;
+  --str-video__lime-150: #b1ee79;
+  --str-video__lime-200: #9cda5d;
+  --str-video__lime-300: #78c100;
+  --str-video__lime-400: #639e11;
+  --str-video__lime-500: #4b7a0a;
+  --str-video__lime-600: #3e6213;
+  --str-video__lime-700: #355315;
+  --str-video__lime-800: #203a00;
+  --str-video__lime-900: #112100;
+  --str-video__size-2: 2px;
+  --str-video__size-4: 4px;
+  --str-video__size-6: 6px;
+  --str-video__size-8: 8px;
+  --str-video__size-12: 12px;
+  --str-video__size-16: 16px;
+  --str-video__size-20: 20px;
+  --str-video__size-24: 24px;
+  --str-video__size-32: 32px;
+  --str-video__size-40: 40px;
+  --str-video__size-48: 48px;
+  --str-video__size-64: 64px;
+  --str-video__size-28: 28px;
+  --str-video__size-80: 80px;
+  --str-video__size-128: 128px;
+  --str-video__size-240: 240px;
+  --str-video__size-320: 320px;
+  --str-video__size-480: 480px;
+  --str-video__size-560: 560px;
+  --str-video__size-640: 640px;
+  --str-video__size-760: 760px;
+  --str-video__size-144: 144px;
+  --str-video__size-208: 208px;
+  --str-video__size-56: 56px;
+  --str-video__size-10: 10px;
+  --str-video__size-13: 13px;
+  --str-video__size-14: 14px;
+  --str-video__size-15: 15px;
+  --str-video__size-17: 17px;
+  --str-video__size-18: 18px;
+  --str-video__size-22: 22px;
+  --str-video__radius-0: 0px;
+  --str-video__radius-2: 2px;
+  --str-video__radius-4: 4px;
+  --str-video__radius-6: 6px;
+  --str-video__radius-8: 8px;
+  --str-video__radius-12: 12px;
+  --str-video__radius-16: 16px;
+  --str-video__radius-20: 20px;
+  --str-video__radius-24: 24px;
+  --str-video__radius-32: 32px;
+  --str-video__radius-full: 9999px;
+  --str-video__space-0: 0px;
+  --str-video__space-2: 2px;
+  --str-video__space-4: 4px;
+  --str-video__space-8: 8px;
+  --str-video__space-12: 12px;
+  --str-video__space-16: 16px;
+  --str-video__space-20: 20px;
+  --str-video__space-24: 24px;
+  --str-video__space-32: 32px;
+  --str-video__space-40: 40px;
+  --str-video__space-48: 48px;
+  --str-video__space-64: 64px;
+  --str-video__space-80: 80px;
+  --str-video__space-6: 6px;
+  --str-video__space-10: 10px;
+  --str-video__space-14: 14px;
+  --str-video__w100: 1px;
+  --str-video__w150: 1.5px;
+  --str-video__w200: 2px;
+  --str-video__w300: 3px;
+  --str-video__w400: 4px;
+  --str-video__w120: 1.2px;
+  --str-video__w80: 0.8px;
+  --str-video__font-family-geist: 'Geist'; /** Primary sans-serif font for web typography. Use Geist as the main typeface. Recommended fallbacks: system-ui, -apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, sans-serif. */
+  --str-video__font-family-geist-mono: 'Geist Mono'; /** Primary monospace font for web typography. Use Geist Mono for code, timestamps, and technical text. Recommended fallbacks: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace. */
+  --str-video__font-family-sf-pro: 'SF Pro'; /** Primary sans-serif font for iOS typography. Use SF Pro as the main typeface. Recommended fallbacks: -apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, sans-serif. */
+  --str-video__font-family-sf-mono: 'SF Mono'; /** Primary monospace font for iOS typography. Use SF Mono for code, timestamps, and technical text. Recommended fallbacks: SFMono-Regular, Menlo, Monaco, Consolas, monospace. */
+  --str-video__font-family-roboto: 'Roboto'; /** Primary sans-serif font for Android typography. Use Roboto as the main typeface, aligned with Material and system defaults. Recommended fallbacks: Roboto, “Noto Sans”, system-ui, sans-serif. */
+  --str-video__font-family-roboto-mono: 'Roboto Mono'; /** Primary monospace font for Android typography. Use Roboto Mono for code, timestamps, and technical text. Recommended fallbacks: Roboto Mono, “Noto Sans Mono”, monospace. */
+  --str-video__font-family-inter: 'Inter'; /** Sans-serif typeface available for custom themes. */
+  --str-video__font-family-dm-mono: 'DM Mono'; /** Monospace typeface available for custom themes. */
+  --str-video__font-weight-w400: 400;
+  --str-video__font-weight-w500: 500;
+  --str-video__font-weight-w600: 600;
+  --str-video__font-weight-w700: 700;
+  --str-video__font-size-size-8: 8px;
+  --str-video__font-size-size-10: 10px;
+  --str-video__font-size-size-11: 11px;
+  --str-video__font-size-size-12: 12px;
+  --str-video__font-size-size-13: 13px;
+  --str-video__font-size-size-14: 14px;
+  --str-video__font-size-size-16: 16px;
+  --str-video__font-size-size-15: 15px;
+  --str-video__font-size-size-17: 17px;
+  --str-video__font-size-size-18: 18px;
+  --str-video__font-size-size-20: 20px;
+  --str-video__font-size-size-22: 22px;
+  --str-video__font-size-size-24: 24px;
+  --str-video__font-size-size-28: 28px;
+  --str-video__font-size-size-32: 32px;
+  --str-video__font-size-size-40: 40px;
+  --str-video__font-size-size-48: 48px;
+  --str-video__font-size-size-64: 64px;
+  --str-video__line-height-line-height-8: 8px;
+  --str-video__line-height-line-height-10: 10px;
+  --str-video__line-height-line-height-12: 12px;
+  --str-video__line-height-line-height-13: 13px;
+  --str-video__line-height-line-height-14: 14px;
+  --str-video__line-height-line-height-15: 15px;
+  --str-video__line-height-line-height-16: 16px;
+  --str-video__line-height-line-height-17: 17px;
+  --str-video__line-height-line-height-18: 18px;
+  --str-video__line-height-line-height-20: 20px;
+  --str-video__line-height-line-height-24: 24px;
+  --str-video__line-height-line-height-28: 28px;
+  --str-video__line-height-line-height-32: 32px;
+  --str-video__line-height-line-height-40: 40px;
+  --str-video__line-height-line-height-48: 48px;
+  --str-video__typography-font-weight-regular: 400; /** Default weight for body text and low-emphasis content. */
+  --str-video__typography-font-weight-medium: 500; /** Slightly emphasized weight for interactive labels, list items, and secondary headings. */
+  --str-video__typography-font-weight-semi-bold: 600; /** Strong emphasis for subheadings, active states, and UI labels that need to stand out. */
+  --str-video__typography-font-weight-bold: 700; /** Highest emphasis weight for titles, primary headings, and critical labels. */
+  --str-video__light-elevation-1:
+    0px 0px 0px 1px rgba(0, 0, 0, 0.05), 0px 1px 2px 0px rgba(0, 0, 0, 0.1),
+    0px 4px 8px 0px rgba(0, 0, 0, 0.06); /** Low elevation level for subtle separation. */
+  --str-video__light-elevation-2:
+    0px 0px 0px 1px rgba(0, 0, 0, 0.05), 0px 2px 4px 0px rgba(0, 0, 0, 0.12),
+    0px 6px 16px 0px rgba(0, 0, 0, 0.06);
+  --str-video__light-elevation-3:
+    0px 0px 0px 1px rgba(0, 0, 0, 0.05), 0px 4px 8px 0px rgba(0, 0, 0, 0.14),
+    0px 12px 24px 0px rgba(0, 0, 0, 0.1);
+  --str-video__light-elevation-4:
+    0px 0px 0px 1px rgba(0, 0, 0, 0.05), 0px 6px 12px 0px rgba(0, 0, 0, 0.16),
+    0px 20px 32px 0px rgba(0, 0, 0, 0.12);
+  --str-video__dark-elevation-1:
+    0px 0px 0px 1px rgba(255, 255, 255, 0.15),
+    0px 1px 2px 0px rgba(0, 0, 0, 0.2), 0px 4px 8px 0px rgba(0, 0, 0, 0.1);
+  --str-video__dark-elevation-2:
+    0px 0px 0px 1px rgba(255, 255, 255, 0.15),
+    0px 2px 4px 0px rgba(0, 0, 0, 0.22), 0px 6px 16px 0px rgba(0, 0, 0, 0.12);
+  --str-video__dark-elevation-3:
+    0px 0px 0px 1px rgba(255, 255, 255, 0.15),
+    0px 4px 8px 0px rgba(0, 0, 0, 0.24), 0px 12px 24px 0px rgba(0, 0, 0, 0.14);
+  --str-video__dark-elevation-4:
+    0px 0px 0px 1px rgba(255, 255, 255, 0.15),
+    0px 6px 12px 0px rgba(0, 0, 0, 0.28), 0px 20px 32px 0px rgba(0, 0, 0, 0.16);
+  --str-video__button-padding-y-lg: 14px;
+  --str-video__button-padding-y-md: 10px;
+  --str-video__button-padding-y-sm: 6px;
+  --str-video__button-padding-y-xs: 2px;
+  --str-video__button-padding-x-icon-only-lg: 16px;
+  --str-video__button-padding-x-icon-only-md: 12px;
+  --str-video__button-padding-x-icon-only-sm: 8px;
+  --str-video__button-padding-x-icon-only-xs: 4px;
+  --str-video__button-padding-x-with-label-lg: 16px;
+  --str-video__button-padding-x-with-label-md: 16px;
+  --str-video__button-padding-x-with-label-sm: 16px;
+  --str-video__button-padding-x-with-label-xs: 12px;
+  --str-video__background-core-overlay-dark: rgba(
+    26,
+    27,
+    37,
+    0.25
+  ); /** A dark semi-transparent layer. Used for image overlays. */
+  --str-video__background-core-overlay-dark-strong: rgba(
+    26,
+    27,
+    37,
+    0.75
+  ); /** A dark semi-transparent layer. Used for image overlays. */
+  --str-video__background-core-overlay-light: rgba(
+    255,
+    255,
+    255,
+    0.75
+  ); /** A light semi-transparent layer. Used to lighten surfaces and for hover states on dark backgrounds. */
+  --str-video__background-core-scrim: rgba(
+    26,
+    27,
+    37,
+    0.5
+  ); /** A heavy semi-transparent layer. Used behind sheets, drawers, and modals to separate them from content. */
+  --str-video__background-utility-hover: rgba(
+    26,
+    27,
+    37,
+    0.1
+  ); /** A semi-transparent overlay applied on pointer hover. Sits on top of any surface without replacing it. */
+  --str-video__background-utility-pressed: rgba(
+    26,
+    27,
+    37,
+    0.15
+  ); /** A slightly stronger overlay applied during an active press or tap. Provides tactile feedback on interactive elements. */
+  --str-video__background-utility-selected: rgba(
+    26,
+    27,
+    37,
+    0.2
+  ); /** Indicates an active or selected state. Used for selected messages, active list items, and toggled controls. */
+  --str-video__border-utility-hover: rgba(
+    26,
+    27,
+    37,
+    0.1
+  ); /** Applied on pointer hover over bordered interactive elements. */
+  --str-video__border-utility-pressed: rgba(
+    26,
+    27,
+    37,
+    0.2
+  ); /** Applied during an active press on bordered interactive elements. */
+  --str-video__border-utility-selected: rgba(
+    26,
+    27,
+    37,
+    0.15
+  ); /** Border for selected or active items. Used for highlighted list items and active controls. */
+  --str-video__border-core-opacity-strong: rgba(
+    26,
+    27,
+    37,
+    0.25
+  ); /** A stronger transparent border for elements on colored or dark backgrounds. Used for waveform bars and similar treatments. */
+  --str-video__border-core-opacity-subtle: rgba(
+    26,
+    27,
+    37,
+    0.1
+  ); /** A very light transparent border. Used as a frame treatment on images and media attachments. */
+  --str-video__system-bg-blur: rgba(255, 255, 255, 0.01);
+  --str-video__system-scrollbar: rgba(0, 0, 0, 0.5);
+  --str-video__badge-bg-overlay: rgba(0, 0, 0, 0.75);
+  --str-video__base-transparent-0: var(
+    --str-video__base-transparent-white-0
+  ); /** Deprecated. Superseded by base/transparent/white-0%. Kept as an alias so existing integrations keep working; will be removed in a later release. */
+  --str-video__typography-font-family-sans: var(
+    --str-video__font-family-geist
+  ); /** The primary UI typeface. Maps to SF Pro on iOS, Roboto on Android, and Geist on web. */
+  --str-video__typography-font-family-mono: var(
+    --str-video__font-family-geist-mono
+  ); /** The monospace typeface. Used for code snippets, and technical string values. */
+  --str-video__typography-font-size-xxs: var(
+    --str-video__font-size-size-10
+  ); /** Very small text for fine-print labels, counters, and compact secondary information */
+  --str-video__typography-font-size-xs: var(
+    --str-video__font-size-size-12
+  ); /** Small text for supporting labels, timestamps, and low-hierarchy metadata. */
+  --str-video__typography-font-size-sm: var(
+    --str-video__font-size-size-14
+  ); /** Secondary body text for subtitles, helper text, and de-emphasized UI copy. */
+  --str-video__typography-font-size-md: var(
+    --str-video__font-size-size-16
+  ); /** Default body text size for most readable UI content. */
+  --str-video__typography-font-size-lg: var(
+    --str-video__font-size-size-18
+  ); /** Emphasized body text for primary labels, section headings, and prominent UI copy. */
+  --str-video__typography-font-size-xl: var(
+    --str-video__font-size-size-20
+  ); /** Large text for titles, screen headings, and high-hierarchy labels */
+  --str-video__typography-font-size-2xl: var(
+    --str-video__font-size-size-24
+  ); /** Section titles, important headings. */
+  --str-video__typography-font-size-micro: var(
+    --str-video__font-size-size-8
+  ); /** Smallest text size. Reserved for legal, captions, or secondary metadata where space is extremely constrained. */
+  --str-video__typography-line-height-tight: var(
+    --str-video__line-height-line-height-16
+  ); /** Compact line spacing for short labels, badges, and single-line UI text where vertical density matters. */
+  --str-video__typography-line-height-normal: var(
+    --str-video__line-height-line-height-20
+  ); /** Compact line spacing for short labels, badges, and single-line UI text where vertical density matters. */
+  --str-video__typography-line-height-relaxed: var(
+    --str-video__line-height-line-height-24
+  ); /** Generous line spacing for multi-line body text and message content where readability is the priority. */
+  --str-video__radius-none: var(
+    --str-video__radius-0
+  ); /** No border radius. Used for elements that must have sharp corners, such as full-width banners or flush containers. */
+  --str-video__radius-xxs: var(
+    --str-video__radius-2
+  ); /** 2px radius. Minimal rounding for compact elements like inline badges and tight chips. */
+  --str-video__radius-xs: var(
+    --str-video__radius-4
+  ); /** 4px radius. Subtle rounding for small interactive elements like tags and small buttons. */
+  --str-video__radius-sm: var(
+    --str-video__radius-6
+  ); /** 6px radius. Light rounding for inputs, secondary buttons, and contained UI elements. */
+  --str-video__radius-md: var(
+    --str-video__radius-8
+  ); /** 8px radius. Default radius for cards, modals, and standard interactive components. */
+  --str-video__radius-lg: var(
+    --str-video__radius-12
+  ); /** 12px radius. Prominent rounding for sheets, drawers, and larger containers. */
+  --str-video__radius-xl: var(--str-video__radius-16);
+  --str-video__radius-2xl: var(--str-video__radius-20);
+  --str-video__radius-max: var(--str-video__radius-full);
+  --str-video__radius-3xl: var(--str-video__radius-24);
+  --str-video__radius-4xl: var(--str-video__radius-32);
+  --str-video__spacing-none: var(
+    --str-video__space-0
+  ); /** No spacing. Used for tight component joins. */
+  --str-video__spacing-xxs: var(
+    --str-video__space-4
+  ); /** Base unit. Minimal padding, tight gaps. */
+  --str-video__spacing-xs: var(
+    --str-video__space-8
+  ); /** Small padding and default vertical gaps. */
+  --str-video__spacing-sm: var(
+    --str-video__space-12
+  ); /** Common internal spacing in inputs and buttons. */
+  --str-video__spacing-md: var(
+    --str-video__space-16
+  ); /** Default large padding for sections and cards. */
+  --str-video__spacing-xl: var(
+    --str-video__space-24
+  ); /** Comfortable spacing for chat bubbles and list items. */
+  --str-video__spacing-2xl: var(
+    --str-video__space-32
+  ); /** Larger spacing for panels, modals, and gutters. */
+  --str-video__spacing-3xl: var(
+    --str-video__space-40
+  ); /** Used for wide layout spacing and breathing room. */
+  --str-video__spacing-lg: var(
+    --str-video__space-20
+  ); /** Medium spacing for grouping elements and section breaks. */
+  --str-video__spacing-xxxs: var(--str-video__space-2);
+  --str-video__device-safe-area-bottom: var(--str-video__space-0);
+  --str-video__device-safe-area-top: var(--str-video__space-0);
+  --str-video__button-radius-lg: var(--str-video__radius-full);
+  --str-video__button-radius-md: var(--str-video__radius-full);
+  --str-video__button-radius-sm: var(--str-video__radius-full);
+  --str-video__button-radius-full: var(--str-video__radius-full);
+  --str-video__button-visual-height-sm: var(--str-video__size-32);
+  --str-video__button-visual-height-md: var(--str-video__size-40);
+  --str-video__button-visual-height-lg: var(--str-video__size-48);
+  --str-video__button-visual-height-xs: var(--str-video__size-24);
+  /**
+   * Minimum interactive hit target size.
+   *
+   * iOS / Android: enforce minimum touch target.
+   * Web: do not apply a min-width or min-height; size to content.
+   *
+   * Note: Web uses a placeholder value in Figma due to variable mode constraints.
+   */
+  --str-video__button-hit-target-min-height: var(--str-video__size-48);
+  /**
+   * Minimum interactive hit target size.
+   *
+   * iOS / Android: enforce minimum touch target.
+   * Web: do not apply a min-width or min-height; size to content.
+   *
+   * Note: Web uses a placeholder value in Figma due to variable mode constraints.
+   */
+  --str-video__button-hit-target-min-width: var(--str-video__size-48);
+  --str-video__icon-size-xs: var(--str-video__size-12);
+  --str-video__icon-size-sm: var(--str-video__size-16);
+  --str-video__icon-size-md: var(--str-video__size-20);
+  --str-video__icon-size-lg: var(--str-video__size-32);
+  --str-video__icon-stroke-subtle: var(--str-video__w120);
+  --str-video__icon-stroke-default: var(--str-video__w150);
+  --str-video__icon-stroke-emphasis: var(--str-video__w200);
+  --str-video__emoji-md: var(--str-video__font-size-size-24);
+  --str-video__emoji-lg: var(--str-video__font-size-size-32);
+  --str-video__emoji-xl: var(--str-video__font-size-size-48);
+  --str-video__emoji-2xl: var(--str-video__font-size-size-64);
+  --str-video__input-radius-search-input: var(--str-video__radius-full);
+  --str-video__background-core-highlight: var(
+    --str-video__yellow-50
+  ); /** A tint for drawing attention to content. Used for highlights and pinned messages. */
+  --str-video__background-utility-skeleton-loading-highlight: var(
+    --str-video__background-core-overlay-light
+  ); /** Highlight color for the default skeleton loading gradient. Used for the moving shimmer to indicate loading activity. */
+  --str-video__control-call-control-error-badge-text: var(
+    --str-video__base-black
+  ); /** Icon or text on the error badge. Pinned to black in every mode, because the badge background does not invert and a mode-aware text token would flip to white on yellow. */
+  --str-video__accent-success: var(
+    --str-video__green-400
+  ); /** Indicates a positive or completed state. Used for confirmations, sent indicators, and success feedback. */
+  --str-video__accent-warning: var(
+    --str-video__yellow-200
+  ); /** Indicates a cautionary state that requires attention. Used for moderation flags and non-critical alerts. */
+  --str-video__accent-error: var(
+    --str-video__red-500
+  ); /** Indicates a failure or destructive state. Used for failed messages, validation errors, and deletions. */
+  --str-video__brand-50: var(--str-video__blue-50);
+  --str-video__brand-100: var(--str-video__blue-100);
+  --str-video__brand-150: var(--str-video__blue-150);
+  --str-video__brand-200: var(--str-video__blue-200);
+  --str-video__brand-300: var(--str-video__blue-300);
+  --str-video__brand-400: var(--str-video__blue-400);
+  --str-video__brand-500: var(--str-video__blue-500);
+  --str-video__brand-600: var(--str-video__blue-600);
+  --str-video__brand-700: var(--str-video__blue-700);
+  --str-video__brand-800: var(--str-video__blue-800);
+  --str-video__brand-900: var(--str-video__blue-900);
+  --str-video__chrome-0: var(--str-video__base-white);
+  --str-video__chrome-50: var(--str-video__slate-50);
+  --str-video__chrome-100: var(--str-video__slate-100);
+  --str-video__chrome-150: var(--str-video__slate-150);
+  --str-video__chrome-200: var(--str-video__slate-200);
+  --str-video__chrome-300: var(--str-video__slate-300);
+  --str-video__chrome-400: var(--str-video__slate-400);
+  --str-video__chrome-500: var(--str-video__slate-500);
+  --str-video__chrome-600: var(--str-video__slate-600);
+  --str-video__chrome-700: var(--str-video__slate-700);
+  --str-video__chrome-800: var(--str-video__slate-800);
+  --str-video__chrome-900: var(--str-video__slate-900);
+  --str-video__chrome-1000: var(--str-video__base-black);
+  --str-video__device-radius: var(--str-video__radius-md);
+  --str-video__button-primary-bg-liquid-glass: var(
+    --str-video__base-transparent-0
+  );
+  --str-video__button-primary-border: var(--str-video__brand-200);
+  --str-video__button-destructive-bg: var(--str-video__accent-error);
+  --str-video__button-destructive-text: var(--str-video__accent-error);
+  --str-video__button-destructive-border: var(--str-video__accent-error);
+  --str-video__emoji-sm: var(--str-video__typography-font-size-md);
+  --str-video__input-radius-text-input: var(--str-video__radius-lg);
+  --str-video__input-radius-select-input: var(--str-video__radius-lg);
+  --str-video__input-radius-option-card: var(--str-video__radius-lg);
+  --str-video__background-core-app: var(
+    --str-video__chrome-0
+  ); /** The outermost application background. Sits behind all surfaces and is generally not overridden directly. */
+  --str-video__background-core-elevation-0: var(
+    --str-video__chrome-0
+  ); /** The base layer. Always white, used as the reference point for the elevation scale. Steps above this gain depth in dark mode through progressively lighter backgrounds. */
+  --str-video__background-core-elevation-1: var(
+    --str-video__chrome-0
+  ); /** Slightly raised surfaces. Used for content containers that sit directly on the base layer, such as the message list and channel list. */
+  --str-video__background-core-elevation-2: var(
+    --str-video__chrome-0
+  ); /** Floating and modal surfaces. Used for popovers, dropdowns, dialogs, and any element that interrupts the content flow. */
+  --str-video__background-core-elevation-3: var(
+    --str-video__chrome-0
+  ); /** Used for badge counts that float above other UI elements. */
+  --str-video__background-core-inverse: var(
+    --str-video__chrome-1000
+  ); /** The opposite of the primary surface. Used for tooltips, snackbars, and high-contrast floating elements. */
+  --str-video__background-core-on-accent: var(
+    --str-video__chrome-0
+  ); /** Background for elements placed on an accent-colored surface. Ensures legibility against brand colors. */
+  --str-video__background-core-on-elevation: var(
+    --str-video__chrome-100
+  ); /** Background for controls and elements inside a floating surface, such as a menu, dialog, or popover. Steps up in dark mode, where the elevated surface has already lightened and a plain surface background would disappear into it. */
+  --str-video__background-core-surface-card: var(
+    --str-video__chrome-50
+  ); /** Background for contained, card-style elements. Matches the surface in light mode but lifts slightly in dark mode to maintain visual separation. */
+  --str-video__background-core-surface-default: var(
+    --str-video__chrome-100
+  ); /** Background for sectioned content areas. Used for grouped containers, and distinct content regions. */
+  --str-video__background-core-surface-strong: var(
+    --str-video__chrome-150
+  ); /** A more prominent background. Used for elements that need to stand out from the main surface. */
+  --str-video__background-core-surface-subtle: var(
+    --str-video__chrome-50
+  ); /** A slightly receded background. Used for secondary containers or to create soft visual separation. */
+  --str-video__background-utility-disabled: var(
+    --str-video__chrome-100
+  ); /** Background for non-interactive elements. Flattens the element visually to signal unavailability. */
+  --str-video__background-utility-skeleton-loading-base: var(
+    --str-video__base-transparent-0
+  ); /** Base color for the default skeleton loading gradient. Used as the background tone for placeholder surfaces. */
+  --str-video__border-utility-focused: var(
+    --str-video__brand-150
+  ); /** Focus ring for keyboard and accessibility navigation. Uses the brand color to signal input focus. */
+  --str-video__border-utility-success: var(
+    --str-video__accent-success
+  ); /** Border for positive or confirmed states. Used on validated inputs and success indicators. */
+  --str-video__border-utility-warning: var(
+    --str-video__accent-warning
+  ); /** Border for cautionary states. Used on inputs or elements requiring attention. */
+  --str-video__border-utility-error: var(
+    --str-video__accent-error
+  ); /** Border for failure or invalid states. Used on failed inputs and destructive confirmations. */
+  --str-video__border-utility-disabled: var(
+    --str-video__chrome-100
+  ); /** Border for non-interactive elements. Matches the disabled surface to visually flatten the element. */
+  --str-video__border-utility-disabled-on-surface: var(
+    --str-video__chrome-150
+  ); /** Border for disabled elements on elevated surfaces. Stays visually distinct from the surface without drawing attention to a non-interactive element. */
+  --str-video__border-core-default: var(
+    --str-video__chrome-150
+  ); /** Standard border for surfaces and containers. Used for input fields, cards, and dividers on neutral backgrounds. */
+  --str-video__border-core-on-accent: var(
+    --str-video__chrome-0
+  ); /** Border on accent-colored surfaces. Stays white in both modes since the accent background doesn't invert. */
+  --str-video__border-core-on-elevation: var(
+    --str-video__chrome-150
+  ); /** Border for controls and elements inside a floating surface, such as a menu, dialog, or popover. Steps up in dark mode to keep the edge visible once the elevated surface has lightened. Use border/core/on-surface instead for elements on a plain surface. */
+  --str-video__border-core-on-inverse: var(
+    --str-video__chrome-0
+  ); /** Border on inverse-colored surfaces. Stays legible when the background flips between light and dark mode. */
+  --str-video__border-core-on-surface: var(
+    --str-video__chrome-300
+  ); /** Border for elements sitting on elevated surfaces. Uses a stronger value than default to maintain visible separation when the background is darker. */
+  --str-video__border-core-strong: var(
+    --str-video__chrome-300
+  ); /** An emphatic border for elements that need clear definition. Used for focused containers and prominent dividers. */
+  --str-video__border-core-subtle: var(
+    --str-video__chrome-100
+  ); /** A lighter border for minimal separation. Used where a full-strength border would feel too heavy. */
+  --str-video__avatar-presence-bg-online: var(
+    --str-video__accent-success
+  ); /** The green online indicator. Uses success accent in normal themes. In high-contrast, color is dropped and replaced with strong black for maximum clarity. */
+  --str-video__avatar-bg-default: var(--str-video__brand-150);
+  --str-video__avatar-bg-placeholder: var(--str-video__chrome-150);
+  --str-video__avatar-text-default: var(--str-video__brand-900);
+  --str-video__avatar-text-placeholder: var(--str-video__chrome-500);
+  --str-video__system-text: var(--str-video__chrome-1000);
+  --str-video__badge-bg-error: var(--str-video__accent-error);
+  --str-video__badge-bg-inverse: var(--str-video__chrome-1000);
+  --str-video__control-checkbox-bg: var(--str-video__base-transparent-0);
+  --str-video__control-radio-button-bg: var(--str-video__base-transparent-0);
+  --str-video__control-radio-check-bg: var(--str-video__base-transparent-0);
+  --str-video__control-accept-call-button-bg: var(
+    --str-video__accent-success
+  ); /** Background for the accept call action. Green rather than the primary accent, so accept and decline read as opposites rather than as two primary actions. */
+  --str-video__control-call-control-error-badge-bg: var(
+    --str-video__accent-warning
+  ); /** Background for the error badge on a call control button. Yellow rather than red, so it stays legible on a red button and over video. */
+  --str-video__control-decline-call-button-bg: var(
+    --str-video__accent-error
+  ); /** Background for the decline call action. Red rather than the destructive button token, so accept and decline read as a matched pair. */
+  --str-video__text-primary: var(
+    --str-video__chrome-900
+  ); /** Main body text. Used for message content, titles, and any text that carries primary meaning. */
+  --str-video__text-secondary: var(
+    --str-video__chrome-700
+  ); /** Supporting metadata text. Used for timestamps, subtitles, and secondary labels. */
+  --str-video__text-tertiary: var(
+    --str-video__chrome-500
+  ); /** De-emphasized text. Used for hints, placeholders, and lowest-priority supporting information. */
+  --str-video__text-on-inverse: var(
+    --str-video__chrome-0
+  ); /** Text on inverse-colored surfaces. Flips between light and dark to maintain legibility when the background inverts. */
+  --str-video__text-on-accent: var(
+    --str-video__chrome-0
+  ); /** Text on accent-colored surfaces. Stays white in both light and dark mode since the accent background doesn't invert. */
+  --str-video__text-disabled: var(
+    --str-video__chrome-300
+  ); /** Text for non-interactive or unavailable states. Communicates that an element can't be interacted with. */
+  --str-video__text-link: var(
+    --str-video__brand-500
+  ); /** Hyperlinks and inline actions. Uses the brand color to signal interactivity within text content. */
+  --str-video__accent-primary: var(
+    --str-video__brand-500
+  ); /** The main brand color. Used for interactive elements, buttons, links, and primary actions. Override this to apply your brand color across the SDK. */
+  --str-video__accent-neutral: var(
+    --str-video__chrome-500
+  ); /** A mid-tone gray for de-emphasized UI elements. */
+  --str-video__label-bg-neutral: var(
+    --str-video__chrome-150
+  ); /** Background for a neutral label. */
+  --str-video__label-bg-primary: var(
+    --str-video__brand-150
+  ); /** Background for a primary label. */
+  --str-video__label-text-primary: var(
+    --str-video__brand-900
+  ); /** Text on a primary label. */
+  --str-video__indicator-connection-quality-fair: var(
+    --str-video__accent-warning
+  ); /** Reduced connection. Fills two bars on the connection quality indicator. */
+  --str-video__indicator-connection-quality-great: var(
+    --str-video__accent-success
+  ); /** Strongest connection. Fills all three bars on the connection quality indicator. */
+  --str-video__indicator-connection-quality-poor: var(
+    --str-video__accent-error
+  ); /** Weak connection. Fills one bar, and is the only quality state worth interrupting the user for. */
+  --str-video__indicator-microphone-level-bar-active: var(
+    --str-video__brand-400
+  ); /** A filled bar in the microphone level meter. The number filled tracks the live input level from the selected device. */
+  --str-video__indicator-microphone-level-bar-inactive: var(
+    --str-video__chrome-200
+  ); /** An unfilled bar in the microphone level meter. Always drawn, so the meter keeps a constant width as the level moves. */
+  --str-video__indicator-sound-indicator-speaking: var(
+    --str-video__brand-400
+  ); /** Shown while a remote participant is talking. Only meaningful once the call is connected, since speaking state arrives from SFU events. */
+  --str-video__button-primary-bg: var(--str-video__accent-primary);
+  --str-video__button-primary-text: var(--str-video__accent-primary);
+  --str-video__button-primary-text-on-accent: var(--str-video__text-on-accent);
+  --str-video__button-primary-text-on-dark: var(--str-video__text-on-inverse);
+  --str-video__button-primary-border-on-dark: var(
+    --str-video__border-core-on-inverse
+  );
+  --str-video__button-secondary-bg: var(
+    --str-video__background-core-surface-default
+  );
+  --str-video__button-secondary-bg-liquid-glass: var(
+    --str-video__background-core-elevation-0
+  );
+  --str-video__button-secondary-text: var(--str-video__text-primary);
+  --str-video__button-secondary-text-on-accent: var(--str-video__text-primary);
+  --str-video__button-secondary-text-on-dark: var(--str-video__text-on-inverse);
+  --str-video__button-secondary-border: var(--str-video__border-core-default);
+  --str-video__button-secondary-border-on-dark: var(
+    --str-video__border-core-on-inverse
+  );
+  --str-video__button-destructive-bg-liquid-glass: var(
+    --str-video__background-core-elevation-0
+  );
+  --str-video__button-destructive-text-on-accent: var(
+    --str-video__text-on-accent
+  );
+  --str-video__button-destructive-text-on-dark: var(
+    --str-video__text-on-inverse
+  );
+  --str-video__button-destructive-border-on-dark: var(
+    --str-video__text-on-inverse
+  );
+  --str-video__input-text-default: var(
+    --str-video__text-primary
+  ); /** Main text inside the chat input. */
+  --str-video__input-text-placeholder: var(
+    --str-video__text-tertiary
+  ); /** Placeholder text for the input. Lower emphasis than main text. */
+  --str-video__input-text-disabled: var(
+    --str-video__text-disabled
+  ); /** Placeholder text for the input. Lower emphasis than main text. */
+  --str-video__input-text-icon: var(
+    --str-video__text-tertiary
+  ); /** Icons inside the input area (attach, emoji, camera, send when idle). Matches secondary text strength. */
+  --str-video__input-text-icon-active: var(
+    --str-video__text-primary
+  ); /** Icons inside the input area in their active state. Steps up from the resting icon colour to primary text. */
+  --str-video__border-utility-active: var(
+    --str-video__accent-primary
+  ); /** Active input border. Used for focused text fields and selected form elements. */
+  --str-video__avatar-presence-border: var(
+    --str-video__border-core-on-inverse
+  ); /** The thin outline around the presence dot. Matches the local surface behind the avatar. In high-contrast it uses the base surface. */
+  --str-video__avatar-presence-bg-offline: var(
+    --str-video__accent-neutral
+  ); /** The green online indicator. Uses success accent in normal themes. In high-contrast, color is dropped and replaced with strong black for maximum clarity. */
+  --str-video__system-caret: var(--str-video__accent-primary);
+  --str-video__badge-bg-default: var(--str-video__background-core-elevation-3);
+  --str-video__badge-bg-primary: var(--str-video__accent-primary);
+  --str-video__badge-bg-neutral: var(--str-video__accent-neutral);
+  --str-video__badge-text: var(--str-video__text-primary);
+  --str-video__badge-text-on-inverse: var(--str-video__text-on-inverse);
+  --str-video__badge-text-on-accent: var(--str-video__text-on-accent);
+  --str-video__badge-border: var(--str-video__border-core-on-inverse);
+  --str-video__control-progress-bar-fill: var(--str-video__accent-neutral);
+  --str-video__control-progress-bar-track: var(
+    --str-video__background-core-surface-strong
+  );
+  --str-video__control-progress-bar-fill-audio: var(
+    --str-video__accent-primary
+  ); /** Progress fill for audio playback, distinct from the neutral fill used elsewhere. */
+  --str-video__control-toggle-switch-bg: var(--str-video__accent-neutral);
+  --str-video__control-toggle-switch-bg-selected: var(
+    --str-video__accent-primary
+  );
+  --str-video__control-toggle-switch-bg-disabled: var(
+    --str-video__background-utility-disabled
+  );
+  --str-video__control-toggle-switch-knob: var(
+    --str-video__background-core-on-accent
+  );
+  --str-video__control-checkbox-border: var(--str-video__border-core-default);
+  --str-video__control-checkbox-bg-selected: var(--str-video__accent-primary);
+  --str-video__control-checkbox-icon: var(--str-video__text-on-accent);
+  --str-video__control-radio-button-border: var(
+    --str-video__border-core-default
+  );
+  --str-video__control-radio-button-bg-selected: var(
+    --str-video__accent-primary
+  );
+  --str-video__control-radio-button-indicator: var(--str-video__text-on-accent);
+  --str-video__control-radio-check-border: var(
+    --str-video__border-core-default
+  );
+  --str-video__control-radio-check-bg-selected: var(
+    --str-video__accent-primary
+  );
+  --str-video__control-radio-check-icon: var(--str-video__text-on-accent);
+  --str-video__control-chip-border: var(--str-video__border-core-default);
+  --str-video__control-chip-text: var(--str-video__text-primary);
+  --str-video__control-accept-call-button-text: var(
+    --str-video__text-on-accent
+  ); /** Icon or label on the accept call action, sitting on the success background. */
+  --str-video__control-decline-call-button-text: var(
+    --str-video__text-on-accent
+  ); /** Icon or label on the decline call action, sitting on the error background. */
+  --str-video__label-text-neutral: var(
+    --str-video__text-primary
+  ); /** Text on a neutral label. */
+  --str-video__tab-indicator: var(
+    --str-video__accent-primary
+  ); /** The underline on the selected tab. */
+  --str-video__tab-text: var(
+    --str-video__text-secondary
+  ); /** Label colour of an unselected tab. */
+  --str-video__tab-text-selected: var(
+    --str-video__accent-primary
+  ); /** Label colour of the selected tab. */
+  --str-video__tab-track: var(
+    --str-video__border-core-default
+  ); /** The line running under the tab bar. */
+}