studio/calendars
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(front): replace hardcoded colors with Cunningham contextual tokens

Browse Source 
Migrate ~47 hardcoded hex colors and v3 --c--theme--colors--* tokens
across 13 SCSS/TSX files to v4 --c--contextuals--* tokens. This lets
the calendar UI adapt to any runtime theme (sunbeam dark, La Suite
default, ANCT) via the integration service's theme.css. FreeBusyTimeline
rgba overlays use color-mix() for theme-aware transparency.
This commit is contained in:
Sienna Meridian Satterwhite
2026-03-18 18:35:06 +00:00
parent cfefc9287d
commit 03126ea5bf
13 changed files with 191 additions and 299 deletions
Download Patch File Download Diff File Expand all files Collapse all files

96
src/frontend/apps/calendars/src/features/calendar/components/calendar-list/CalendarList.scss
View File

@@ -23,14 +23,14 @@
&:hover {
.calendar-list__section-title {
color: var(--c--theme--colors--greyscale-700);
color: var(--c--contextuals--content--semantic--neutral--secondary);
}
}
}
&__toggle-icon {
font-size: 1.25rem;
color: var(--c--theme--colors--greyscale-600);
color: var(--c--contextuals--content--semantic--neutral--secondary);
transition: transform 0.2s ease;
transform: rotate(-90deg);
@@ -42,7 +42,7 @@
&__section-title {
font-size: 0.875rem;
font-weight: 500;
color: var(--c--theme--colors--greyscale-800);
color: var(--c--contextuals--content--semantic--neutral--primary);
transition: color 0.15s;
}
@@ -56,14 +56,14 @@
background: transparent;
border-radius: 50%;
cursor: pointer;
color: var(--c--theme--colors--greyscale-600);
color: var(--c--contextuals--content--semantic--neutral--secondary);
transition:
background-color 0.15s,
color 0.15s;
&:hover {
background-color: var(--c--theme--colors--greyscale-100);
color: var(--c--theme--colors--primary-500);
background-color: var(--c--contextuals--background--surface--secondary);
color: var(--c--contextuals--content--semantic--brand--primary);
}
.material-icons {
@@ -85,7 +85,7 @@
transition: background-color 0.15s;
&:hover {
background-color: var(--c--theme--colors--greyscale-50);
background-color: var(--c--contextuals--background--surface--secondary);
.calendar-list__options-btn {
opacity: 1;
@@ -126,7 +126,7 @@
flex: 1;
font-size: 0.875rem;
font-weight: 500;
color: var(--c--theme--colors--greyscale-800);
color: var(--c--contextuals--content--semantic--neutral--primary);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
@@ -156,8 +156,8 @@
right: 0;
z-index: 100;
min-width: 140px;
background: white;
border: 1px solid var(--c--theme--colors--greyscale-200);
background: var(--c--contextuals--background--surface--primary);
border: 1px solid var(--c--contextuals--border--surface--primary);
border-radius: 6px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
padding: 0.25rem 0;
@@ -174,11 +174,11 @@
background: transparent;
cursor: pointer;
font-size: 0.875rem;
color: var(--c--theme--colors--greyscale-700);
color: var(--c--contextuals--content--semantic--neutral--secondary);
transition: background-color 0.15s;
&:hover {
background-color: var(--c--theme--colors--greyscale-50);
background-color: var(--c--contextuals--background--surface--secondary);
}
.material-icons {
@@ -186,10 +186,10 @@
}
&--danger {
color: var(--c--theme--colors--danger-500);
color: var(--c--contextuals--content--semantic--error--primary);
&:hover {
background-color: var(--c--theme--colors--danger-50);
background-color: var(--c--contextuals--background--semantic--error--tertiary);
}
}
}
@@ -197,8 +197,8 @@
&__badge {
font-size: 0.625rem;
padding: 0.125rem 0.375rem;
background-color: var(--c--theme--colors--greyscale-100);
color: var(--c--theme--colors--greyscale-600);
background-color: var(--c--contextuals--background--surface--secondary);
color: var(--c--contextuals--content--semantic--neutral--secondary);
border-radius: 0.75rem;
text-transform: uppercase;
font-weight: 500;
@@ -219,21 +219,21 @@
&__error {
margin-bottom: 8px;
padding: 12px 16px;
background-color: #fef2f2;
color: #dc2626;
background-color: var(--c--contextuals--background--semantic--error--tertiary);
color: var(--c--contextuals--content--semantic--error--primary);
border-radius: 8px;
font-size: 0.875rem;
border: 1px solid #fecaca;
border: 1px solid var(--c--contextuals--border--semantic--error--tertiary);
}
&__success {
margin-bottom: 8px;
padding: 12px 16px;
background-color: #f0fdf4;
color: #16a34a;
background-color: var(--c--contextuals--background--semantic--success--tertiary);
color: var(--c--contextuals--content--semantic--success--primary);
border-radius: 8px;
font-size: 0.875rem;
border: 1px solid #bbf7d0;
border: 1px solid var(--c--contextuals--border--semantic--success--tertiary);
}
&__field {
@@ -247,11 +247,11 @@
margin-bottom: 8px;
font-weight: 500;
font-size: 0.875rem;
color: #374151;
color: var(--c--contextuals--content--semantic--neutral--tertiary);
.material-icons {
font-size: 1.125rem;
color: var(--c--theme--colors--greyscale-500);
color: var(--c--contextuals--content--semantic--neutral--tertiary);
}
}
@@ -276,10 +276,10 @@
}
&--selected {
border-color: #1f2937;
border-color: var(--c--contextuals--content--semantic--neutral--primary);
box-shadow:
0 0 0 2px white,
0 0 0 4px #9ca3af;
0 0 0 2px var(--c--contextuals--background--surface--primary),
0 0 0 4px var(--c--contextuals--border--surface--primary);
}
}
@@ -305,7 +305,7 @@
&__description {
font-size: 0.875rem;
color: var(--c--theme--colors--greyscale-600);
color: var(--c--contextuals--content--semantic--neutral--secondary);
margin: 0;
line-height: 1.5;
}
@@ -315,7 +315,7 @@
align-items: center;
justify-content: center;
padding: 2rem;
color: var(--c--theme--colors--greyscale-500);
color: var(--c--contextuals--content--semantic--neutral--tertiary);
font-size: 0.875rem;
}
@@ -328,18 +328,18 @@
&__url-input {
flex: 1;
padding: 0.75rem;
border: 1px solid var(--c--theme--colors--greyscale-300);
border: 1px solid var(--c--contextuals--border--surface--primary);
border-radius: 4px;
font-family: monospace;
font-size: 0.75rem;
background-color: var(--c--theme--colors--greyscale-50);
color: var(--c--theme--colors--greyscale-700);
background-color: var(--c--contextuals--background--surface--secondary);
color: var(--c--contextuals--content--semantic--neutral--secondary);
overflow: hidden;
text-overflow: ellipsis;
&:focus {
outline: none;
border-color: var(--c--theme--colors--primary-500);
border-color: var(--c--contextuals--content--semantic--brand--primary);
}
}
@@ -348,20 +348,20 @@
align-items: flex-start;
gap: 0.5rem;
padding: 0.75rem;
background-color: #fef3c7;
border: 1px solid #fcd34d;
background-color: var(--c--contextuals--background--semantic--warning--tertiary);
border: 1px solid var(--c--contextuals--border--semantic--warning--secondary);
border-radius: 4px;
p {
margin: 0;
font-size: 0.75rem;
color: #92400e;
color: var(--c--contextuals--content--semantic--warning--primary);
line-height: 1.4;
}
}
&__warning-icon {
color: #d97706;
color: var(--c--contextuals--content--semantic--warning--primary);
font-size: 1.125rem;
flex-shrink: 0;
}
@@ -384,7 +384,7 @@
&__description {
font-size: 0.875rem;
color: var(--c--theme--colors--greyscale-600);
color: var(--c--contextuals--content--semantic--neutral--secondary);
margin: 0;
line-height: 1.5;
}
@@ -397,7 +397,7 @@
&__filename {
font-size: 0.875rem;
color: var(--c--theme--colors--greyscale-700);
color: var(--c--contextuals--content--semantic--neutral--secondary);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
@@ -405,11 +405,11 @@
&__error {
padding: 12px 16px;
background-color: #fef2f2;
color: #dc2626;
background-color: var(--c--contextuals--background--semantic--error--tertiary);
color: var(--c--contextuals--content--semantic--error--primary);
border-radius: 8px;
font-size: 0.875rem;
border: 1px solid #fecaca;
border: 1px solid var(--c--contextuals--border--semantic--error--tertiary);
}
&__result {
@@ -422,7 +422,7 @@
margin: 0;
font-size: 0.875rem;
font-weight: 600;
color: var(--c--theme--colors--greyscale-800);
color: var(--c--contextuals--content--semantic--neutral--primary);
}
&__stats {
@@ -445,21 +445,21 @@
}
&--success {
color: #16a34a;
color: var(--c--contextuals--content--semantic--success--primary);
}
&--neutral {
color: var(--c--theme--colors--greyscale-500);
color: var(--c--contextuals--content--semantic--neutral--tertiary);
}
&--warning {
color: #d97706;
color: var(--c--contextuals--content--semantic--warning--primary);
}
}
&__errors {
font-size: 0.875rem;
color: var(--c--theme--colors--greyscale-600);
color: var(--c--contextuals--content--semantic--neutral--secondary);
summary {
cursor: pointer;
@@ -474,7 +474,7 @@
li {
margin-bottom: 0.25rem;
font-size: 0.8rem;
color: #d97706;
color: var(--c--contextuals--content--semantic--warning--primary);
}
}
}

