diff --git a/src/App.module.scss b/src/App.module.scss index a1b2fd1..fb1de9e 100644 --- a/src/App.module.scss +++ b/src/App.module.scss @@ -1,3 +1,5 @@ +@use '../shared/colors' as colors; + .container { padding: 1rem; width: 100%; @@ -25,7 +27,7 @@ .sectionTitle { font-size: 2rem; margin: 0 0 1rem; - color: #2c2c2c; + color: colors.$day-color-text; } .sectionDescription { diff --git a/src/components/calendar/DayNumber/DayNumber.module.scss b/src/components/calendar/DayNumber/DayNumber.module.scss index ce3f05e..94879af 100644 --- a/src/components/calendar/DayNumber/DayNumber.module.scss +++ b/src/components/calendar/DayNumber/DayNumber.module.scss @@ -1,27 +1,64 @@ -@use '../shared/colors' as shared; - -.container { - width: 100%; - height: 100%; - display: flex; - align-items: center; - justify-content: center; - - &.greyed { - .text { - fill: shared.$day-content-defaultmode-defaultstate-color; - } +@use '../shared/colors' as colors; + +.DayNumber { + &__Container { + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; } -} -.svg { - width: 100%; - height: 100%; -} + &__Svg { + width: 100%; + height: 100%; + } + + &__Text { + fill: colors.$day-content-defaultmode-defaultstate-color; + font-weight: 700; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; + font-feature-settings: 'tnum' on, 'lnum' on; + + // Greyed state + &--greyed { + fill: colors.$day-content-greyedmode-defaultstate-color; + } + + // Selected states + &--selected { + fill: colors.$day-content-defaultmode-selectedstate-midrange-color; + + .DayNumber__Container--greyed & { + fill: colors.$day-content-greyedmode-selectedstate-midrange-color; + } + } + + // Selecting states + &--selecting { + fill: colors.$day-content-defaultmode-selectingstate-midrange-color; + + .DayNumber__Container--greyed & { + fill: colors.$day-content-greyedmode-selectingstate-midrange-color; + } + } + + // Range start + &--rangeStart:not(&--rangeEnd) { + fill: colors.$day-content-defaultmode-selectedstate-rangestart-color; -.text { - fill: shared.$day-content-defaultmode-defaultstate-color; - font-weight: 700; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; - font-feature-settings: 'tnum' on, 'lnum' on; + .DayNumber__Container--greyed & { + fill: colors.$day-content-greyedmode-selectedstate-rangestart-color; + } + } + + // Range end + &--rangeEnd:not(&--rangeStart) { + fill: colors.$day-content-defaultmode-selectedstate-rangeend-color; + + .DayNumber__Container--greyed & { + fill: colors.$day-content-greyedmode-selectedstate-rangeend-color; + } + } + } } diff --git a/src/components/calendar/DayNumber/index.tsx b/src/components/calendar/DayNumber/index.tsx index 488bd58..09b7f35 100644 --- a/src/components/calendar/DayNumber/index.tsx +++ b/src/components/calendar/DayNumber/index.tsx @@ -1,58 +1,69 @@ import React, { useRef, useEffect, useState } from 'react'; import styles from './DayNumber.module.scss'; import classNames from 'classnames'; +import { DayVariation } from '../../../types/calendar'; interface DayNumberProps { number: number; proportion: number; - isGreyed?: boolean; + variations?: DayVariation[]; } -export const DayNumber: React.FC = ({ - number, +export const DayNumber: React.FC = ({ + number, proportion, - isGreyed + variations = [] }) => { const textRef = useRef(null); const [scale, setScale] = useState({ x: 1, y: 1 }); const isSingleDigit = number < 10; - + useEffect(() => { if (textRef.current) { - // Get the natural dimensions of the text const bbox = textRef.current.getBBox(); const naturalWidth = bbox.width; - const naturalHeight = bbox.height; - - // Calculate desired width based on proportion and single/double digit - const containerWidth = 100; // viewBox width - const maxWidth = containerWidth * 0.8; // 80% of container width + + const containerWidth = 100; + const maxWidth = containerWidth * 0.8; const baseWidth = maxWidth * (isSingleDigit ? 0.5 : 1); - // Apply the proportion (0-100) to scale the base width const desiredWidth = baseWidth * (proportion / 100); - - // Calculate scale factors + const scaleX = desiredWidth / naturalWidth; - // Use the same scale for height to maintain proportion const scaleY = scaleX; - + setScale({ x: scaleX, y: scaleY }); - - // Debug log - console.log(`Number: ${number}, Proportion: ${proportion}, Scale: ${scaleX}`); } }, [number, proportion, isSingleDigit]); + const containerClasses = classNames( + styles.DayNumber__Container, + { + [styles['DayNumber__Container--greyed']]: variations.includes('greyed'), + [styles['DayNumber__Container--selected']]: variations.includes('selected'), + [styles['DayNumber__Container--selecting']]: variations.includes('selecting'), + [styles['DayNumber__Container--rangeStart']]: variations.includes('rangeStart'), + [styles['DayNumber__Container--rangeEnd']]: variations.includes('rangeEnd'), + } + ); + + const textClasses = classNames( + styles.DayNumber__Text, + { + [styles['DayNumber__Text--greyed']]: variations.includes('greyed'), + [styles['DayNumber__Text--selected']]: variations.includes('selected'), + [styles['DayNumber__Text--selecting']]: variations.includes('selecting'), + [styles['DayNumber__Text--rangeStart']]: variations.includes('rangeStart'), + [styles['DayNumber__Text--rangeEnd']]: variations.includes('rangeEnd'), + } + ); + return ( -
- + = ({ y="50" textAnchor="middle" dominantBaseline="central" - className={styles.text} + className={textClasses} transform={`matrix(${scale.x}, 0, 0, ${scale.y}, ${50 * (1 - scale.x)}, ${50 * (1 - scale.y)})`} > {number} diff --git a/src/components/calendar/Month/Month.module.scss b/src/components/calendar/Month/Month.module.scss index f4a6ce6..a51723f 100644 --- a/src/components/calendar/Month/Month.module.scss +++ b/src/components/calendar/Month/Month.module.scss @@ -3,7 +3,7 @@ .Month { width: 100%; - background: colors.$content-normal-bg; // replaced shared.$content-background-color + background: colors.$day-color-background; // replaced shared.$content-background-color border-radius: shared.$border-radius-sm; overflow: hidden; box-shadow: shared.$shadow-month; @@ -17,7 +17,7 @@ &__Container { display: flex; gap: shared.$spacing-unit; - background: colors.$content-normal-bg; // replaced shared.$content-background-color-selecting + background: colors.$day-color-background; // replaced shared.$content-background-color padding: 0.75rem; min-width: 0; height: 100%; @@ -45,7 +45,7 @@ text-transform: uppercase; letter-spacing: 0.1em; border-bottom: shared.$border-size solid colors.$border-color; // replaced shared.$border-color - background: colors.$content-normal-bg; // replaced shared.$content-background-color + background: colors.$day-color-background; // replaced shared.$content-background-color text-align: center; @media (min-width: shared.$breakpoint-tablet) { @@ -87,8 +87,8 @@ font-weight: 500; text-transform: uppercase; background: transparent; - color: colors.$content-normal-text; // replaced shared.$header-color - border-bottom: shared.$spacing-unit solid colors.$header-normal-bg; // replaced shared.$header-background-color + color: colors.$day-color-text; + border-bottom: shared.$spacing-unit solid colors.$day-color-text; &--weekend { color: colors.$day-header-greyedmode-defaultstate-color; // replaced shared.$header-color-greyed diff --git a/src/components/calendar/Week/Week.module.scss b/src/components/calendar/Week/Week.module.scss index 8c1e229..bf2138e 100644 --- a/src/components/calendar/Week/Week.module.scss +++ b/src/components/calendar/Week/Week.module.scss @@ -47,7 +47,7 @@ &__EmptyCell { padding: shared.$week-wrapper-padding; - background: colors.$content-normal-bg; // replaced shared.$content-background-color + background: colors.$day-color-background; // replaced shared.$content-background-color @media (min-width: shared.$breakpoint-tablet) { padding: shared.$week-wrapper-padding-desktop; diff --git a/src/components/calendar/Year/Year.module.scss b/src/components/calendar/Year/Year.module.scss index 8308f1c..29519de 100644 --- a/src/components/calendar/Year/Year.module.scss +++ b/src/components/calendar/Year/Year.module.scss @@ -18,7 +18,7 @@ &__Title { font-size: 2rem; - color: colors.$content-normal-text; // replaced shared.$content-color + color: colors.$day-color-text; margin: 0 0 shared.$spacing-unit-quadruple; text-align: center; font-weight: 700; diff --git a/src/components/calendar/shared/_colors.scss b/src/components/calendar/shared/_colors.scss index 27b494e..caa0ab3 100644 --- a/src/components/calendar/shared/_colors.scss +++ b/src/components/calendar/shared/_colors.scss @@ -4,55 +4,6 @@ // BORDER COLORS // ----------------------------------------------------------------------------- $border-color: #e5e5e5; -$border-color-selecting: #d1d1d1; -$border-color-in-range: $border-color; - -// ----------------------------------------------------------------------------- -// FOCUS COLOR -// ----------------------------------------------------------------------------- -$focus-blue: #2196f3; - -// ----------------------------------------------------------------------------- -// HEADER BASE COLORS -// ----------------------------------------------------------------------------- -$header-normal-bg: #2c2c2c; // Anthracite -$header-normal-text: #ffffff; - -$header-selected-bg: #f321c9; // Blue -$header-selected-text: #ffffff; - -$header-selecting-bg: #404040; // Lighter anthracite -$header-selecting-text: #ffffff; - -// Hover variants for header -$header-normal-hover-bg: #383838; -$header-selected-hover-bg: #1976d2; -$header-selecting-hover-bg: #4a4a4a; - -// ----------------------------------------------------------------------------- -// CONTENT BASE COLORS -// ----------------------------------------------------------------------------- -$content-normal-bg: #ffffff; -$content-normal-text: #333333; - -$content-selected-bg: #2196f3; -$content-selected-text: #ffffff; - -$content-selecting-bg: #f5f5f5; -$content-selecting-text: #333333; - -// Hover variants for content -$content-normal-hover-bg: #f8f8f8; -$content-selected-hover-bg: #1976d2; -$content-selecting-hover-bg: #eeeeee; - -$content-selecting-bg: color.mix($content-normal-bg, $content-selected-bg, 50%); -$content-selecting-text: color.mix($content-normal-text, $content-selected-text, 50%); - -// Hover variants for content. -$content-normal-hover-bg: color.adjust($content-normal-bg, $lightness: -5%); -$content-selected-hover-bg: color.adjust($content-selected-bg, $lightness: 5%); -$content-selecting-hover-bg: color.adjust($content-selecting-bg, $lightness: -5%); // ---------------------------------- @@ -63,8 +14,8 @@ $day-color-background: white; // day default mode default state container backgr $day-color-border: #f0f0f0; // any day container border $day-color-text: #2c2c2c; // day default mode default state container text color $day-color-text-light: #757575; // day greyed mode default state text color -$day-color-hover: #f5f5f5; // day default mode default state hover container -$day-color-greyed: #bcbcbc; // day greyed mode default state container +$day-color-hover: #f5f5f5; // day default mode default state hover container +$day-color-greyed: #bcbcbc; // day greyed mode default state container // Range colors $day-color-selected: #e3f2fd; // day default mode selected state container diff --git a/src/components/calendar/shared/_variables.scss b/src/components/calendar/shared/_variables.scss index c926564..9600f1c 100644 --- a/src/components/calendar/shared/_variables.scss +++ b/src/components/calendar/shared/_variables.scss @@ -20,7 +20,7 @@ $border-radius: 8px; @use "colors" as colors; $shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.15); $shadow-month: 0 2px 4px rgba(0, 0, 0, 0.15); -$shadow-focus: 0 0 0 2px colors.$focus-blue; +$shadow-focus: 0 0 0 2px colors.$day-color-primary; // Breakpoints $breakpoint-tablet: 768px; diff --git a/src/components/ui/Button.module.scss b/src/components/ui/Button.module.scss index ef3357f..e89cf0e 100644 --- a/src/components/ui/Button.module.scss +++ b/src/components/ui/Button.module.scss @@ -1,8 +1,10 @@ +@use "../calendar/shared/colors" as colors; + .button { padding: 0.5rem 1rem; border: none; background: transparent; - color: #2c2c2c; + color: colors.$day-color-text;; border-radius: 6px; cursor: pointer; font-family: inherit; @@ -16,11 +18,11 @@ } &.active { - background: #2c2c2c; + background: colors.$day-color-text; color: white; &:hover { - background: #2c2c2c; + background: colors.$day-color-text; } } diff --git a/src/components/ui/RangeInput.module.scss b/src/components/ui/RangeInput.module.scss index 16b2859..bed6cfa 100644 --- a/src/components/ui/RangeInput.module.scss +++ b/src/components/ui/RangeInput.module.scss @@ -1,3 +1,5 @@ +@use "../calendar/shared/colors" as colors; + .container { display: flex; flex-direction: column; @@ -22,7 +24,7 @@ .label { font-size: 0.875rem; - color: #2c2c2c; + color: colors.$day-color-text; font-weight: 500; } @@ -67,7 +69,7 @@ width: 16px; height: 16px; border-radius: 50%; - background: #2c2c2c; + background: colors.$day-color-text; cursor: pointer; margin-top: -7px; // Centers the thumb on the track: (thumb height - track height) / -2 transition: background 0.2s; @@ -82,7 +84,7 @@ height: 16px; border: none; border-radius: 50%; - background: #2c2c2c; + background: colors.$day-color-text; cursor: pointer; transition: background 0.2s; diff --git a/src/examples/Examples.module.scss b/src/examples/Examples.module.scss index 13bf4f9..3712a7c 100644 --- a/src/examples/Examples.module.scss +++ b/src/examples/Examples.module.scss @@ -1,3 +1,5 @@ +@use "../components/calendar/shared/colors" as colors; + .section { margin-bottom: 4rem; padding: 2rem; @@ -13,7 +15,7 @@ .sectionTitle { font-size: 2rem; margin: 0 0 1rem; - color: #2c2c2c; + color: colors.$day-color-text; } .sectionDescription {