@trimble-oss/moduswebcomponents
Version:
Modus Web Components is a modern, accessible UI library built with Stencil JS that provides reusable web components following Trimble's Modus design system. This updated version focuses on improved flexibility, enhanced theming options, comprehensive cust
983 lines (916 loc) • 28.6 kB
CSS
/**
* Modus Web Components - Variables Only
*
* Lightweight alternative to modus-wc-styles.css for legacy apps.
* Contains ONLY CSS variables, theme definitions, and font declarations.
* No Tailwind reset, no DaisyUI classes, no utility classes.
*
* Use this when:
* - Your app uses Modus components inside Shadow DOM
* - You want to avoid the Tailwind Preflight reset causing style regressions
* - The handleShadowDOMStyles() injection handles class rules inside shadow roots
*
* Usage:
* import '@trimble-oss/moduswebcomponents/modus-wc-variables.css';
*/
/* ===== Font Declarations ===== */
/* Open Sans Variable Font - Normal */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 300 800;
font-stretch: 100%;
font-display: swap;
src: url(assets/fonts/open-sans/OpenSans-VariableFont.woff2) format('woff2');
}
/* Open Sans Variable Font - Italic */
@font-face {
font-family: 'Open Sans';
font-style: italic;
font-weight: 300 800;
font-stretch: 100%;
font-display: swap;
src: url(assets/fonts/open-sans/OpenSans-Italic-VariableFont.woff2)
format('woff2');
}
/* ===== CSS Variables ===== */
:root {
/**
* The following variables should always match Modus
*/
color-scheme: light dark;
/* Neutral Progression */
--modus-wc-color-white: #fff;
--modus-wc-color-gray-light: #f1f1f6;
--modus-wc-color-gray-01: #f5f5f8;
--modus-wc-color-gray-02: #e9eaf0;
--modus-wc-color-gray-0: #e0e1e9;
--modus-wc-color-gray-1: #cbcdd6;
--modus-wc-color-gray-2: #b7b9c3;
--modus-wc-color-gray-3: #a3a6b1;
--modus-wc-color-gray-4: #90939f;
--modus-wc-color-gray-5: #7d808d;
--modus-wc-color-gray-6: #6a6e79;
--modus-wc-color-gray-7: #585c65;
--modus-wc-color-gray-8: #464b52;
--modus-wc-color-gray-9: #353a40;
--modus-wc-color-gray-10: #171c1e;
--modus-wc-color-trimble-gray: #252a2e;
--modus-wc-color-black: #000;
/* Blue Progression */
--modus-wc-color-blue-pale: #dcedf9;
--modus-wc-color-highlight-blue: #019aeb;
--modus-wc-color-blue-light: #217cbb;
--modus-wc-color-trimble-blue: #0063a3;
--modus-wc-color-connect-blue: #00437b;
--modus-wc-color-blue-dark: #0e416c;
--modus-wc-color-info-blue: #004f83;
--modus-wc-color-highlight-blue-pale: rgba(1, 154, 235, 0.5);
--modus-wc-color-info-blue-on-dark: var(--modus-wc-color-info-blue);
/* Yellow Progression */
--modus-wc-color-yellow-pale: #fff5e4;
--modus-wc-color-yellow-light: #fec157;
--modus-wc-color-yellow: #fbad26;
--modus-wc-color-yellow-dark: #e49325;
/* Red Progression */
--modus-wc-color-red-pale: #fbd4d7;
--modus-wc-color-red-light: #e86363;
--modus-wc-color-red: #da212c;
--modus-wc-color-red-dark: #ab1f26;
/* Green Progression */
--modus-wc-color-green-pale: #e0eccf;
--modus-wc-color-green-light: #4ea646;
--modus-wc-color-green: #1e8a44;
--modus-wc-color-green-dark: #006638;
/* In-Field */
--modus-wc-in-field-success-dark-bg: #00fe00;
--modus-wc-in-field-success-light-bg: #00d22f;
--modus-wc-in-field-warning: #ff8b00;
--modus-wc-in-field-error: #da212c;
--modus-wc-in-field-info: #019aeb;
--modus-wc-in-field-avoidance: #df4eb2;
--modus-wc-in-field-black: #000;
/* Border width */
--modus-wc-border-width-xs: 1px;
--modus-wc-border-width-sm: 2px;
--modus-wc-border-width-md: 3px;
--modus-wc-border-width-lg: 4px;
--modus-wc-border-width-xl: 8px;
--modus-wc-border-width-2xl: 12px;
--modus-wc-border-width-3xl: 24px;
/* Border radius */
--modus-wc-border-radius-sm: 2px;
--modus-wc-border-radius-md: 4px;
--modus-wc-border-radius-lg: 8px;
--modus-wc-border-radius-xl: 12px;
--modus-wc-border-radius-2xl: 16px;
--modus-wc-border-radius-3xl: 24px;
--modus-wc-border-radius-rounded: 1000px;
/* Line heights */
--modus-wc-line-height-xs: 0.5rem;
--modus-wc-line-height-sm: 1rem;
--modus-wc-line-height-md: 1.5rem;
--modus-wc-line-height-lg: 2rem;
--modus-wc-line-height-xl: 3rem;
--modus-wc-line-height-h6: 1.125rem;
/* 18px */
--modus-wc-line-height-h3: 1.6875rem;
/* 27px */
--modus-wc-line-height-h2: 1.875rem;
/* 30px */
--modus-wc-line-height-h1: 2.25rem;
/* 36px */
--modus-wc-line-height-h0: 2.75rem;
/* 44px */
/* Font Family */
--modus-wc-font-family:
'Open Sans', 'Segoe UI', 'Noto Sans', 'San Francisco', 'Helvetica', 'Arial',
sans-serif;
/* Font Sizes */
--modus-wc-font-size-2xs: 0.5rem;
/* 8px */
--modus-wc-font-size-xs: 0.625rem;
/* 10px */
--modus-wc-font-size-sm: 0.75rem;
/* 12px */
--modus-wc-font-size-md: 0.875rem;
/* 14px */
--modus-wc-font-size-lg: 1rem;
/* 16px */
--modus-wc-font-size-xl: 1.125rem;
/* 18px */
--modus-wc-font-size-2xl: 1.25rem;
/* 20px */
--modus-wc-font-size-3xl: 1.5rem;
/* 24px */
--modus-wc-font-size-4xl: 1.875rem;
/* 30px */
/* Font Weights */
--modus-wc-font-weight-light: 300;
--modus-wc-font-weight-normal: 400;
--modus-wc-font-weight-semibold: 600;
--modus-wc-font-weight-bold: 700;
/* Sizes */
--modus-wc-size-xxs: 0.75rem;
/* 12px */
--modus-wc-size-xs: 1.5rem;
/* 24px */
--modus-wc-size-sm: 2rem;
/* 32px */
--modus-wc-size-md: 2.5rem;
/* 40px */
--modus-wc-size-lg: 3rem;
/* 48px */
--modus-wc-size-xl: 3.5rem;
/* 56px */
--modus-wc-size-xxl: 4.5rem;
/* 72px */
/* Spacing */
--modus-wc-spacing-2xs: 0.125rem;
/* 2px */
--modus-wc-spacing-xs: 0.25rem;
/* 4px */
--modus-wc-spacing-sm: 0.5rem;
/* 8px */
--modus-wc-spacing-md: 0.75rem;
/* 12px */
--modus-wc-spacing-lg: 1rem;
/* 16px */
--modus-wc-spacing-xl: 1.5rem;
/* 24px */
--modus-wc-spacing-2xl: 2rem;
/* 32px */
--modus-wc-spacing-3xl: 3rem;
/* 48px */
--modus-wc-spacing-20: 5rem;
/* 80px */
--modus-wc-spacing-24: 6rem;
/* 96px */
/* Inputs */
--modus-wc-input-height-sm: 1.5rem;
/* 24px */
--modus-wc-input-height-md: 2rem;
/* 32px */
--modus-wc-input-height-lg: 3rem;
/* 48px */
/* Border Variables */
--modus-wc-border-radius-badge: var(--modus-wc-border-radius-md);
--modus-wc-border-radius-btn: var(--modus-wc-border-radius-lg);
--modus-wc-border-radius-box: var(--modus-wc-border-radius-2xl);
--modus-wc-border-radius-tab: var(--modus-wc-border-radius-lg);
--modus-wc-border-radius-input: var(--modus-wc-border-radius-lg);
--modus-wc-border-radius-table: var(--modus-wc-border-radius-2xl);
--modus-wc-border-radius-chip: var(--modus-wc-border-radius-lg);
--modus-wc-border-radius-alert: var(--modus-wc-border-radius-md);
/* Opacity */
--modus-wc-opacity-overlay: 0.6;
/* Dynamic Base Colors */
--modus-wc-color-base-page: light-dark(
var(--modus-wc-color-white),
var(--modus-wc-color-trimble-gray)
);
--modus-wc-color-base-100: light-dark(
var(--modus-wc-color-gray-01),
var(--modus-wc-color-gray-8)
);
--modus-wc-color-base-200: light-dark(
var(--modus-wc-color-gray-02),
var(--modus-wc-color-gray-10)
);
--modus-wc-color-base-300: light-dark(
var(--modus-wc-color-gray-0),
var(--modus-wc-color-gray-10)
);
--modus-wc-color-base-content: light-dark(
var(--modus-wc-color-gray-10),
var(--modus-wc-color-gray-1)
);
--modus-wc-color-base-content-low-contrast: light-dark(
var(--modus-wc-color-gray-8),
var(--modus-wc-color-gray-3)
);
--modus-wc-color-base-content-high-contrast: light-dark(
var(--modus-wc-color-black),
var(--modus-wc-color-white)
);
--modus-wc-color-base-inverted: light-dark(
var(--modus-wc-color-gray-10),
var(--modus-wc-color-gray-light)
);
/**
* The following variables are applied to themes for applications to override.
*/
/* Primary Colors */
--modus-wc-color-primary: light-dark(
var(--modus-wc-color-trimble-blue),
var(--modus-wc-color-highlight-blue)
);
--modus-wc-color-primary-content: light-dark(
var(--modus-wc-color-white),
var(--modus-wc-color-black)
);
--modus-wc-color-primary-pale: light-dark(
var(--modus-wc-color-blue-pale),
var(--modus-wc-color-highlight-blue-pale)
);
/* Secondary Colors */
--modus-wc-color-secondary: light-dark(
var(--modus-wc-color-yellow),
var(--modus-wc-color-yellow-light)
);
--modus-wc-color-secondary-content: light-dark(
var(--modus-wc-color-black),
var(--modus-wc-color-black)
);
--modus-wc-color-secondary-pale: light-dark(
var(--modus-wc-color-yellow-pale),
var(--modus-wc-color-yellow-pale)
);
/* Accent Colors */
--modus-wc-color-accent: light-dark(
var(--modus-wc-color-gray-6),
var(--modus-wc-color-gray-4)
);
--modus-wc-color-accent-content: light-dark(
var(--modus-wc-color-white),
var(--modus-wc-color-black)
);
--modus-wc-color-accent-pale: light-dark(
var(--modus-wc-color-gray-6),
var(--modus-wc-color-gray-4)
);
/* Neutral Colors */
--modus-wc-color-neutral: light-dark(
var(--modus-wc-color-base-100),
var(--modus-wc-color-base-100)
);
--modus-wc-color-neutral-content: light-dark(
var(--modus-wc-color-base-content),
var(--modus-wc-color-base-content)
);
--modus-wc-color-neutral-pale: light-dark(
var(--modus-wc-color-base-100),
var(--modus-wc-color-base-100)
);
--modus-wc-color-trimble-neutral: light-dark(
var(--modus-wc-color-trimble-gray),
var(--modus-wc-color-gray-light)
);
--modus-wc-color-trimble-neutral-content: light-dark(
var(--modus-wc-color-white),
var(--modus-wc-color-black)
);
/* Info Colors */
--modus-wc-color-info: light-dark(
var(--modus-wc-color-blue-dark),
var(--modus-wc-color-blue-light)
);
--modus-wc-color-info-content: light-dark(
var(--modus-wc-color-white),
var(--modus-wc-color-white)
);
--modus-wc-color-info-pale: light-dark(
var(--modus-wc-color-blue-pale),
var(--modus-wc-color-blue-pale)
);
/* Success Colors */
--modus-wc-color-success: light-dark(
var(--modus-wc-color-green),
var(--modus-wc-color-green-light)
);
--modus-wc-color-success-content: light-dark(
var(--modus-wc-color-white),
var(--modus-wc-color-black)
);
--modus-wc-color-success-pale: light-dark(
var(--modus-wc-color-green-pale),
var(--modus-wc-color-green-pale)
);
/* Warning Colors */
--modus-wc-color-warning: light-dark(
var(--modus-wc-color-yellow-dark),
var(--modus-wc-color-yellow-light)
);
--modus-wc-color-warning-content: light-dark(
var(--modus-wc-color-black),
var(--modus-wc-color-black)
);
--modus-wc-color-warning-pale: light-dark(
var(--modus-wc-color-yellow-pale),
var(--modus-wc-color-yellow-pale)
);
/* Error Colors */
--modus-wc-color-error: light-dark(
var(--modus-wc-color-red),
var(--modus-wc-color-red-light)
);
--modus-wc-color-error-content: light-dark(
var(--modus-wc-color-white),
var(--modus-wc-color-black)
);
--modus-wc-color-error-pale: light-dark(
var(--modus-wc-color-red-pale),
var(--modus-wc-color-red-pale)
);
/* Tailwind Colors */
/* Slate */
/* Orange */
--tw-orange-50: #fff7ed;
--tw-orange-100: #ffedd5;
--tw-orange-200: #fed7aa;
--tw-orange-300: #fdba74;
--tw-orange-400: #fb923c;
--tw-orange-500: #f97316;
--tw-orange-600: #ea580c;
--tw-orange-700: #c2410c;
--tw-orange-800: #9a3412;
--tw-orange-900: #7c2d12;
--tw-orange-950: #431407;
/* Amber */
--tw-amber-50: #fffbeb;
--tw-amber-100: #fef3c7;
--tw-amber-200: #fde68a;
--tw-amber-300: #fcd34d;
--tw-amber-400: #fbbf24;
--tw-amber-500: #f59e0b;
--tw-amber-600: #d97706;
--tw-amber-700: #b45309;
--tw-amber-800: #92400e;
--tw-amber-900: #78350f;
--tw-amber-950: #451a03;
/* Lime */
--tw-lime-50: #f7fee7;
--tw-lime-100: #ecfccb;
--tw-lime-200: #d9f99d;
--tw-lime-300: #bef264;
--tw-lime-400: #a3e635;
--tw-lime-500: #84cc16;
--tw-lime-600: #65a30d;
--tw-lime-700: #4d7c0f;
--tw-lime-800: #3f6212;
--tw-lime-900: #365314;
--tw-lime-950: #1a2e05;
/* Emerald */
--tw-emerald-50: #ecfdf5;
--tw-emerald-100: #d1fae5;
--tw-emerald-200: #a7f3d0;
--tw-emerald-300: #6ee7b7;
--tw-emerald-400: #34d399;
--tw-emerald-500: #10b981;
--tw-emerald-600: #059669;
--tw-emerald-700: #047857;
--tw-emerald-800: #065f46;
--tw-emerald-900: #064e3b;
--tw-emerald-950: #022c22;
/* Teal */
--tw-teal-50: #f0fdfa;
--tw-teal-100: #ccfbf1;
--tw-teal-200: #99f6e4;
--tw-teal-300: #5eead4;
--tw-teal-400: #2dd4bf;
--tw-teal-500: #14b8a6;
--tw-teal-600: #0d9488;
--tw-teal-700: #0f766e;
--tw-teal-800: #115e59;
--tw-teal-900: #134e4a;
--tw-teal-950: #042f2e;
/* Cyan */
--tw-cyan-50: #ecfeff;
--tw-cyan-100: #cffafe;
--tw-cyan-200: #a5f3fc;
--tw-cyan-300: #67e8f9;
--tw-cyan-400: #22d3ee;
--tw-cyan-500: #06b6d4;
--tw-cyan-600: #0891b2;
--tw-cyan-700: #0e7490;
--tw-cyan-800: #155e75;
--tw-cyan-900: #164e63;
--tw-cyan-950: #083344;
/* Indigo */
--tw-indigo-50: #eef2ff;
--tw-indigo-100: #e0e7ff;
--tw-indigo-200: #c7d2fe;
--tw-indigo-300: #a5b4fc;
--tw-indigo-400: #818cf8;
--tw-indigo-500: #6366f1;
--tw-indigo-600: #4f46e5;
--tw-indigo-700: #4338ca;
--tw-indigo-800: #3730a3;
--tw-indigo-900: #312e81;
--tw-indigo-950: #1e1b4b;
/* Violet */
--tw-violet-50: #f5f3ff;
--tw-violet-100: #ede9fe;
--tw-violet-200: #ddd6fe;
--tw-violet-300: #c4b5fd;
--tw-violet-400: #a78bfa;
--tw-violet-500: #8b5cf6;
--tw-violet-600: #7c3aed;
--tw-violet-700: #6d28d9;
--tw-violet-800: #5b21b6;
--tw-violet-900: #4c1d95;
--tw-violet-950: #2e1065;
/* Purple */
--tw-purple-50: #faf5ff;
--tw-purple-100: #f3e8ff;
--tw-purple-200: #e9d5ff;
--tw-purple-300: #d8b4fe;
--tw-purple-400: #c084fc;
--tw-purple-500: #a855f7;
--tw-purple-600: #9333ea;
--tw-purple-700: #7e22ce;
--tw-purple-800: #6b21a8;
--tw-purple-900: #581c87;
--tw-purple-950: #3b0764;
/* Fuchsia */
--tw-fuchsia-50: #fdf4ff;
--tw-fuchsia-100: #fae8ff;
--tw-fuchsia-200: #f5d0fe;
--tw-fuchsia-300: #f0abfc;
--tw-fuchsia-400: #e879f9;
--tw-fuchsia-500: #d946ef;
--tw-fuchsia-600: #c026d3;
--tw-fuchsia-700: #a21caf;
--tw-fuchsia-800: #86198f;
--tw-fuchsia-900: #701a75;
--tw-fuchsia-950: #4a044e;
/* Pink */
--tw-pink-50: #fdf2f8;
--tw-pink-100: #fce7f3;
--tw-pink-200: #fbcfe8;
--tw-pink-300: #f9a8d4;
--tw-pink-400: #f47286;
--tw-pink-500: #ec4899;
--tw-pink-600: #db2777;
--tw-pink-700: #be185d;
--tw-pink-800: #9d174d;
--tw-pink-900: #831843;
--tw-pink-950: #500724;
/* Rose */
--tw-rose-50: #fff1f2;
--tw-rose-100: #ffe4e6;
--tw-rose-200: #fecdd3;
--tw-rose-300: #fda4af;
--tw-rose-400: #fb7185;
--tw-rose-500: #f43f5e;
--tw-rose-600: #e11d48;
--tw-rose-700: #be123c;
--tw-rose-800: #9f1239;
--tw-rose-900: #881337;
--tw-rose-950: #4c0519;
/* Tailwind Dynamic Colors */
/* Orange */
--modus-tw-color-orange-100: light-dark(
var(--tw-orange-600),
var(--tw-orange-100)
);
--modus-tw-color-orange-200: light-dark(
var(--tw-orange-700),
var(--tw-orange-200)
);
--modus-tw-color-orange-300: light-dark(
var(--tw-orange-800),
var(--tw-orange-300)
);
--modus-tw-color-orange-400: light-dark(
var(--tw-orange-900),
var(--tw-orange-400)
);
/* Amber */
--modus-tw-color-amber-100: light-dark(
var(--tw-amber-600),
var(--tw-amber-100)
);
--modus-tw-color-amber-200: light-dark(
var(--tw-amber-700),
var(--tw-amber-200)
);
--modus-tw-color-amber-300: light-dark(
var(--tw-amber-800),
var(--tw-amber-300)
);
--modus-tw-color-amber-400: light-dark(
var(--tw-amber-900),
var(--tw-amber-400)
);
/* Lime */
--modus-tw-color-lime-100: light-dark(var(--tw-lime-600), var(--tw-lime-100));
--modus-tw-color-lime-200: light-dark(var(--tw-lime-700), var(--tw-lime-200));
--modus-tw-color-lime-300: light-dark(var(--tw-lime-800), var(--tw-lime-300));
--modus-tw-color-lime-400: light-dark(var(--tw-lime-900), var(--tw-lime-400));
/* Emerald */
--modus-tw-color-emerald-100: light-dark(
var(--tw-emerald-600),
var(--tw-emerald-100)
);
--modus-tw-color-emerald-200: light-dark(
var(--tw-emerald-700),
var(--tw-emerald-200)
);
--modus-tw-color-emerald-300: light-dark(
var(--tw-emerald-800),
var(--tw-emerald-300)
);
--modus-tw-color-emerald-400: light-dark(
var(--tw-emerald-900),
var(--tw-emerald-400)
);
/* Teal */
--modus-tw-color-teal-100: light-dark(var(--tw-teal-600), var(--tw-teal-100));
--modus-tw-color-teal-200: light-dark(var(--tw-teal-700), var(--tw-teal-200));
--modus-tw-color-teal-300: light-dark(var(--tw-teal-800), var(--tw-teal-300));
--modus-tw-color-teal-400: light-dark(var(--tw-teal-900), var(--tw-teal-400));
/* Cyan */
--modus-tw-color-cyan-100: light-dark(var(--tw-cyan-600), var(--tw-cyan-100));
--modus-tw-color-cyan-200: light-dark(var(--tw-cyan-700), var(--tw-cyan-200));
--modus-tw-color-cyan-300: light-dark(var(--tw-cyan-800), var(--tw-cyan-300));
--modus-tw-color-cyan-400: light-dark(var(--tw-cyan-900), var(--tw-cyan-400));
/* Indigo */
--modus-tw-color-indigo-100: light-dark(
var(--tw-indigo-600),
var(--tw-indigo-100)
);
--modus-tw-color-indigo-200: light-dark(
var(--tw-indigo-700),
var(--tw-indigo-200)
);
--modus-tw-color-indigo-300: light-dark(
var(--tw-indigo-800),
var(--tw-indigo-300)
);
--modus-tw-color-indigo-400: light-dark(
var(--tw-indigo-900),
var(--tw-indigo-400)
);
/* Violet */
--modus-tw-color-violet-100: light-dark(
var(--tw-violet-600),
var(--tw-violet-100)
);
--modus-tw-color-violet-200: light-dark(
var(--tw-violet-700),
var(--tw-violet-200)
);
--modus-tw-color-violet-300: light-dark(
var(--tw-violet-800),
var(--tw-violet-300)
);
--modus-tw-color-violet-400: light-dark(
var(--tw-violet-900),
var(--tw-violet-400)
);
/* Purple */
--modus-tw-color-purple-100: light-dark(
var(--tw-purple-600),
var(--tw-purple-100)
);
--modus-tw-color-purple-200: light-dark(
var(--tw-purple-700),
var(--tw-purple-200)
);
--modus-tw-color-purple-300: light-dark(
var(--tw-purple-800),
var(--tw-purple-300)
);
--modus-tw-color-purple-400: light-dark(
var(--tw-purple-900),
var(--tw-purple-400)
);
/* Fuchsia */
--modus-tw-color-fuchsia-100: light-dark(
var(--tw-fuchsia-600),
var(--tw-fuchsia-100)
);
--modus-tw-color-fuchsia-200: light-dark(
var(--tw-fuchsia-700),
var(--tw-fuchsia-200)
);
--modus-tw-color-fuchsia-300: light-dark(
var(--tw-fuchsia-800),
var(--tw-fuchsia-300)
);
--modus-tw-color-fuchsia-400: light-dark(
var(--tw-fuchsia-900),
var(--tw-fuchsia-400)
);
/* Pink */
--modus-tw-color-pink-100: light-dark(var(--tw-pink-600), var(--tw-pink-100));
--modus-tw-color-pink-200: light-dark(var(--tw-pink-700), var(--tw-pink-200));
--modus-tw-color-pink-300: light-dark(var(--tw-pink-800), var(--tw-pink-300));
--modus-tw-color-pink-400: light-dark(var(--tw-pink-900), var(--tw-pink-400));
/* Rose */
--modus-tw-color-rose-100: light-dark(var(--tw-rose-600), var(--tw-rose-100));
--modus-tw-color-rose-200: light-dark(var(--tw-rose-700), var(--tw-rose-200));
--modus-tw-color-rose-300: light-dark(var(--tw-rose-800), var(--tw-rose-300));
--modus-tw-color-rose-400: light-dark(var(--tw-rose-900), var(--tw-rose-400));
}
/* ===== Theme Overrides ===== */
/* Modus Modern Themes */
[data-theme='modus-modern-light']:root {
color-scheme: light;
--modus-wc-color-base-page: var(--modus-wc-color-white);
--modus-wc-color-base-100: var(--modus-wc-color-gray-01);
--modus-wc-color-base-200: var(--modus-wc-color-gray-02);
--modus-wc-color-base-300: var(--modus-wc-color-gray-1);
--modus-wc-color-base-content: var(--modus-wc-color-gray-10);
--modus-wc-color-primary: var(--modus-wc-color-trimble-blue);
--modus-wc-color-primary-content: var(--modus-wc-color-white);
--modus-wc-color-info-blue-on-dark: var(--modus-wc-color-info-blue);
--animation-btn: 0.3s;
--animation-input: 0.2s;
--tab-border: 1px;
--rounded-badge: 0.25rem;
--border-btn: 1px;
--btn-focus-scale: 0.98;
--rounded-btn: 0.5rem;
--rounded-box: 1rem;
--tab-radius: 0.25rem;
--alert-border-left-width: 0.5rem;
--alert-border-width: 1px;
--alert-border-radius: 0.5rem;
--input-bottom-border-width: 1px;
--p: 48.6221% 0.128075 247.073947;
--pc: 100% 0 0;
--s: 80.3357% 0.161017 74.410202;
--sc: 0% 0 0;
--a: 53.8572% 0.017812 269.820069;
--ac: 100% 0 0;
--n: 84.9436% 0.012605 276.068713;
--nc: 28.1705% 0.01025 242.054501;
--b1: 100% 0 0;
--b2: 84.9436% 0.012605 276.068713;
--b3: 78.7221% 0.014241 277.004909;
--bc: 28.1705% 0.01025 242.054501;
--in: 48.6221% 0.128075 247.073947;
--inc: 100% 0 0;
--su: 55.824% 0.14148 150.027193;
--suc: 100% 0 0;
--wa: 72.9405% 0.149372 67.994075;
--wac: 28.1705% 0.01025 242.054501;
--er: 57.1169% 0.215546 25.349404;
--erc: 100% 0 0;
}
[data-theme='modus-modern-dark']:root {
color-scheme: dark;
--modus-wc-color-base-page: var(--modus-wc-color-gray-10);
--modus-wc-color-base-100: var(--modus-wc-color-gray-9);
--modus-wc-color-base-200: var(--modus-wc-color-gray-8);
--modus-wc-color-base-300: var(--modus-wc-color-trimble-gray);
--modus-wc-color-base-content: var(--modus-wc-color-gray-1);
--modus-wc-color-primary: var(--modus-wc-color-highlight-blue);
--modus-wc-color-primary-content: var(--modus-wc-color-black);
--modus-wc-color-info-blue-on-dark: var(--modus-wc-color-white);
--animation-btn: 0.3s;
--animation-input: 0.2s;
--tab-border: 1px;
--rounded-badge: 0.25rem;
--border-btn: 1px;
--btn-focus-scale: 0.98;
--rounded-btn: 0.5rem;
--rounded-box: 1rem;
--tab-radius: 0.25rem;
--alert-border-left-width: 0.5rem;
--alert-border-width: 1px;
--alert-border-radius: 0.5rem;
--input-bottom-border-width: 1px;
--p: 65.9524% 0.159801 243.168715;
--pc: 0% 0 0;
--s: 84.7174% 0.139742 78.603787;
--sc: 0% 0 0;
--a: 53.8572% 0.017812 269.820069;
--ac: 100% 0 0;
--n: 34.6043% 0.012501 252.973394;
--nc: 100% 0 0;
--b1: 22.215% 0.008445 223.858126;
--b2: 34.6043% 0.012501 252.973394;
--b3: 41.0842% 0.013405 256.755726;
--bc: 100% 0 0;
--in: 56.5592% 0.127092 244.53102;
--inc: 100% 0 0;
--su: 64.9048% 0.158119 142.023063;
--suc: 0% 0 0;
--wa: 84.7174% 0.139742 78.603787;
--wac: 28.1705% 0.01025 242.054501;
--er: 66.6026% 0.165819 22.664876;
--erc: 0% 0 0;
}
/* Modus Classic Themes */
[data-theme='modus-classic-light']:root {
color-scheme: light;
--modus-wc-color-base-page: var(--modus-wc-color-white);
--modus-wc-color-base-100: var(--modus-wc-color-gray-light);
--modus-wc-color-base-200: var(--modus-wc-color-gray-1);
--modus-wc-color-base-300: var(--modus-wc-color-gray-2);
--modus-wc-color-base-content: var(--modus-wc-color-gray-10);
--modus-wc-color-info: var(--modus-wc-color-trimble-blue);
--modus-wc-color-success: var(--modus-wc-color-green);
--modus-wc-color-error: var(--modus-wc-color-red);
--modus-wc-color-warning: var(--modus-wc-color-yellow);
--modus-wc-color-info-blue-on-dark: var(--modus-wc-color-info-blue);
--animation-btn: 0.3s;
--animation-input: 0.2s;
--tab-border: 1px;
--rounded-badge: 0.25rem;
--border-btn: 1px;
--btn-focus-scale: 0.98;
--rounded-btn: 0.25rem;
--rounded-box: 0.5rem;
--tab-radius: 0.25rem;
--alert-border-left-width: 0.5rem;
--alert-border-width: 1px;
--alert-border-radius: 0.5rem;
--input-bottom-border-width: 1px;
--p: 48.6221% 0.128075 247.073947;
--pc: 100% 0 0;
--s: 53.8572% 0.017812 269.820069;
--sc: 100% 0 0;
--a: 53.8572% 0.017812 269.820069;
--ac: 100% 0 0;
--n: 84.9436% 0.012605 276.068713;
--nc: 28.1705% 0.01025 242.054501;
--b1: 100% 0 0;
--b2: 84.9436% 0.012605 276.068713;
--b3: 78.7221% 0.014241 277.004909;
--bc: 28.1705% 0.01025 242.054501;
--in: 48.6221% 0.128075 247.073947;
--inc: 100% 0 0;
--su: 55.824% 0.14148 150.027193;
--suc: 100% 0 0;
--wa: 80.3357% 0.161017 74.410202;
--wac: 28.1705% 0.01025 242.054501;
--er: 57.1169% 0.215546 25.349404;
--erc: 100% 0 0;
}
[data-theme='modus-classic-dark']:root {
color-scheme: dark;
--modus-wc-color-base-page: var(--modus-wc-color-black);
--modus-wc-color-base-100: var(--modus-wc-color-trimble-gray);
--modus-wc-color-base-200: var(--modus-wc-color-gray-8);
--modus-wc-color-base-300: var(--modus-wc-color-gray-9);
--modus-wc-color-base-content: var(--modus-wc-color-gray-1);
--modus-wc-color-info: var(--modus-wc-color-trimble-blue);
--modus-wc-color-success: var(--modus-wc-color-green);
--modus-wc-color-error: var(--modus-wc-color-red);
--modus-wc-color-warning: var(--modus-wc-color-yellow);
--modus-wc-color-info-blue-on-dark: var(--modus-wc-color-white);
--animation-btn: 0.3s;
--animation-input: 0.2s;
--tab-border: 1px;
--rounded-badge: 0.25rem;
--border-btn: 1px;
--btn-focus-scale: 0.98;
--rounded-btn: 0.25rem;
--rounded-box: 0.5rem;
--tab-radius: 0.25rem;
--alert-border-left-width: 0.5rem;
--alert-border-width: 1px;
--alert-border-radius: 0.5rem;
--input-bottom-border-width: 1px;
--p: 48.6221% 0.128075 247.073947;
--pc: 100% 0 0;
--s: 80.3357% 0.161017 74.410202;
--sc: 28.1705% 0.01025 242.054501;
--a: 53.8572% 0.017812 269.820069;
--ac: 100% 0 0;
--n: 34.6043% 0.012501 252.973394;
--nc: 100% 0 0;
--b1: 22.215% 0.008445 223.858126;
--b2: 34.6043% 0.012501 252.973394;
--b3: 41.0842% 0.013405 256.755726;
--bc: 100% 0 0;
--in: 48.6221% 0.128075 247.073947;
--inc: 100% 0 0;
--su: 55.824% 0.14148 150.027193;
--suc: 100% 0 0;
--wa: 80.3357% 0.161017 74.410202;
--wac: 28.1705% 0.01025 242.054501;
--er: 57.1169% 0.215546 25.349404;
--erc: 100% 0 0;
}
/* Connect Themes */
[data-theme='connect-light']:root {
color-scheme: light;
--modus-wc-color-base-page: var(--modus-wc-color-white);
--modus-wc-color-base-100: var(--modus-wc-color-gray-light);
--modus-wc-color-base-200: var(--modus-wc-color-gray-1);
--modus-wc-color-base-300: var(--modus-wc-color-gray-2);
--modus-wc-color-base-content: var(--modus-wc-color-gray-10);
--modus-wc-color-info-blue-on-dark: var(--modus-wc-color-info-blue);
--animation-btn: 0.3s;
--animation-input: 0.2s;
--tab-border: 1px;
--rounded-badge: 2px;
--border-btn: 1px;
--btn-focus-scale: 1;
--rounded-btn: 2px;
--rounded-box: 0;
--tab-radius: 0;
--alert-border-left-width: 0;
--alert-border-width: 0;
--alert-border-radius: 4px;
--input-bottom-border-width: 2px;
--input-radius: 2px;
--p: 47.3235% 0.12603 247.547196;
--pc: 100% 0 0;
--s: 52.6234% 0.020228 289.216784;
--sc: 100% 0 0;
--a: 53.8572% 0.017812 269.820069;
--ac: 100% 0 0;
--n: 84.9436% 0.012605 276.068713;
--nc: 28.1705% 0.01025 242.054501;
--b1: 100% 0 0;
--b2: 84.9436% 0.012605 276.068713;
--b3: 78.7221% 0.014241 277.004909;
--bc: 28.1705% 0.01025 242.054501;
--in: 48.6221% 0.128075 247.073947;
--inc: 100% 0 0;
--su: 66.4599% 0.13954 132.331914;
--suc: 100% 0 0;
--wa: 83.8398% 0.172209 83.573967;
--wac: 28.1705% 0.01025 242.054501;
--er: 56.8372% 0.205089 24.549972;
--erc: 100% 0 0;
}
[data-theme='connect-dark']:root {
color-scheme: dark;
--modus-wc-color-base-page: var(--modus-wc-color-black);
--modus-wc-color-base-100: var(--modus-wc-color-trimble-gray);
--modus-wc-color-base-200: var(--modus-wc-color-gray-8);
--modus-wc-color-base-300: var(--modus-wc-color-gray-9);
--modus-wc-color-base-content: var(--modus-wc-color-gray-1);
--modus-wc-color-info-blue-on-dark: var(--modus-wc-color-white);
--animation-btn: 0.3s;
--animation-input: 0.2s;
--tab-border: 1px;
--rounded-badge: 2px;
--border-btn: 1px;
--btn-focus-scale: 1;
--rounded-btn: 2px;
--rounded-box: 0;
--tab-radius: 0;
--alert-border-left-width: 0;
--alert-border-width: 0;
--alert-border-radius: 4px;
--input-bottom-border-width: 2px;
--input-radius: 2px;
--p: 65.9524% 0.159801 243.168715;
--pc: 0% 0 0;
--s: 95.9569% 0.006653 286.273689;
--sc: 0% 0 0;
--a: 53.8572% 0.017812 269.820069;
--ac: 100% 0 0;
--n: 34.6043% 0.012501 252.973394;
--nc: 100% 0 0;
--b1: 22.215% 0.008445 223.858126;
--b2: 34.6043% 0.012501 252.973394;
--b3: 41.0842% 0.013405 256.755726;
--bc: 100% 0 0;
--in: 56.5592% 0.127092 244.53102;
--inc: 100% 0 0;
--su: 64.9048% 0.158119 142.023063;
--suc: 0% 0 0;
--wa: 84.7174% 0.139742 78.603787;
--wac: 28.1705% 0.01025 242.054501;
--er: 66.6026% 0.165819 22.664876;
--erc: 0% 0 0;
}