42f2c170aa
* Install/add components in base coss-ui package * fix components imports * add yarn script to pull * Update packagejson * remove skeleton duplicates * feat: allow importing components with the cli * fix: update exports in package.json to reference styles.css instead of globals.css * add lucide dep * refactor: re-pull components * refactor: remove unused registries section from components.json * refactor: implement changes suggested by Volnei * refactor(wip): implemet coss ui components on the profile page * fix src/src problem * update command to overwrite existing components * pulled from registry * restore globals.css * feat: add pull script * feat: enhance pull script with validation and error handling * remove duplicate components * refactor: reimport coss component and fix ts errors * fix: components pulling * chore: regenerate yarn.lock * chore: remove tailwindcss/forms * trying different moduleResolution * TypeScript requires module to also be "NodeNext". * remove unnecessary changes * type fixes plus resolve @coss/ui * use bundler tsconfig * add missing deps to features and ui * Add bundler to other packages * fix module enext resolution with bundler * remove reduant files * remove package json from features * revert unrelated change to the PR --------- Co-authored-by: pasqualevitiello <pasqualevitiello@gmail.com> Co-authored-by: Eunjae Lee <hey@eunjae.dev>
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.com 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.com 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.com Border Widths */
|
|
--border-width-booker-width: var(--cal-border-booker-width, 1px);
|
|
|
|
/* Cal.com 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.com 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.com 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.com 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);
|
|
} |