Skip to content

Commit

Permalink
Merge pull request mskocik#137 from Mero-Plaform/docs-theme-improvement
Browse files Browse the repository at this point in the history 
CSS vars & DOCS theme improvements
  • Loading branch information
@mskocik
mskocik authored Sep 16, 2023
2 parents 079cb67 + f9c1c0f commit 425342a
Show file tree
Hide file tree
Showing 6 changed files with 484 additions and 420 deletions.
100 changes: 58 additions & 42 deletions src/documentation/07-theme/App.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,50 +1,66 @@
<script>
import SveltyPicker from 'svelty-picker';
import SveltyPicker from "svelty-picker";
</script>

The picker's mode responds to website light/dark mode setting.
<SveltyPicker pickerOnly mode="datetime" />

<style>
:global(.dark) {
--sdt-bg-main: #585858;
--sdt-shadow-color: #777;
--sdt-color: #eee;
--sdt-header-color: #eee;
--sdt-primary: #e1ac4a;
--sdt-disabled-date: #b22222;
--sdt-disabled-date-bg: var(--sdt-bg-main);
--sdt-btn-bg-hover: #777;
--sdt-btn-header-bg-hover: #777;
--sdt-color-selected: #fff;
--sdt-today-indicator: #ccc;
--sdt-clock-bg: #999;
/* custom buttons */
--sdt-today-bg: #e4a124;
--sdt-today-color: #fff;
--sdt-clear-color: #666;
--sdt-clear-bg: #ddd;
--sdt-clear-hover-color: #fff;
--sdt-clear-hover-bg: #dc3545;
}
:global(.light) {
--sdt-bg-main: #fff;
--sdt-shadow-color: #ccc;
--sdt-color: inherit;
--sdt-primary: #286090;
--sdt-disabled-date: #b22222;
--sdt-disabled-date-bg: var(--sdt-bg-main);
--sdt-btn-bg-hover: #eee;
--sdt-btn-header-bg-hover: #dfdfdf;
--sdt-color-selected: #fff;
--sdt-today-indicator: #ccc;
--sdt-clock-bg: #eeeded;
/* custom buttons */
--sdt-today-bg: #1e486d;
--sdt-today-color: #fff;
--sdt-clear-color: #dc3545;
--sdt-clear-bg: #fff;
--sdt-clear-hover-color: #fff;
--sdt-clear-hover-bg: #dc3545;
}
:global(.dark) {
--sdt-bg-main: #585858;
--sdt-shadow-color: #777;
--sdt-color: #eee;
--sdt-clock-color: var(--sdt-color);
--sdt-clock-color-hover: var(--sdt-color);
--sdt-clock-time-bg: transparent;
--sdt-clock-time-bg-hover: transparent;
--sdt-clock-disabled: #b22222;
--sdt-clock-disabled-bg: var(--sdt-bg-main);
--sdt-clock-selected-bg: var(--sdt-bg-selected);
--sdt-header-color: #eee;
--sdt-bg-selected: #e1ac4a;
--sdt-table-disabled-date: #b22222;
--sdt-table-disabled-date-bg: var(--sdt-bg-main);
--sdt-table-data-bg-hover: #777;
--sdt-table-selected-bg: var(--sdt-bg-selected);
--sdt-header-btn-bg-hover: #777;
--sdt-color-selected: #fff;
--sdt-table-today-indicator: #ccc;
--sdt-clock-bg: #999;
/* custom buttons */
--sdt-today-bg: #e4a124;
--sdt-today-color: #fff;
--sdt-clear-color: #666;
--sdt-clear-bg: #ddd;
--sdt-clear-hover-color: #fff;
--sdt-clear-hover-bg: #dc3545;
}
:global(.light) {
--sdt-bg-main: #fff;
--sdt-shadow-color: #ccc;
--sdt-color: inherit;
--sdt-clock-color: var(--sdt-color);
--sdt-clock-color-hover: var(--sdt-color);
--sdt-clock-time-bg: transparent;
--sdt-clock-time-bg-hover: transparent;
--sdt-clock-disabled: #b22222;
--sdt-clock-disabled-bg: var(--sdt-bg-main);
--sdt-clock-selected-bg: var(--sdt-bg-selected);
--sdt-bg-selected: #286090;
--sdt-table-disabled-date: #b22222;
--sdt-table-disabled-date-bg: var(--sdt-bg-main);
--sdt-table-data-bg-hover: #eee;
--sdt-table-selected-bg: var(--sdt-bg-selected);
--sdt-header-btn-bg-hover: #dfdfdf;
--sdt-color-selected: #fff;
--sdt-table-today-indicator: #ccc;
--sdt-clock-bg: #eeeded;
/* custom buttons */
--sdt-today-bg: #1e486d;
--sdt-today-color: #fff;
--sdt-clear-color: #dc3545;
--sdt-clear-bg: #fff;
--sdt-clear-hover-color: #fff;
--sdt-clear-hover-bg: #dc3545;
}
</style>
60 changes: 37 additions & 23 deletions src/documentation/07-theme/page.svx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,29 +6,43 @@ Component exposes following CSS variables to customize it's appearance as you ca

