vynte-infra/calendar
2
0
Fork 0
Code Issues Pull Requests Actions 1.9k Packages Projects Releases Wiki Activity
Files
6f0c09d2be5ba2cedcded486cbdb07eb7620af80
calendar/packages/coss-ui/styles.css
T
Pasquale VitielloGitHubSean BrydonHariom BalharaRyukemeistercal.comEunjae LeeAnik Dhabal Babu
 d6546c3107 feat: upgrade tailwind v4 (#24598) 
* chore: refactor config files to prevent migration tool errors

* refactor: upgrade with the tailwind migration tool

* chore: restore pre-commit command + mc

* refactor(wip): update dependencies and migrate to Tailwind CSS v4 (mainly web)

* chore: resolve Tailwind v4 migration conflicts from merging main

* chore: remove unused Tailwind packages from config and update dependencies for v4 migration

* chore: uncomment Tailwind CSS utility classes in globals.css

* fix: resolve token conflicts between calcom and coss ui

* fix: textarea scrollbar

* Fix CUI-16

* fix: added @tailwindcss/forms plugin and cleaned up CSS classes in various components to remove unnecessary dark mode styles

* fix: selects and inputs of different sizes

* fix: remove unnecessary leading-20 class from modal titles in various components

* fix: update Checkbox component styles to remove unnecessary border on checked state

* fix: clean up styles in RequiresConfirmationController, Checkbox, and Radio components to enhance consistency

* fix: update button and filter component styles to remove unnecessary rounded classes for consistency

* fix: calendar

* fix: update KBarSearch

* fix: refine styles in Empty and Checkbox components for improved consistency

* Fix focus state email input

* fix: update button hover and active states to use 'not-disabled' instead of 'enabled'

* fix: line-height issues

* fix: update class name for muted background in BookingListItem component

* fix: sidebar spacing

* chore: update class names to use new Tailwind CSS color utilities

* fix embed

* chore: upgrade Tailwind CSS to version 4.1.16 and update related dependencies

* Map css variables and add a playground test for heavy css customization

* suggestion for coss-ui

* refactor: update CSS variable usage and clean up styles

- Replace instances of `--cal-brand-color` with `--cal-brand` in embed-related HTML files.
- Remove the now-unnecessary `addAppCssVars` function from the embed core.
- Import theme tokens in the embed core styles for better consistency.
- Clean up whitespace and formatting in CSS files for improved readability.
- Add a comment in `tokens.css` regarding its usage in both embed and webapp contexts.

* Handle within tokens.css instead of fixing coss-ui

* Remove initial, not needed. Also, remove tailwind.config.js as tailwidn scans the html automaically

* fix: examples app breaking

* fix: modal not resizing correctly

* feat: upgrade atoms to tailwind v4

* fix: atoms build breaking

* fix: atoms build breaking

* chore: upgrate examples/base to tailwind 4

* chore: update globals.css

* fix: add missing scheduler css variables

* fix: PlatformAdditionalCalendarSelector

* chore: update global styles

* chore: update tailwindcss and postcss dependencies to stable versions

* chore: remove unneeded class

* fix: dialog and toast animation

* fix: replace flex-shrink-0 with shrink-0 for consistent styling in various components

* fix: dialog modal for Apple connect

* add margin in SaveFilterSegmentButton

* Fix radix button nested states

* add cursor pointer to buttons but keep dsabled state

* Fix commandK selectors and adds cursor pointer

* Fix teams filter

* fix - round checkboxes

* fix filter checkbox

* fix select indicator's margin

* command group font size

* style: fix badge and tooltip radius

* chore: remove unneeded files

* Delete PR_REVIEW_MANAGED_EVENT_REASSIGNMENT.md

* remove ui-playground leftover

* fix: add missing react phone input styles in atoms

* Delete managed-event-reassignment-flow-and-architecture.mermaid

* fix: inter font not loading

* Add theme to skeleton container so that it can support dark mode

* fix: create custom stack-y-* utilities post tw4 upgrade

* fix: typo

* fix: atoms stack class + remove unused css file

* fix default radius valiue

* fix space-y in embed

* fix skeleton background

* Hardcode radius values to match production

* fix border in embed

* add missing externalThemeClass

* feat: create a custom stack-y-* utility

* fix: add stack utility to atom global css

* fix: Skeleton loader class modalbox

* Add stack-y utility in embed

* fix: add missing stack utilities in atoms globals.css

* update yarn.lock

* add popover portla

* update

---------

Co-authored-by: Sean Brydon <sean@cal.com>
Co-authored-by: Hariom Balhara <hariombalhara@gmail.com>
Co-authored-by: Ryukemeister <sahalrajiv6900@gmail.com>
Co-authored-by: cal.com <morgan@cal.com>
Co-authored-by: Eunjae Lee <hey@eunjae.dev>
Co-authored-by: Anik Dhabal Babu <adhabal2002@gmail.com>
2025-11-25 17:32:28 -03:00

156 lines
6.0 KiB
CSS
Raw Blame History

@source "./components/**/*.tsx";
@source "./lib/**/*.ts";
@custom-variant dark (&:is(.dark *));
@custom-variant fixed (&:is(.layout-fixed *));
@theme inline {
--breakpoint-3xl: 1600px;
--breakpoint-4xl: 2000px;
--color-background: var(--background);
--color-foreground: var(--foreground);
--font-sans: var(--font-sans);
--font-heading: var(--font-heading);
--font-mono:
ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
"Courier New", monospace;
--color-sidebar-ring: var(--sidebar-ring);
--color-sidebar-border: var(--sidebar-border);
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
--color-sidebar-accent: var(--sidebar-accent);
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
--color-sidebar-primary: var(--sidebar-primary);
--color-sidebar-foreground: var(--sidebar-foreground);
--color-sidebar: var(--sidebar);
--color-chart-5: var(--chart-5);
--color-chart-4: var(--chart-4);
--color-chart-3: var(--chart-3);
--color-chart-2: var(--chart-2);
--color-chart-1: var(--chart-1);
--color-ring: var(--ring);
--color-input: var(--input);
--color-border: var(--border);
--color-destructive: var(--destructive);
--color-destructive-foreground: var(--destructive-foreground);
--color-info: var(--info);
--color-info-foreground: var(--info-foreground);
--color-success: var(--success);
--color-success-foreground: var(--success-foreground);
--color-warning: var(--warning);
--color-warning-foreground: var(--warning-foreground);
--color-accent-foreground: var(--accent-foreground);
--color-accent: var(--accent);
--color-muted-foreground: var(--muted-foreground);
--color-muted: var(--muted);
--color-secondary-foreground: var(--secondary-foreground);
--color-secondary: var(--secondary);
--color-primary-foreground: var(--primary-foreground);
--color-primary: var(--primary);
--color-popover-foreground: var(--popover-foreground);
--color-popover: var(--popover);
--color-card-foreground: var(--card-foreground);
--color-card: var(--card);
--color-code: var(--code);
--color-code-foreground: var(--code-foreground);
--color-code-highlight: var(--code-highlight);
--radius-sm: calc(var(--radius) - 4px);
--radius-md: calc(var(--radius) - 2px);
--radius-lg: var(--radius);
--radius-xl: calc(var(--radius) + 4px);
}
:root {
--radius: 0.625rem;
--background: oklch(1 0 0);
--foreground: oklch(0.21 0.006 285.885);
--card: oklch(1 0 0);
--card-foreground: oklch(0.21 0.006 285.885);
--popover: oklch(1 0 0);
--popover-foreground: oklch(0.21 0.006 285.885);
--primary: oklch(0.274 0.006 286.033);
--primary-foreground: oklch(0.985 0 0);
--secondary: oklch(0 0 0 / 4%);
--secondary-foreground: oklch(0.21 0.006 285.885);
--muted: oklch(0 0 0 / 4%);
--muted-foreground: oklch(0.442 0.017 285.786);
--accent: oklch(0 0 0 / 4%);
--accent-foreground: oklch(0.21 0.006 285.885);
--destructive: oklch(0.637 0.237 25.331);
--destructive-foreground: oklch(0.505 0.213 27.518);
--info: oklch(0.623 0.214 259.815);
--info-foreground: oklch(0.488 0.243 264.376);
--success: oklch(0.696 0.17 162.48);
--success-foreground: oklch(0.508 0.118 165.612);
--warning: oklch(0.769 0.188 70.08);
--warning-foreground: oklch(0.555 0.163 48.998);
--border: oklch(0 0 0 / 10%);
--input: oklch(0 0 0 / 10%);
--ring: oklch(0.705 0.015 286.067);
--chart-1: oklch(0.646 0.222 41.116);
--chart-2: oklch(0.6 0.118 184.704);
--chart-3: oklch(0.398 0.07 227.392);
--chart-4: oklch(0.828 0.189 84.429);
--chart-5: oklch(0.769 0.188 70.08);
--sidebar: oklch(0.985 0 0);
--sidebar-foreground: oklch(0.21 0.006 285.885);
--sidebar-primary: oklch(0.274 0.006 286.033);
--sidebar-primary-foreground: oklch(0.985 0 0);
--sidebar-accent: oklch(0 0 0 / 4%);
--sidebar-accent-foreground: oklch(0.21 0.006 285.885);
--sidebar-border: oklch(0 0 0 / 10%);
--sidebar-ring: oklch(0.705 0.015 286.067);
--code: oklch(1 0 0);
--code-foreground: var(--foreground);
--code-highlight: oklch(0 0 0 / 4%);
}
.dark {
--background: oklch(0.141 0.005 285.823);
--foreground: oklch(0.967 0.001 286.375);
--card: color-mix(in srgb, oklch(0.21 0.006 285.885) 80%, oklch(0.141 0.005 285.823));
--card-foreground: oklch(0.967 0.001 286.375);
--popover: oklch(0.21 0.006 285.885);
--popover-foreground: oklch(0.967 0.001 286.375);
--primary: oklch(0.967 0.001 286.375);
--primary-foreground: oklch(0.21 0.006 285.885);
--secondary: oklch(1 0 0 / 8%);
--secondary-foreground: oklch(0.967 0.001 286.375);
--muted: oklch(1 0 0 / 8%);
--muted-foreground: oklch(0.705 0.015 286.067);
--accent: oklch(1 0 0 / 8%);
--accent-foreground: oklch(0.967 0.001 286.375);
--destructive: oklch(0.637 0.237 25.331);
--destructive-foreground: oklch(0.704 0.191 22.216);
--info: oklch(0.623 0.214 259.815);
--info-foreground: oklch(0.707 0.165 254.624);
--success: oklch(0.696 0.17 162.48);
--success-foreground: oklch(0.765 0.177 163.223);
--warning: oklch(0.769 0.188 70.08);
--warning-foreground: oklch(0.828 0.189 84.429);
--border: oklch(1 0 0 / 12%);
--input: oklch(1 0 0 / 12%);
--ring: oklch(0.552 0.016 285.938);
--chart-1: oklch(0.488 0.243 264.376);
--chart-2: oklch(0.696 0.17 162.48);
--chart-3: oklch(0.769 0.188 70.08);
--chart-4: oklch(0.627 0.265 303.9);
--chart-5: oklch(0.645 0.246 16.439);
--sidebar: color-mix(in srgb, oklch(0.21 0.006 285.885) 32%, oklch(0.141 0.005 285.823));
--sidebar-foreground: oklch(0.967 0.001 286.375);
--sidebar-primary: oklch(0.967 0.001 286.375);
--sidebar-primary-foreground: oklch(0.21 0.006 285.885);
--sidebar-accent: oklch(1 0 0 / 8%);
--sidebar-accent-foreground: oklch(0.967 0.001 286.375);
--sidebar-border: oklch(1 0 0 / 12%);
--sidebar-ring: oklch(0.705 0.015 286.067);
--code: color-mix(in srgb, oklch(0.21 0.006 285.885) 80%, oklch(0.141 0.005 285.823));
--code-foreground: var(--foreground);
--code-highlight: oklch(1 0 0 / 8%);
}
@layer base {
* {
@apply border-border outline-ring/50;
}
}
Reference in New Issue View Git Blame Copy Permalink