ab21c7f805
* feat: Cal.diy — community-driven MIT-licensed fork of Cal.com This squashed commit contains all Cal.diy changes applied on top of calcom/cal.com main: - Rebrand Cal.com to Cal.diy across the entire codebase - Remove Enterprise Edition (EE) features, license checks, and AGPL restrictions - Switch license from AGPL-3.0 to MIT - Remove docs/ directory (migrated to Nextra at cal.diy) - Remove dead code: org tests, EE tips, platform nav, premium username, SAML/SSO, etc. - Clean up .env.example for self-hosted Cal.diy - Update Docker image references to calcom/cal.diy - Update README, CONTRIBUTING.md, and issue templates for Cal.diy community fork - Add PR welcome bot for Cal.diy contributors - Fix API v2 breaking changes oasdiff ignore entries - Replace Blacksmith CI runners with default GitHub Actions 3893 files changed, 20789 insertions(+), 411020 deletions(-) Co-Authored-By: benny@cal.com <sldisek783@gmail.com> * refactor: remove org-specific /organizations/:orgId endpoints from API v2 atoms controllers (#1701) Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> * fix: revert Cal.diy Inc to Cal.com, Inc. in license files, copyright notices, and package metadata (#1702) Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> * rip out org related comments in api v2 --------- Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
471 lines
21 KiB
CSS
471 lines
21 KiB
CSS
/** This file is used in webapp as well as inside shadow DOM of embed elements. **/
|
|
@import "tw-animate-css";
|
|
@plugin "@tailwindcss/typography";
|
|
@plugin "tailwindcss-radix";
|
|
|
|
@plugin 'tailwind-scrollbar' {
|
|
nocompatible: true;
|
|
}
|
|
|
|
@variant pwa (@media (display-mode: standalone));
|
|
@variant todesktop (html.todesktop &);
|
|
@variant mac (html.todesktop-platform-darwin &);
|
|
@variant windows (html.todesktop-platform-win32 &);
|
|
@variant linux (html.todesktop-platform-linux &);
|
|
|
|
@theme inline {
|
|
--font-sans: var(--font-sans);
|
|
--font-cal: var(--font-cal);
|
|
|
|
/* Resets the preference from coss-ui which was to "use single --radius variable for all radius values" */
|
|
--radius: var(--radius);
|
|
--radius-sm: var(--radius-sm);
|
|
--radius-md: var(--radius-md);
|
|
--radius-lg: var(--radius-lg);
|
|
--radius-xl: var(--radius-xl);
|
|
--radius-2xl: var(--radius-2xl);
|
|
--radius-3xl: var(--radius-3xl);
|
|
|
|
/* Cal.diy Border Radius */
|
|
--radius-cal-none: 0px;
|
|
--radius-cal-sm: 0.125rem;
|
|
--radius-cal: 0.25rem;
|
|
--radius-cal-md: 0.375rem;
|
|
--radius-cal-lg: 0.5rem;
|
|
--radius-cal-xl: 0.75rem;
|
|
--radius-cal-2xl: 1rem;
|
|
--radius-cal-3xl: 1.5rem;
|
|
--radius-cal-full: 9999px;
|
|
|
|
--color-emphasis: var(--cal-bg-emphasis);
|
|
--color-default: var(--cal-bg);
|
|
--color-subtle: var(--cal-bg-subtle);
|
|
--color-cal-muted: var(--cal-bg-muted);
|
|
--color-inverted: var(--cal-bg-inverted);
|
|
--color-primary-default: var(--cal-bg-primary);
|
|
--color-primary-emphasis: var(--cal-bg-primary-emphasis);
|
|
--color-primary-muted: var(--cal-bg-primary-muted);
|
|
--color-brand: var(--cal-brand);
|
|
--color-brand-default: var(--cal-brand);
|
|
--color-brand-emphasis: var(--cal-brand-emphasis);
|
|
--color-brand-muted: var(--cal-brand-muted);
|
|
--color-brand-subtle: var(--cal-brand-subtle, #9CA3AF);
|
|
--color-brand-accent: var(--cal-brand-accent, white);
|
|
--color-semantic-info-subtle: var(--cal-bg-semantic-info-subtle);
|
|
--color-semantic-info-emphasis: var(--cal-bg-semantic-info-emphasis);
|
|
--color-semantic-success-subtle: var(--cal-bg-semantic-success-subtle);
|
|
--color-semantic-success-emphasis: var(--cal-bg-semantic-success-emphasis);
|
|
--color-semantic-attention-subtle: var(--cal-bg-semantic-attention-subtle);
|
|
--color-semantic-attention-emphasis: var(--cal-bg-semantic-attention-emphasis);
|
|
--color-semantic-error-subtle: var(--cal-bg-semantic-error-subtle);
|
|
--color-semantic-error-emphasis: var(--cal-bg-semantic-error-emphasis);
|
|
--color-visualization-1-subtle: var(--cal-bg-visualization-1-subtle);
|
|
--color-visualization-1-emphasis: var(--cal-bg-visualization-1-emphasis);
|
|
--color-visualization-2-subtle: var(--cal-bg-visualization-2-subtle);
|
|
--color-visualization-2-emphasis: var(--cal-bg-visualization-2-emphasis);
|
|
--color-visualization-3-subtle: var(--cal-bg-visualization-3-subtle);
|
|
--color-visualization-3-emphasis: var(--cal-bg-visualization-3-emphasis);
|
|
--color-visualization-4-subtle: var(--cal-bg-visualization-4-subtle);
|
|
--color-visualization-4-emphasis: var(--cal-bg-visualization-4-emphasis);
|
|
--color-visualization-5-subtle: var(--cal-bg-visualization-5-subtle);
|
|
--color-visualization-5-emphasis: var(--cal-bg-visualization-5-emphasis);
|
|
--color-visualization-6-subtle: var(--cal-bg-visualization-6-subtle);
|
|
--color-visualization-6-emphasis: var(--cal-bg-visualization-6-emphasis);
|
|
--color-visualization-7-subtle: var(--cal-bg-visualization-7-subtle);
|
|
--color-visualization-7-emphasis: var(--cal-bg-visualization-7-emphasis);
|
|
--color-cal-info: var(--cal-bg-info);
|
|
--color-cal-success: var(--cal-bg-success);
|
|
--color-attention: var(--cal-bg-attention);
|
|
--color-error: var(--cal-bg-error);
|
|
--color-dark-error: var(--cal-bg-dark-error);
|
|
--color-launch-dark: var(--cal-bg-launch-dark);
|
|
--color-black: #111111;
|
|
--color-darkgray-50: var(--color-gray-50);
|
|
--color-darkgray-100: var(--color-gray-100);
|
|
--color-darkgray-200: var(--color-gray-200);
|
|
--color-darkgray-300: var(--color-gray-300);
|
|
--color-darkgray-400: var(--color-gray-400);
|
|
--color-darkgray-500: var(--color-gray-500);
|
|
--color-darkgray-600: var(--color-gray-600);
|
|
--color-darkgray-700: var(--color-gray-700);
|
|
--color-darkgray-800: var(--color-gray-800);
|
|
--color-darkgray-900: var(--color-gray-900);
|
|
--color-darkgray-950: var(--color-gray-950);
|
|
|
|
/* Cal.diy Border Colors */
|
|
--border-color-emphasis: var(--cal-border-emphasis);
|
|
--border-color-default: var(--cal-border);
|
|
--border-color-subtle: var(--cal-border-subtle);
|
|
--border-color-muted: var(--cal-border-muted);
|
|
--border-color-error: var(--cal-border-error);
|
|
--border-color-semantic-error: var(--cal-border-semantic-error);
|
|
--border-color-semantic-attention-subtle: var(--cal-border-semantic-attention-subtle);
|
|
--border-color-semantic-error-subtle: var(--cal-border-semantic-error-subtle);
|
|
--border-color-booker: var(--cal-border-booker);
|
|
|
|
/* Cal.diy Border Widths */
|
|
--border-width-booker-width: var(--cal-border-booker-width, 1px);
|
|
|
|
/* Cal.diy Text Colors */
|
|
--text-color-emphasis: var(--cal-text-emphasis);
|
|
--text-color-default: var(--cal-text);
|
|
--text-color-subtle: var(--cal-text-subtle);
|
|
--text-color-muted: var(--cal-text-muted);
|
|
--text-color-inverted: var(--cal-text-inverted);
|
|
--text-color-semantic-info: var(--cal-text-semantic-info);
|
|
--text-color-semantic-success: var(--cal-text-semantic-success);
|
|
--text-color-semantic-attention: var(--cal-text-semantic-attention);
|
|
--text-color-semantic-error: var(--cal-text-semantic-error);
|
|
--text-color-semantic-info-emphasis: var(--cal-text-semantic-info-emphasis);
|
|
--text-color-semantic-success-emphasis: var(--cal-text-semantic-success-emphasis);
|
|
--text-color-semantic-attention-emphasis: var(--cal-text-semantic-attention-emphasis);
|
|
--text-color-semantic-error-emphasis: var(--cal-text-semantic-error-emphasis);
|
|
--text-color-visualization-1: var(--cal-text-visualization-1);
|
|
--text-color-visualization-2: var(--cal-text-visualization-2);
|
|
--text-color-visualization-3: var(--cal-text-visualization-3);
|
|
--text-color-visualization-4: var(--cal-text-visualization-4);
|
|
--text-color-visualization-5: var(--cal-text-visualization-5);
|
|
--text-color-visualization-6: var(--cal-text-visualization-6);
|
|
--text-color-visualization-7: var(--cal-text-visualization-7);
|
|
--text-color-info: var(--cal-text-info);
|
|
--text-color-success: var(--cal-text-success);
|
|
--text-color-attention: var(--cal-text-attention);
|
|
--text-color-error: var(--cal-text-error);
|
|
--text-color-brand: var(--cal-brand-text);
|
|
|
|
/* Default Ring Color */
|
|
--default-ring-color: rgb(59 130 246 / 0.5);
|
|
|
|
/* Cal.diy Box Shadows */
|
|
--shadow-dropdown: var(--shadow-dropdown);
|
|
--shadow-switch-thumb: var(--shadow-switch-thumb);
|
|
--shadow-solid-gray-rested: var(--shadow-solid-gray-rested);
|
|
--shadow-solid-gray-hover: var(--shadow-solid-gray-hover);
|
|
--shadow-solid-gray-active: var(--shadow-solid-gray-active);
|
|
--shadow-outline-gray-rested: var(--shadow-outline-gray-rested);
|
|
--shadow-outline-gray-hover: var(--shadow-outline-gray-hover);
|
|
--shadow-outline-gray-active: var(--shadow-outline-gray-active);
|
|
--shadow-outline-gray-focused: var(--shadow-outline-gray-focused);
|
|
--shadow-outline-red-rested: var(--shadow-outline-red-rested);
|
|
--shadow-outline-red-hover: var(--shadow-outline-red-hover);
|
|
--shadow-outline-red-active: var(--shadow-outline-red-active);
|
|
--shadow-elevation-low: var(--shadow-elevation-low);
|
|
--shadow-button-solid-brand-default: var(--shadow-button-solid-brand-default);
|
|
--shadow-button-solid-brand-hover: var(--shadow-button-solid-brand-hover);
|
|
--shadow-button-solid-brand-active: var(--shadow-button-solid-brand-active);
|
|
--shadow-button-solid-brand-focused: var(--shadow-button-solid-brand-focused);
|
|
--shadow-button-outline-red-focused: var(--shadow-button-outline-red-focused);
|
|
|
|
/* Cal.diy Fill Colors */
|
|
--fill-emphasis: var(--fill-emphasis);
|
|
--fill-default: var(--fill-default);
|
|
--fill-subtle: var(--fill-subtle);
|
|
--fill-muted: var(--fill-muted);
|
|
--fill-inverted: var(--fill-inverted);
|
|
--fill-info: var(--fill-info);
|
|
--fill-success: var(--fill-success);
|
|
--fill-attention: var(--fill-attention);
|
|
--fill-error: var(--fill-error);
|
|
--fill-brand: var(--fill-brand);
|
|
|
|
/* Cal.diy Animations */
|
|
--animate-fade-in-up: fade-in-up 600ms var(--animation-delay, 0ms) cubic-bezier(.21, 1.02, .73, 1) forwards;
|
|
--animate-fade-in-bottom: fade-in-bottom cubic-bezier(.21, 1.02, .73, 1) forwards;
|
|
--animate-spinning: spinning 0.75s linear infinite;
|
|
--animate-drawer-slide-left-and-fade: drawerSlideLeftAndFade 150ms cubic-bezier(0.16, 1, 0.3, 1);
|
|
--animate-drawer-slide-right-and-fade: drawerSlideRightAndFade 150ms ease-in;
|
|
|
|
@keyframes fade-in-up {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(10px);
|
|
}
|
|
|
|
to {
|
|
opacity: 1;
|
|
transform: none;
|
|
}
|
|
}
|
|
|
|
@keyframes spinning {
|
|
100% {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
@keyframes drawerSlideLeftAndFade {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateX(100%);
|
|
}
|
|
|
|
to {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
@keyframes drawerSlideRightAndFade {
|
|
from {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
|
|
to {
|
|
opacity: 0;
|
|
transform: translateX(100%);
|
|
}
|
|
}
|
|
}
|
|
|
|
:root,
|
|
:host {
|
|
/* 4px */
|
|
--radius: 0.25rem;
|
|
|
|
/* 2px */
|
|
--radius-sm: 0.125rem;
|
|
/* 6px */
|
|
--radius-md: 0.375rem;
|
|
/* 8px */
|
|
--radius-lg: 0.5rem;
|
|
/* 12px */
|
|
--radius-xl: 0.75rem;
|
|
/* 16px */
|
|
--radius-2xl: 1rem;
|
|
/* 24px */
|
|
--radius-3xl: 1.5rem;
|
|
|
|
--radius-none: 0px;
|
|
|
|
/* Background Standard */
|
|
--cal-bg-emphasis: hsla(220, 13%, 91%, 1);
|
|
--cal-bg: hsla(0, 0%, 100%, 1);
|
|
--cal-bg-subtle: hsla(220, 14%, 94%, 1);
|
|
--cal-bg-muted: hsla(210, 20%, 97%, 1);
|
|
--cal-bg-inverted: hsla(210, 30%, 4%, 1);
|
|
|
|
/* Background Primary */
|
|
--cal-bg-primary: hsla(214, 30%, 16%, 1);
|
|
--cal-bg-primary-emphasis: hsla(220, 6%, 25%, 1);
|
|
--cal-bg-primary-muted: hsla(220, 14%, 94%, 1);
|
|
|
|
/* Background Brand */
|
|
--cal-bg-brand: hsla(214, 30%, 16%, 1);
|
|
--cal-bg-brand-emphasis: hsla(220, 6%, 25%, 1);
|
|
--cal-bg-brand-muted: hsla(220, 14%, 94%, 1);
|
|
|
|
/* Background Semantic */
|
|
--cal-bg-semantic-info-subtle: hsla(212, 88%, 97%, 1);
|
|
--cal-bg-semantic-info-emphasis: hsla(236, 80%, 25%, 1);
|
|
--cal-bg-semantic-success-subtle: hsla(167, 54%, 93%, 1);
|
|
--cal-bg-semantic-success-emphasis: hsla(158, 74%, 38%, 1);
|
|
--cal-bg-semantic-attention-subtle: hsla(34, 100%, 92%, 1);
|
|
--cal-bg-semantic-attention-emphasis: hsla(15, 79%, 34%, 1);
|
|
--cal-bg-semantic-error-subtle: hsla(0, 93%, 94%, 1);
|
|
--cal-bg-semantic-error-emphasis: hsla(0, 63%, 24%, 1);
|
|
|
|
/* Background Visualization */
|
|
--cal-bg-visualization-1-subtle: hsla(326, 78%, 95%, 1);
|
|
--cal-bg-visualization-1-emphasis: hsla(330, 81%, 60%, 1);
|
|
--cal-bg-visualization-2-subtle: hsla(256, 86%, 91%, 1);
|
|
--cal-bg-visualization-2-emphasis: hsla(256, 85%, 57%, 1);
|
|
--cal-bg-visualization-3-subtle: hsla(217, 87%, 91%, 1);
|
|
--cal-bg-visualization-3-emphasis: hsla(235, 100%, 63%, 1);
|
|
--cal-bg-visualization-4-subtle: hsla(167, 54%, 93%, 1);
|
|
--cal-bg-visualization-4-emphasis: hsla(158, 74%, 38%, 1);
|
|
--cal-bg-visualization-5-subtle: hsla(55, 97%, 88%, 1);
|
|
--cal-bg-visualization-5-emphasis: hsla(45, 93%, 47%, 1);
|
|
--cal-bg-visualization-6-subtle: hsla(34, 100%, 92%, 1);
|
|
--cal-bg-visualization-6-emphasis: hsla(25, 95%, 53%, 1);
|
|
--cal-bg-visualization-7-subtle: hsla(0, 96%, 89%, 1);
|
|
--cal-bg-visualization-7-emphasis: hsla(0, 84%, 60%, 1);
|
|
|
|
/* Legacy Background Components */
|
|
--cal-bg-info: hsla(221, 91%, 93%, 1);
|
|
--cal-bg-success: hsla(142, 76%, 94%, 1);
|
|
--cal-bg-attention: hsla(33, 100%, 92%, 1);
|
|
--cal-bg-error: hsla(3, 66%, 93%, 1);
|
|
--cal-bg-dark-error: hsla(2, 55%, 30%, 1);
|
|
--cal-bg-launch-dark: hsla(242, 53%, 10%, 1);
|
|
|
|
/* Borders */
|
|
--cal-border-emphasis: hsla(218, 11%, 65%, 1);
|
|
--cal-border: hsla(216, 12%, 84%, 1);
|
|
--cal-border-subtle: hsla(220, 13%, 91%, 1);
|
|
--cal-border-muted: hsla(220, 14%, 94%, 1);
|
|
--cal-border-error: hsla(0, 96%, 89%, 1);
|
|
--cal-border-semantic-error: hsla(0, 96%, 89%, 1);
|
|
--cal-border-semantic-attention-subtle: hsla(32, 98%, 83%, 1);
|
|
--cal-border-semantic-error-subtle: hsla(0, 96%, 89%, 1);
|
|
--cal-border-booker: var(--cal-border-subtle);
|
|
|
|
/* Content/Text Standard */
|
|
--cal-text-emphasis: hsla(210, 30%, 4%, 1);
|
|
--cal-text: hsla(220, 6%, 25%, 1);
|
|
--cal-text-subtle: hsla(220, 9%, 46%, 1);
|
|
--cal-text-muted: hsla(218, 11%, 65%, 1);
|
|
--cal-text-inverted: hsla(0, 0%, 100%, 1);
|
|
|
|
/* Content/Text Semantic */
|
|
--cal-text-semantic-info: hsla(236, 80%, 25%, 1);
|
|
--cal-text-semantic-success: hsla(150, 84%, 22%, 1);
|
|
--cal-text-semantic-attention: hsla(15, 79%, 34%, 1);
|
|
--cal-text-semantic-error: hsla(0, 63%, 24%, 1);
|
|
|
|
/* Content/Text Visualization */
|
|
--cal-text-visualization-1: hsla(332, 79%, 25%, 1);
|
|
--cal-text-visualization-2: hsla(270, 91%, 25%, 1);
|
|
--cal-text-visualization-3: hsla(217, 91%, 25%, 1);
|
|
--cal-text-visualization-4: hsla(142, 71%, 25%, 1);
|
|
--cal-text-visualization-5: hsla(45, 93%, 25%, 1);
|
|
--cal-text-visualization-6: hsla(24, 95%, 25%, 1);
|
|
--cal-text-visualization-7: hsla(0, 84%, 25%, 1);
|
|
|
|
/* Legacy Content/Text Components */
|
|
--cal-text-info: hsla(225, 57%, 33%, 1);
|
|
--cal-text-success: hsla(144, 34%, 24%, 1);
|
|
--cal-text-attention: hsla(16, 62%, 28%, 1);
|
|
--cal-text-error: hsla(0, 63%, 31%, 1);
|
|
|
|
/* Brand */
|
|
--cal-brand: hsla(221, 39%, 11%, 1);
|
|
--cal-brand-emphasis: hsla(0, 0%, 6%, 1);
|
|
--cal-brand-text: hsla(0, 0%, 100%, 1);
|
|
|
|
/* Box Shadows */
|
|
--shadow-dropdown: 0px 5px 20px 0px rgba(0, 0, 0, 0.10), 0px 10px 40px 0px rgba(0, 0, 0, 0.03);
|
|
--shadow-switch-thumb: 0px 0.8px 0.8px 0px rgba(0, 0, 0, 0.10), 0px 0.8px 3.2px 0px rgba(0, 0, 0, 0.08);
|
|
--shadow-solid-gray-rested: 0px 2px 3px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.08), 1px 4px 8px 0px rgba(0, 0, 0, 0.12), 0px 2px 0.4px 0px rgba(255, 255, 255, 0.16) inset, 0px -1.5px 2px 0px rgba(0, 0, 0, 0.40) inset;
|
|
--shadow-solid-gray-hover: 0px 2px 3px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.08), 1px 4px 8px 0px rgba(0, 0, 0, 0.12), 0px 2px 0.4px 0px rgba(255, 255, 255, 0.16) inset, 0px -2px 2px 0px rgba(0, 0, 0, 0.40) inset;
|
|
--shadow-solid-gray-active: 0px 2px 3px 0px rgba(0, 0, 0, 0.40) inset, 0px 0px 2px 1px rgba(0, 0, 0, 0.40) inset;
|
|
--shadow-outline-gray-rested: 0px 2px 3px 0px rgba(0, 0, 0, 0.03), 0px 2px 2px -1px rgba(0, 0, 0, 0.03);
|
|
--shadow-outline-gray-hover: 0px 2px 3px 0px rgba(0, 0, 0, 0.03), 0px 2px 2px -1px rgba(0, 0, 0, 0.03);
|
|
--shadow-outline-gray-active: 0px 2px 1px 0px rgba(0, 0, 0, 0.05) inset;
|
|
--shadow-outline-gray-focused: 0px 0px 0px 1px rgba(255, 255, 255, 0.20), 0px 0px 0px 2px rgba(0, 0, 0, 0.10);
|
|
--shadow-outline-red-rested: 0px 2px 3px 0px rgba(0, 0, 0, 0.03), 0px 2px 2px -1px rgba(0, 0, 0, 0.03);
|
|
--shadow-outline-red-hover: 0px 1px 1px 0px rgba(0, 0, 0, 0.06), 0px 2px 3px 0px rgba(0, 0, 0, 0.08);
|
|
--shadow-outline-red-active: 0px 1px 1px 0px rgba(127, 29, 29, 0.06), 0px 0px 3px 0px rgba(127, 29, 29, 0.08), 0px 2px 2px 1px rgba(127, 29, 29, 0.06) inset;
|
|
--shadow-elevation-low: 0px 1px 1px 0px rgba(0, 0, 0, 0.07), 0px 1px 2px 0px rgba(0, 0, 0, 0.08), 0px 2px 2px 0px rgba(0, 0, 0, 0.10), 0px 0px 8px 0px rgba(0, 0, 0, 0.05);
|
|
--shadow-button-solid-brand-default: 0px 2px 3px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.08), 1px 4px 8px 0px rgba(0, 0, 0, 0.12), 0px 2px 0.4px 0px rgba(255, 255, 255, 0.12) inset, 0px -3px 2px 0px rgba(0, 0, 0, 0.04) inset;
|
|
--shadow-button-solid-brand-hover: 0px 1px 1px 0px rgba(0, 0, 0, 0.10), 0px 2px 3px 0px rgba(0, 0, 0, 0.08), 1px 4px 8px 0px rgba(0, 0, 0, 0.12), 0px -3px 2px 0px rgba(0, 0, 0, 0.10) inset, 0px 2px 0.4px 0px rgba(255, 255, 255, 0.24) inset;
|
|
--shadow-button-solid-brand-active: 0px 3px 1px 0px rgba(0, 0, 0, 0.10) inset, 0px 0px 2px 0px rgba(0, 0, 0, 0.10) inset;
|
|
--shadow-button-solid-brand-focused: 0px 0px 0px 1px rgba(255, 255, 255, 0.40), 0px 0px 0px 2px rgba(0, 0, 0, 0.20), 0px 1px 1px 0px rgba(0, 0, 0, 0.10), 0px 2px 3px 0px rgba(0, 0, 0, 0.08), 1px 4px 8px 0px rgba(0, 0, 0, 0.12), 0px -3px 2px 0px rgba(0, 0, 0, 0.10) inset, 0px 2px 0.4px 0px rgba(255, 255, 255, 0.24) inset;
|
|
--shadow-button-outline-red-focused: 0px 0px 0px 1px rgba(255, 255, 255, 0.32), 0px 0px 0px 2px rgba(220, 38, 38, 0.15);
|
|
|
|
/* Fill Colors */
|
|
--fill-emphasis: var(--cal-text-emphasis, #111827);
|
|
--fill-default: var(--cal-text, #374151);
|
|
--fill-subtle: var(--cal-text-subtle, #6B7280);
|
|
--fill-muted: var(--cal-text-muted, #9CA3AF);
|
|
--fill-inverted: var(--cal-text-inverted, white);
|
|
--fill-info: var(--cal-text-info, #253985);
|
|
--fill-success: var(--cal-text-success, #285231);
|
|
--fill-attention: var(--cal-text-attention, #73321B);
|
|
--fill-error: var(--cal-text-error, #752522);
|
|
--fill-brand: var(--cal-brand-text);
|
|
}
|
|
|
|
.dark {
|
|
/* Background Standard */
|
|
--cal-bg-emphasis: hsla(0, 0%, 25%, 1);
|
|
--cal-bg: hsla(0, 0%, 6%, 1);
|
|
--cal-bg-subtle: hsla(0, 0%, 15%, 1);
|
|
--cal-bg-muted: hsla(0, 0%, 9%, 1);
|
|
--cal-bg-inverted: hsla(0, 0%, 98%, 1);
|
|
|
|
/* Background Primary */
|
|
--cal-bg-primary: hsla(0, 0%, 96%, 1);
|
|
--cal-bg-primary-emphasis: hsla(0, 0%, 64%, 1);
|
|
--cal-bg-primary-muted: hsla(0, 0%, 15%, 1);
|
|
|
|
/* Background Brand */
|
|
--cal-bg-brand: hsla(0, 0%, 98%, 1);
|
|
--cal-bg-brand-emphasis: hsla(0, 0%, 96%, 1);
|
|
--cal-bg-brand-muted: hsla(0, 0%, 96%, 1);
|
|
|
|
/* Background Semantic */
|
|
--cal-bg-semantic-info-subtle: hsla(236, 80%, 8%, 1);
|
|
--cal-bg-semantic-info-emphasis: hsla(229, 90%, 74%, 1);
|
|
--cal-bg-semantic-success-subtle: hsla(148, 88%, 16%, 1);
|
|
--cal-bg-semantic-success-emphasis: hsla(158, 74%, 38%, 1);
|
|
--cal-bg-semantic-attention-subtle: hsla(21, 86%, 8%, 1);
|
|
--cal-bg-semantic-attention-emphasis: hsla(27, 96%, 61%, 1);
|
|
--cal-bg-semantic-error-subtle: hsla(0, 70%, 8%, 1);
|
|
--cal-bg-semantic-error-emphasis: hsla(0, 91%, 71%, 1);
|
|
|
|
/* Background Visualization */
|
|
--cal-bg-visualization-1-subtle: hsla(336, 74%, 35%, 1);
|
|
--cal-bg-visualization-1-emphasis: hsla(330, 81%, 60%, 1);
|
|
--cal-bg-visualization-2-subtle: hsla(252, 83%, 23%, 1);
|
|
--cal-bg-visualization-2-emphasis: hsla(256, 85%, 57%, 1);
|
|
--cal-bg-visualization-3-subtle: hsla(236, 74%, 35%, 1);
|
|
--cal-bg-visualization-3-emphasis: hsla(235, 100%, 63%, 1);
|
|
--cal-bg-visualization-4-subtle: hsla(150, 84%, 22%, 1);
|
|
--cal-bg-visualization-4-emphasis: hsla(158, 74%, 38%, 1);
|
|
--cal-bg-visualization-5-subtle: hsla(28, 73%, 26%, 1);
|
|
--cal-bg-visualization-5-emphasis: hsla(45, 93%, 47%, 1);
|
|
--cal-bg-visualization-6-subtle: hsla(15, 75%, 23%, 1);
|
|
--cal-bg-visualization-6-emphasis: hsla(25, 95%, 53%, 1);
|
|
--cal-bg-visualization-7-subtle: hsla(0, 70%, 35%, 1);
|
|
--cal-bg-visualization-7-emphasis: hsla(0, 84%, 60%, 1);
|
|
|
|
/* Legacy Background Components */
|
|
--cal-bg-info: hsla(228, 56%, 33%, 1);
|
|
--cal-bg-success: hsla(133, 34%, 24%, 1);
|
|
--cal-bg-attention: hsla(16, 62%, 28%, 1);
|
|
--cal-bg-error: hsla(2, 55%, 30%, 1);
|
|
--cal-bg-dark-error: hsla(2, 55%, 30%, 1);
|
|
--cal-bg-launch-dark: hsla(242, 53%, 10%, 1);
|
|
|
|
/* Border Standard */
|
|
--cal-border: hsla(0, 0%, 30%, 1);
|
|
--cal-border-muted: hsla(0, 0%, 9%, 1);
|
|
--cal-border-subtle: hsla(0, 0%, 15%, 1);
|
|
--cal-border-emphasis: hsla(0, 0%, 45%, 1);
|
|
--cal-border-semantic-error: hsla(0, 63%, 24%, 1);
|
|
--cal-border-semantic-attention-subtle: hsla(15, 75%, 23%, 1);
|
|
--cal-border-semantic-error-subtle: hsla(0, 63%, 24%, 1);
|
|
--cal-border-error: hsla(0, 63%, 24%, 1);
|
|
--cal-border-booker: var(--cal-border-subtle);
|
|
|
|
/* Content/Text Standard */
|
|
--cal-text-emphasis: hsla(0, 0%, 98%, 1);
|
|
--cal-text: hsla(0, 0%, 83%, 1);
|
|
--cal-text-subtle: hsla(0, 0%, 64%, 1);
|
|
--cal-text-muted: hsla(0, 0%, 64%, 1);
|
|
--cal-text-inverted: hsla(0, 0%, 0%, 1);
|
|
|
|
/* Content/Text Semantic */
|
|
--cal-text-semantic-info: hsla(229, 90%, 74%, 1);
|
|
--cal-text-semantic-success: hsla(161, 49%, 54%, 1);
|
|
--cal-text-semantic-attention: hsla(27, 96%, 61%, 1);
|
|
--cal-text-semantic-error: hsla(0, 91%, 71%, 1);
|
|
--cal-text-semantic-info-emphasis: hsla(217, 91%, 25%, 1);
|
|
--cal-text-semantic-success-emphasis: hsla(142, 71%, 25%, 1);
|
|
--cal-text-semantic-attention-emphasis: hsla(24, 95%, 25%, 1);
|
|
--cal-text-semantic-error-emphasis: hsla(0, 84%, 25%, 1);
|
|
|
|
/* Legacy Content/Text Components */
|
|
--cal-text-info: hsla(218, 83%, 93%, 1);
|
|
--cal-text-success: hsla(134, 76%, 94%, 1);
|
|
--cal-text-attention: hsla(37, 86%, 92%, 1);
|
|
--cal-text-error: hsla(3, 66%, 93%, 1);
|
|
|
|
/* Brand */
|
|
--cal-brand: hsla(0, 0%, 100%, 1);
|
|
--cal-brand-emphasis: hsla(218, 11%, 65%, 1);
|
|
--cal-brand-text: hsla(0, 0%, 0%, 1);
|
|
|
|
/* Fill Colors */
|
|
--fill-emphasis: var(--cal-text-emphasis);
|
|
--fill-default: var(--cal-text);
|
|
--fill-subtle: var(--cal-text-subtle);
|
|
--fill-muted: var(--cal-text-muted);
|
|
--fill-inverted: var(--cal-text-inverted);
|
|
--fill-info: var(--cal-text-info);
|
|
--fill-success: var(--cal-text-success);
|
|
--fill-attention: var(--cal-text-attention);
|
|
--fill-error: var(--cal-text-error);
|
|
--fill-brand: var(--cal-brand-text);
|
|
} |