```css
:root {
--sdt-bg-main: #fff;
--sdt-shadow-color: #ccc;
--sdt-wrap-shadow: 0 1px 6px var(--sdt-shadow-color);
--sdt-radius: 4px;
--sdt-color: #000;
--sdt-color-selected: #fff;
--sdt-color-time: inherit; /** optionaly separate color for time picker */
--sdt-header-color: #000;
--sdt-primary: #286090;
--sdt-disabled-date: #b22222;
--sdt-disabled-date-bg: var(--sdt-bg-main);
--sdt-btn-bg-hover: #eee;
--sdt-btn-header-bg-hover: #dfdfdf;
--sdt-color-selected: var(--sdt-bg-main);
--sdt-today-indicator: #ccc;
--sdt-clock-bg: #eeeded;
--sdt-table-bg: transparent;
/* action buttons */
--sdt-today-bg: #1e486d;
--sdt-today-color: var(--sdt-bg-main);
--sdt-clear-color: #dc3545;
--sdt-clear-bg: transparent;
--sdt-clear-hover-color: var(--sdt-bg-main);
/* general */
--sdt-bg-main: #fff; /** wrap background color */
--sdt-shadow-color: #ccc; /** wrap shadow color */
--sdt-wrap-shadow: 0 1px 6px var(--sdt-shadow-color); /** wrap shadow settings */
--sdt-radius: 4px; /** wrap radius */
--sdt-color: #000; /** data to select(e.g date/time) text color (except header & buttons) */
--sdt-color-selected: #fff; /** selected data(e.g date/time) text color */
--sdt-header-color: #000; /** header items color (e.g. text & buttons) */
--sdt-btn-header-bg-hover: #dfdfdf; /** header items hover background color */
--sdt-bg-selected: #286090; /** selected data(e.g date/time) background color */

/* action buttons */
--sdt-today-bg: #1e486d; /** date picker today button hover background color */
--sdt-today-color: var(--sdt-bg-main); /** date picker today button text & border color */
--sdt-clear-color: #dc3545; /** clear button text & border color */
--sdt-clear-bg: transparent; /** clear button background color */
--sdt-clear-hover-color: var(--sdt-bg-main); /** clear button hover text color */
--sdt-clear-hover-bg: #dc3545; /** clear button hover background color */

/* time picker */
--sdt-clock-selected-bg: var(--sdt-bg-selected); /** selected time background color */
--sdt-clock-bg: #eeeded; /** time picker inner circle background color */
--sdt-clock-color: var(--sdt-color); /** time picker text color (watch "--sdt-color") */
--sdt-clock-color-hover: var(--sdt-color); /** time picker hover text color (watch "--sdt-color") */
--sdt-clock-time-bg: transparent; /** time picker time background color */
--sdt-clock-time-bg-hover: transparent; /** time picker time selection hover background color */
--sdt-clock-disabled-time: #b22222; /** disabled time picker time text color */
--sdt-clock-disabled-time-bg: #eee; /** disabled time picker time background color */

/* date picker */
--sdt-table-selected-bg: var(--sdt-bg-selected); /** selected date background color */
--sdt-table-disabled-date: #b22222; /** disabled dates text color */
--sdt-table-disabled-date-bg: #eee; /** disabled dates background color */
--sdt-table-bg: transparent; /** date picker inner table background color */
--sdt-table-data-bg-hover: #eee; /** table selection data hover background color */
--sdt-table-today-indicator: #ccc; /** date picker current day marker color */

}
```