3
src/frontend/apps/calendars/src/features/calendar/components/left-panel/MiniCalendar.scss
View File

@@ -41,6 +41,7 @@
justify-content: center;
height: 1.5rem;
font-size: var(--c--globals--font--sizes--s);
font-family: 'Monaspace Neon', ui-monospace, 'SF Mono', monospace;
font-weight: 700;
color: var(--c--contextuals--content--semantic--neutral--primary);
text-transform: lowercase;
@@ -69,6 +70,7 @@
align-items: center;
justify-content: center;
font-size: 0.6rem;
font-family: 'Monaspace Neon', ui-monospace, 'SF Mono', monospace;
color: var(--c--contextuals--content--semantic--neutral--tertiary);
font-weight: 400;
}
@@ -84,6 +86,7 @@
border-radius: 4px;
cursor: pointer;
font-size: 0.8rem;
font-family: 'Monaspace Neon', ui-monospace, 'SF Mono', monospace;
color: var(--c--contextuals--content--semantic--neutral--primary);
font-weight: 500;
transition: background-color 0.15s;

22
src/frontend/apps/calendars/src/features/calendar/components/scheduler/AttendeesInput.scss
View File

@@ -19,18 +19,18 @@
height: 2.5rem;
margin-top: 0.25rem;
padding: 0;
border: 1px solid var(--c--theme--colors--greyscale-200);
border: 1px solid var(--c--contextuals--border--surface--primary);
border-radius: 4px;
background: transparent;
color: var(--c--theme--colors--greyscale-600);
color: var(--c--contextuals--content--semantic--neutral--secondary);
cursor: pointer;
flex-shrink: 0;
transition: all 0.15s;
&:hover {
background-color: var(--c--theme--colors--greyscale-100);
color: var(--c--theme--colors--greyscale-900);
border-color: var(--c--theme--colors--greyscale-400);
background-color: var(--c--contextuals--background--surface--secondary);
color: var(--c--contextuals--content--semantic--neutral--primary);
border-color: var(--c--contextuals--border--surface--primary);
}
.material-icons {
@@ -47,8 +47,8 @@
margin: 0;
padding: 0.25rem 0;
list-style: none;
background: var(--c--theme--colors--greyscale-000, #fff);
border: 1px solid var(--c--theme--colors--greyscale-200);
background: var(--c--contextuals--background--surface--primary);
border: 1px solid var(--c--contextuals--border--surface--primary);
border-radius: 4px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
max-height: 200px;
@@ -65,11 +65,11 @@
&:hover,
&--highlighted {
background-color: var(--c--theme--colors--greyscale-100);
background-color: var(--c--contextuals--background--surface--secondary);
}
&--empty {
color: var(--c--theme--colors--greyscale-500);
color: var(--c--contextuals--content--semantic--neutral--tertiary);
font-style: italic;
cursor: default;
@@ -82,12 +82,12 @@
&__suggestion-name {
font-size: 0.875rem;
font-weight: 500;
color: var(--c--theme--colors--greyscale-900);
color: var(--c--contextuals--content--semantic--neutral--primary);
}
&__suggestion-email {
font-size: 0.75rem;
color: var(--c--theme--colors--greyscale-500);
color: var(--c--contextuals--content--semantic--neutral--tertiary);
}
&__pills {

30
src/frontend/apps/calendars/src/features/calendar/components/scheduler/EventModal.scss
View File

@@ -6,7 +6,7 @@
}
&__more-options {
border-top: 1px solid #f1f3f4;
border-top: 1px solid var(--c--contextuals--border--surface--primary);
padding-top: 0.5rem;
}
@@ -18,11 +18,11 @@
cursor: pointer;
border-radius: 4px;
font-size: 0.875rem;
color: #5f6368;
color: var(--c--contextuals--content--semantic--neutral--secondary);
transition: background-color 0.15s;
&:hover {
background-color: #f8f9fa;
background-color: var(--c--contextuals--background--surface--secondary);
}
.material-icons {
@@ -33,7 +33,7 @@
&__more-options-content {
display: flex;
flex-direction: column;
border: 1px solid #e8eaeb;
border: 1px solid var(--c--contextuals--border--surface--primary);
border-radius: 8px;
overflow: hidden;
margin-top: 0.5rem;
@@ -57,7 +57,7 @@
align-self: center;
margin: 0 8px;
font-size: 20px;
color: #888;
color: var(--c--contextuals--content--semantic--neutral--secondary);
}
&__allday {
@@ -65,7 +65,7 @@
align-items: center;
gap: 0.5rem;
font-size: 0.875rem;
color: #5f6368;
color: var(--c--contextuals--content--semantic--neutral--secondary);
cursor: pointer;
}
}
@@ -108,11 +108,11 @@
background: transparent;
border-radius: 50%;
cursor: pointer;
color: #5f6368;
color: var(--c--contextuals--content--semantic--neutral--secondary);
flex-shrink: 0;
&:hover {
background-color: #f1f3f4;
background-color: var(--c--contextuals--border--surface--primary);
}
.material-icons {
@@ -143,11 +143,11 @@
background: transparent;
border-radius: 50%;
cursor: pointer;
color: #5f6368;
color: var(--c--contextuals--content--semantic--neutral--secondary);
flex-shrink: 0;
&:hover {
background-color: #f1f3f4;
background-color: var(--c--contextuals--border--surface--primary);
}
.material-icons {
@@ -167,7 +167,7 @@
align-items: center;
gap: 0.5rem;
padding: 0.375rem 0.5rem;
background: #f8f9fa;
background: var(--c--contextuals--background--surface--secondary);
border-radius: 4px;
font-size: 0.8125rem;
}
@@ -183,11 +183,11 @@
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: #202124;
color: var(--c--contextuals--content--semantic--neutral--primary);
}
&__size {
color: #5f6368;
color: var(--c--contextuals--content--semantic--neutral--secondary);
font-size: 0.75rem;
}
@@ -201,11 +201,11 @@
background: transparent;
border-radius: 50%;
cursor: pointer;
color: #5f6368;
color: var(--c--contextuals--content--semantic--neutral--secondary);
flex-shrink: 0;
&:hover {
background-color: #e8eaeb;
background-color: var(--c--contextuals--border--surface--primary);
}
.material-icons {

30
src/frontend/apps/calendars/src/features/calendar/components/scheduler/FreeBusyTimeline.scss
View File

@@ -18,11 +18,11 @@
border-radius: 50%;
background: none;
cursor: pointer;
color: #5f6368;
color: var(--c--contextuals--content--semantic--neutral--secondary);
padding: 0;
&:hover {
background-color: #f1f3f4;
background-color: var(--c--contextuals--border--surface--primary);
}
.material-icons {
@@ -33,7 +33,7 @@
&__date {
font-size: 0.75rem;
font-weight: 500;
color: #202124;
color: var(--c--contextuals--content--semantic--neutral--primary);
min-width: 100px;
text-align: center;
}
@@ -46,7 +46,7 @@
&__spinner {
font-size: 14px;
color: #5f6368;
color: var(--c--contextuals--content--semantic--neutral--secondary);
animation: freebusy-spin 1.5s linear infinite;
}
@@ -57,18 +57,18 @@
border-radius: 8px;
&--ok {
color: #137333;
background-color: #e6f4ea;
color: var(--c--contextuals--content--semantic--success--primary);
background-color: var(--c--contextuals--background--semantic--success--tertiary);
}
&--conflict {
color: #c5221f;
background-color: #fce8e6;
color: var(--c--contextuals--content--semantic--error--primary);
background-color: var(--c--contextuals--background--semantic--error--tertiary);
}
}
&__calendar {
border: 1px solid #e0e0e0;
border: 1px solid var(--c--contextuals--border--surface--primary);
border-radius: 4px;
overflow: hidden;
@@ -112,12 +112,12 @@
// Single overlay for proposed meeting time across all rows
.freebusy-proposed-overlay {
border-left: 2px solid #137333;
border-right: 2px solid #137333;
border-left: 2px solid var(--c--contextuals--content--semantic--success--primary);
border-right: 2px solid var(--c--contextuals--content--semantic--success--primary);
background: repeating-linear-gradient(
-45deg,
rgba(19, 115, 51, 0.35),
rgba(19, 115, 51, 0.35) 1px,
color-mix(in srgb, var(--c--contextuals--content--semantic--success--primary) 35%, transparent),
color-mix(in srgb, var(--c--contextuals--content--semantic--success--primary) 35%, transparent) 1px,
transparent 1px,
transparent 7px
);
@@ -128,8 +128,8 @@
padding: 0.75rem;
text-align: center;
font-size: 0.75rem;
color: #5f6368;
border: 1px solid #e0e0e0;
color: var(--c--contextuals--content--semantic--neutral--secondary);
border: 1px solid var(--c--contextuals--border--surface--primary);
border-radius: 4px;
}
}

40
src/frontend/apps/calendars/src/features/calendar/components/scheduler/RecurrenceEditor.scss
View File

@@ -4,7 +4,7 @@
gap: 0.75rem;
&__card {
background: var(--c--theme--colors--greyscale-50, #f8f9fa);
background: var(--c--contextuals--background--surface--secondary);
border-radius: 8px;
padding: 1rem;
display: flex;
@@ -16,8 +16,8 @@
display: inline-block;
padding: 0.25rem 0.75rem;
border-radius: 20px;
background: var(--c--theme--colors--primary-100, #e8f0fe);
color: var(--c--theme--colors--primary-700, #1a56db);
background: var(--c--contextuals--background--semantic--brand--tertiary);
color: var(--c--contextuals--content--semantic--brand--primary);
font-size: 0.8125rem;
font-weight: 500;
line-height: 1.4;
@@ -40,22 +40,22 @@
height: 32px;
border-radius: 50%;
border: none;
background: var(--c--theme--colors--greyscale-100, #f1f3f4);
background: var(--c--contextuals--background--surface--secondary);
color: inherit;
cursor: pointer;
font-size: 0.875rem;
transition: background-color 0.15s, color 0.15s;
&:hover {
background: var(--c--theme--colors--greyscale-200, #e8eaeb);
background: var(--c--contextuals--border--surface--primary);
}
&--selected {
background: var(--c--theme--colors--primary-600, #1a73e8);
color: white;
background: var(--c--contextuals--content--semantic--brand--primary);
color: var(--c--contextuals--background--surface--primary);
&:hover {
background: var(--c--theme--colors--primary-700, #1557b0);
background: var(--c--contextuals--content--semantic--brand--primary);
}
}
}
@@ -68,7 +68,7 @@
&__label {
font-weight: 500;
color: #333;
color: var(--c--contextuals--content--semantic--neutral--secondary);
font-size: 0.9375rem;
}
@@ -76,7 +76,7 @@
text-transform: uppercase;
font-size: 0.75rem;
font-weight: 600;
color: var(--c--theme--colors--greyscale-500, #6b7280);
color: var(--c--contextuals--content--semantic--neutral--tertiary);
letter-spacing: 0.05em;
}
@@ -92,7 +92,7 @@
}
&__end-btn {
border: 1px solid var(--c--theme--colors--greyscale-300, #d1d5db);
border: 1px solid var(--c--contextuals--border--surface--primary);
border-radius: 20px;
padding: 0.375rem 0.75rem;
background: transparent;
@@ -102,17 +102,17 @@
color: inherit;
&:hover {
border-color: var(--c--theme--colors--greyscale-400, #9ca3af);
border-color: var(--c--contextuals--border--surface--primary);
}
&--active {
border-color: var(--c--theme--colors--primary-600, #1a73e8);
color: var(--c--theme--colors--primary-600, #1a73e8);
background: var(--c--theme--colors--primary-50, #eff6ff);
border-color: var(--c--contextuals--content--semantic--brand--primary);
color: var(--c--contextuals--content--semantic--brand--primary);
background: var(--c--contextuals--background--semantic--brand--tertiary);
&:hover {
border-color: var(--c--theme--colors--primary-700, #1557b0);
color: var(--c--theme--colors--primary-700, #1557b0);
border-color: var(--c--contextuals--content--semantic--brand--primary);
color: var(--c--contextuals--content--semantic--brand--primary);
}
}
}
@@ -128,10 +128,10 @@
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1rem;
background-color: #fff3cd;
border: 1px solid #ffc107;
background-color: var(--c--contextuals--background--semantic--warning--tertiary);
border: 1px solid var(--c--contextuals--border--semantic--warning--secondary);
border-radius: 4px;
color: #856404;
color: var(--c--contextuals--content--semantic--warning--primary);
font-size: 0.875rem;
line-height: 1.4;
}

157
src/frontend/apps/calendars/src/features/calendar/components/scheduler/Scheduler.scss
View File

@@ -11,157 +11,16 @@
min-height: 0;
overflow: hidden;
padding-right: 12px;
background-color: var(--c--contextuals--background--surface--primary);
}
.day-of-month {
font-size: 1rem;
font-weight: 700;
font-family: 'Monaspace Neon', ui-monospace, 'SF Mono', monospace;
}
// ============================================================================
// Event Modal Styles (for use with Cunningham Modal)
// ============================================================================
// .event-modal {
// &__content {
// display: flex;
// flex-direction: column;
// gap: 1rem;
// }
// // Date/Time row with two columns
// &__datetime-row {
// display: flex;
// gap: 1rem;
// > * {
// flex: 1;
// }
// }
// // Features section (buttons + inputs)
// &__features {
// display: flex;
// flex-wrap: wrap;
// gap: 0.5rem;
// margin-top: 0.5rem;
// }
// &__attendees-input {
// padding: 0.75rem;
// background-color: #f8f9fa;
// border-radius: 4px;
// margin-top: 0.75rem;
// }
// &__recurrence-editor {
// padding: 0.75rem;
// background-color: #f8f9fa;
// border-radius: 4px;
// margin-top: 0.75rem;
// }
// // Checkbox for all-day
// &__checkbox {
// display: flex;
// align-items: center;
// gap: 0.5rem;
// cursor: pointer;
// user-select: none;
// input[type="checkbox"] {
// cursor: pointer;
// width: 1.25rem;
// height: 1.25rem;
// margin: 0;
// }
// span {
// font-size: 0.9375rem;
// line-height: 1.5;
// color: #212529;
// }
// }
// // Feature tag button
// &__feature-tag {
// display: inline-flex;
// align-items: center;
// gap: 0.375rem;
// padding: 0.375rem 0.75rem;
// border: 1px solid #dee2e6;
// border-radius: 1rem;
// background-color: #fff;
// color: #495057;
// font-size: 0.875rem;
// cursor: pointer;
// transition: all 0.15s ease-in-out;
// &:hover {
// background-color: #f8f9fa;
// border-color: #adb5bd;
// }
// &--active {
// background-color: #e7f5ff;
// border-color: #339af0;
// color: #1971c2;
// }
// .material-icons {
// font-size: 1.125rem;
// }
// }
// // Invitation section
// &__invitation {
// padding: 1rem;
// background-color: #e7f5ff;
// border: 1px solid #339af0;
// border-radius: 0.5rem;
// display: flex;
// flex-direction: column;
// gap: 0.75rem;
// }
// &__invitation-header {
// display: flex;
// flex-direction: column;
// gap: 0.25rem;
// }
// &__invitation-label {
// font-size: 0.875rem;
// font-weight: 600;
// color: #1971c2;
// text-transform: uppercase;
// letter-spacing: 0.05em;
// }
// &__invitation-organizer {
// font-size: 0.9375rem;
// color: #495057;
// }
// &__invitation-actions {
// display: flex;
// gap: 0.5rem;
// flex-wrap: wrap;
// }
// &__invitation-status {
// padding: 0.5rem 0.75rem;
// background-color: #fff;
// border-radius: 0.375rem;
// font-size: 0.875rem;
// color: #495057;
// strong {
// color: #1971c2;
// }
// }
// }
// ============================================================================
// Delete Event Modal Styles
// ============================================================================
@@ -177,7 +36,7 @@
margin: 0;
font-size: 1rem;
line-height: 1.5;
color: #495057;
color: var(--c--contextuals--content--semantic--neutral--secondary);
}
&__options {
@@ -197,8 +56,8 @@
transition: all 0.15s ease-in-out;
&:hover {
background-color: #f8f9fa;
border-color: #adb5bd;
background-color: var(--c--contextuals--background--surface--secondary);
border-color: var(--c--contextuals--border--surface--primary);
}
input[type="radio"] {
@@ -206,14 +65,14 @@
width: 1.25rem;
height: 1.25rem;
margin: 0;
accent-color: #dc3545; // Error color for delete action
accent-color: var(--c--contextuals--content--semantic--error--primary);
}
span {
flex: 1;
font-size: 0.9375rem;
line-height: 1.5;
color: #212529;
color: var(--c--contextuals--content--semantic--neutral--primary);
}
input[type="radio"]:checked + span {

2
src/frontend/apps/calendars/src/features/calendar/components/scheduler/Scheduler.tsx
View File

@@ -261,7 +261,7 @@ export const Scheduler = ({ defaultCalendarUrl }: SchedulerProps) => {
start: new Date(e.start),
end: e.end ? new Date(e.end) : new Date(e.start),
allDay: e.allDay ?? false,
backgroundColor: e.backgroundColor || "#2563eb",
backgroundColor: e.backgroundColor || "var(--c--contextuals--content--semantic--brand--primary)",
extendedProps: e.extendedProps ?? {},
}));
setListEvents(parsed);

24
src/frontend/apps/calendars/src/features/calendar/components/scheduler/SchedulerToolbar.scss
View File

@@ -8,9 +8,9 @@
align-items: center;
justify-content: space-between;
padding: 0.75rem 1rem;
background-color: var(--c--globals--colors--gray-000);
border-bottom: 1px solid var(--c--globals--colors--gray-100);
margin-bottom: 1rem;
background-color: var(--c--contextuals--background--surface--primary);
border-bottom: none;
margin-bottom: 0;
// -------------------------------------------------------------------------
// Left section: Today button + Navigation
@@ -42,18 +42,18 @@
background: transparent;
border-radius: 50%;
cursor: pointer;
color: var(--c--globals--colors--gray-600);
color: var(--c--contextuals--content--semantic--neutral--secondary);
transition:
background-color 0.15s,
color 0.15s;
&:hover {
background-color: var(--c--globals--colors--gray-100);
color: var(--c--globals--colors--gray-800);
background-color: var(--c--contextuals--background--surface--secondary);
color: var(--c--contextuals--content--semantic--neutral--primary);
}
&:active {
background-color: var(--c--globals--colors--gray-200);
background-color: var(--c--contextuals--background--surface--tertiary);
}
.material-icons {
@@ -74,7 +74,7 @@
margin: 0;
font-size: 1.125rem;
font-weight: 500;
color: var(--c--globals--colors--gray-800);
color: var(--c--contextuals--content--semantic--neutral--primary);
}
// -------------------------------------------------------------------------
@@ -97,18 +97,18 @@
cursor: pointer;
font-size: 0.875rem;
font-weight: 500;
color: var(--c--globals--colors--gray-700);
color: var(--c--contextuals--content--semantic--neutral--secondary);
transition:
background-color 0.15s,
color 0.15s;
&:hover {
background-color: var(--c--globals--colors--gray-100);
color: var(--c--globals--colors--gray-900);
background-color: var(--c--contextuals--background--surface--secondary);
color: var(--c--contextuals--content--semantic--neutral--primary);
}
&:active {
background-color: var(--c--globals--colors--gray-200);
background-color: var(--c--contextuals--background--surface--tertiary);
}
}

8
src/frontend/apps/calendars/src/features/calendar/components/scheduler/event-modal-sections/InvitationResponseSection.scss
View File

@@ -1,6 +1,6 @@
.invitation-response {
padding: 0.75rem;
background: #f8f9fa;
background: var(--c--contextuals--background--surface--secondary);
border-radius: 8px;
display: flex;
flex-direction: column;
@@ -15,12 +15,12 @@
&__label {
font-weight: 600;
font-size: 0.875rem;
color: #202124;
color: var(--c--contextuals--content--semantic--neutral--primary);
}
&__organizer {
font-size: 0.8125rem;
color: #5f6368;
color: var(--c--contextuals--content--semantic--neutral--secondary);
}
&__actions {
@@ -31,6 +31,6 @@
&__status {
font-size: 0.8125rem;
color: #5f6368;
color: var(--c--contextuals--content--semantic--neutral--secondary);
}
}

12
src/frontend/apps/calendars/src/features/calendar/components/scheduler/event-modal-sections/SectionRow.scss
View File

@@ -1,5 +1,5 @@
.section-row {
border-bottom: 1px solid #f1f3f4;
border-bottom: 1px solid var(--c--contextuals--border--surface--primary);
&:last-child {
border-bottom: none;
@@ -43,7 +43,7 @@
cursor: pointer;
&:hover {
background-color: #f8f9fa;
background-color: var(--c--contextuals--background--surface--secondary);
}
}
}
@@ -57,14 +57,14 @@
.material-icons {
font-size: 20px;
color: #5f6368;
color: var(--c--contextuals--content--semantic--neutral--secondary);
}
}
&__label {
flex: 1;
font-size: 0.875rem;
color: #202124;
color: var(--c--contextuals--content--semantic--neutral--primary);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
@@ -72,7 +72,7 @@
}
&--empty &__label {
color: #5f6368;
color: var(--c--contextuals--content--semantic--neutral--secondary);
}
&__right-action {
@@ -87,7 +87,7 @@
.material-icons {
font-size: 20px;
color: #5f6368;
color: var(--c--contextuals--content--semantic--neutral--secondary);
}
}

2
src/frontend/apps/calendars/src/features/calendar/components/scheduler/hooks/useSchedulerInit.ts
View File

@@ -133,7 +133,7 @@ export const useSchedulerInit = ({
eventDurationEditable: true,
selectMinDistance: 5,
eventDragMinDistance: 5,
selectBackgroundColor: '#ffcdd2', // Light red color for selection
selectBackgroundColor: 'var(--c--contextuals--background--semantic--brand--tertiary)',
// Event handlers - ALL INTERACTIONS
// Use ref wrappers for stable references (prevents calendar recreation on handler changes)

64
src/frontend/apps/calendars/src/features/calendar/components/scheduler/scheduler-theme.scss
View File

@@ -10,30 +10,48 @@
// Fill parent container to enable proper scrolling and sticky header
height: 100%;
// Base colors
--ec-bg-color: var(--c--globals--colors--gray-000);
--ec-day-bg-color: var(--c--contextuals--background--surface--secondary);
--ec-text-color: var(--c--globals--colors--gray-800);
--ec-border-color: var(--c--globals--colors--gray-100);
// Base colors — use contextual tokens so they adapt to active Cunningham theme
// !important needed because the EC library re-declares --ec-bg-color internally
--ec-bg-color: var(--c--contextuals--background--surface--primary) !important;
--ec-day-bg-color: var(--c--contextuals--background--surface--secondary) !important;
--ec-text-color: var(--c--contextuals--content--semantic--neutral--primary) !important;
--ec-border-color: var(--c--contextuals--border--surface--primary) !important;
background-color: var(--c--contextuals--background--surface--primary);
// Buttons (if any native buttons remain visible)
--ec-button-bg-color: var(--c--globals--colors--gray-000);
--ec-button-border-color: var(--c--globals--colors--gray-200);
--ec-button-text-color: var(--c--globals--colors--gray-800);
--ec-button-active-bg-color: var(--c--globals--colors--gray-100);
--ec-button-active-border-color: var(--c--globals--colors--gray-300);
--ec-button-bg-color: var(--c--contextuals--background--surface--primary);
--ec-button-border-color: var(--c--contextuals--border--surface--primary);
--ec-button-text-color: var(--c--contextuals--content--semantic--neutral--primary);
--ec-button-active-bg-color: var(--c--contextuals--background--surface--secondary);
--ec-button-active-border-color: var(--c--contextuals--border--surface--primary);
// Today & highlight
--ec-today-bg-color: transparent;
--ec-highlight-color: var(--c--globals--colors--brand-050);
--ec-highlight-color: var(--c--contextuals--background--semantic--brand--tertiary);
// Events
--ec-event-text-color: #fff;
// Now indicator
--ec-now-indicator-color: var(--c--globals--colors--brand-500);
--ec-now-indicator-color: var(--c--contextuals--content--semantic--brand--primary);
border: none !important;
// Force dark background on all EC sub-elements that use --ec-bg-color,
// since the EC library re-declares the variable internally and wins cascade.
& .ec-sidebar,
& .ec-col-head,
& .ec-col-group,
& .ec-no-events,
& .ec-all-day,
& .ec-header,
& .ec-main,
& .ec-body,
& .ec-days,
& .ec-day-head,
& .ec-day-foot {
background-color: var(--c--contextuals--background--surface--primary) !important;
}
}
.ec-day {
@@ -46,6 +64,8 @@
.ec-col-group,
.ec-col-head {
background-color: var(--c--contextuals--background--surface--primary) !important;
&.ec-today {
background-color: var(
--c--contextuals--background--surface--secondary
@@ -62,6 +82,11 @@
.ec-main {
border: none !important;
background-color: var(--c--contextuals--background--surface--primary) !important;
}
.ec-body {
background-color: var(--c--contextuals--background--surface--primary) !important;
}
// -----------------------------------------------------------------------------
// 3. Column headers - Unified header zone with bottom shadow
@@ -71,6 +96,8 @@
.ec-col-head {
border: none !important;
background-color: transparent;
font-family: 'Ysabeau', Inter, sans-serif;
font-weight: 700;
time {
.day-of-month {
border: 1px solid transparent;
@@ -95,29 +122,31 @@
// Remove borders from all-day section
.ec-all-day {
border: none !important;
background-color: var(--c--contextuals--background--surface--primary) !important;
// Target cells inside all-day
> * {
border: none !important;
}
// Remove right border from all days in all-day section
.ec-day {
border-inline-end: none !important;
border-right: none !important;
background-color: var(--c--contextuals--background--surface--primary) !important;
background-image: none !important;
}
}
// Add shadow to the header section
// Header section
.ec-header {
// box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
z-index: 3;
background-color: var(--c--contextuals--background--surface--primary) !important;
// Sidebar in header: no border, no text
.ec-sidebar {
border: none !important;
font-size: 0;
color: transparent;
background-color: var(--c--contextuals--background--surface--primary) !important;
}
}
@@ -223,7 +252,8 @@
// -----------------------------------------------------------------------------
.ec-sidebar {
font-size: 0.75rem;
color: var(--c--globals--colors--gray-500);
font-family: 'Monaspace Neon', ui-monospace, 'SF Mono', monospace;
color: var(--c--contextuals--content--semantic--neutral--secondary);
}
// -----------------------------------------------------------------------------