Expand Down
29 changes: 14 additions & 15 deletions src/lib/components/Calendar.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -171,7 +171,6 @@
onMonthTransitionTrigger = () => {
onChangeMonth(val)
};
if (currentView === MODE_DECADE) {
transform = transform === TRANSFORM_DECADE_UNEVEN
? (val === -1
Expand Down Expand Up @@ -395,7 +394,7 @@
on:mouseout={wrapHoverDateToggle()}
>
<button on:click={() => {onClick(currDate)}} type="button"
class="std-btn sdt-btn-day"
class="std-btn sdt-btn-day"
class:not-current={!isBetween(i*7+j) }
disabled={(computedStartDate || endDate || additionalDisableFn) && isDisabledDate(currDate)}
>{currDate.getDate()}</button>
Expand Down Expand Up @@ -472,8 +471,8 @@
.std-btn[disabled] {
cursor: not-allowed;
opacity: 0.5;
color: var(--sdt-disabled-date, #b22222);
background-color: var(--sdt-disabled-date-bg, var(--sdt-bg-main, #fff));
color: var(--sdt-table-disabled-date, #b22222);
background-color: var(--sdt-table-disabled-date-bg, var(--sdt-bg-main, #fff));
}
.std-btn-header {
width: auto;
Expand All @@ -490,14 +489,14 @@
padding-right: 0.25em;
}
.std-btn:hover {
background-color: var(--sdt-btn-bg-hover, #eee);
background-color: var(--sdt-table-data-bg-hover, #eee);
}
.is-selected.in-range .std-btn {
border-radius: 4px 0 0 4px
}
.in-range .std-btn,
.in-range-hover:not(.is-selected) .std-btn {
background-color: color-mix(in srgb, transparent 75%, var(--sdt-primary, #286090));
background-color: color-mix(in srgb, transparent 75%, var(--sdt-bg-selected, #286090));
border-radius: 0;
}
/* range selection: start */
Expand All @@ -510,7 +509,7 @@
border-bottom-left-radius: 0;
}
.in-range:not(.is-selected) .std-btn:hover {
background-color: color-mix(in srgb, var(--sdt-btn-bg-hover, #eee) 75%, var(--sdt-primary, #286090));
background-color: color-mix(in srgb, var(--sdt-table-data-bg-hover, #eee) 75%, var(--sdt-bg-selected, #286090));
}
/* range selection: end */
.in-range + .is-selected .std-btn,
Expand All @@ -519,17 +518,17 @@
border-bottom-left-radius: 0;
}
.is-selected + .is-selected .std-btn {
border-left: 1px solid color-mix(in srgb, white 75%, var(--sdt-primary, #286090));
border-left: 1px solid color-mix(in srgb, white 75%, var(--sdt-table-selected-bg, #286090));
margin-left: -1px;
}
.is-selected .std-btn,
.is-selected.in-range .std-btn {
background-color: var(--sdt-primary, #286090);
background-color: var(--sdt-table-selected-bg, #286090);
color: var(--sdt-color-selected, var(--sdt-bg-main, #fff));
opacity: 0.9;
}
.std-btn-header:hover {
background-color: var(--sdt-btn-header-bg-hover, #dfdfdf);
background-color: var(--sdt-header-btn-bg-hover, #dfdfdf);
}
.sdt-time-icon {
display: inline-flex;
Expand Down Expand Up @@ -567,21 +566,21 @@
content: '';
margin-left: 4px;
margin-top: 4px;
border-left: 4px solid var(--sdt-today-indicator, #ccc);
border-top: 4px solid var(--sdt-today-indicator, #ccc);
border-left: 4px solid var(--sdt-table-today-indicator, #ccc);
border-top: 4px solid var(--sdt-table-today-indicator, #ccc);
border-bottom: 4px solid transparent;
border-right: 4px solid transparent;
border-radius: 2px;
height: 4px;
z-index: 2;
}
.sdt-svg {
fill: var(--sdt-header-color, inital);
fill: var(--sdt-header-color, initial);
}
.sdt-today:hover:before,
.in-range.sdt-today:before {
border-left-color: var(--sdt-primary, #286090);
border-top-color: var(--sdt-primary, #286090);
border-left-color: var(--sdt-bg-selected, #286090);
border-top-color: var(--sdt-bg-selected, #286090);
}
.is-selected.sdt-today:before
{
Expand Down
6 changes: 1 addition & 5 deletions src/lib/components/SveltyPicker.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,6 @@
const dispatch = createEventDispatcher();
let { valueArray, prevValue, innerDates } = initProps(value, initialDate, format, i18n, formatType);
let currentFormat = format;
let isFocused = pickerOnly;
let undoHistory = [...valueArray];
Expand All @@ -112,7 +111,6 @@
let inputActionParams = validatorAction || [];
/** @type {Calendar} */
let ref_calendar;
$: widgetList = watchIsRange(isRange);
$: resolvedMode = computeResolvedMode(mode, format);
$: {
Expand Down Expand Up @@ -226,7 +224,6 @@
function computeDirty(values) {
return values.join(',') !== undoHistory.join(',');
}
function resetView() {
startView = MODE_MONTH;
isMinuteView = false;
Expand Down Expand Up @@ -277,7 +274,6 @@
*/
function onDate({ type, detail }) {
let { value, isKeyboard, dateIndex } = detail;
if (value && !isRange && innerDates.length) {
if (
innerDates[0].getFullYear() === value.getFullYear() &&
Expand Down Expand Up @@ -676,7 +672,7 @@
border-radius: 0.2em;
}
.sdt-today-btn {
background-color: var(--sdt-primary, #286090);
background-color: var(--sdt-bg-selected, #286090);
color: var(--sdt-today-color, var(--sdt-bg-main, #fff));
padding: 0.25em 0.5em;
font-size: 0.875em;
Expand Down
Loading

0 comments on commit 425342a

Please sign in to comment.