Skip to content

Commit

Permalink
feat(components/datetime): tokenize timepicker styles (#2911)
Browse files Browse the repository at this point in the history
  • Loading branch information
@Blackbaud-ErikaMcVey
Blackbaud-ErikaMcVey authored Nov 19, 2024
1 parent a9bacda commit 957b7d6
Show file tree
Hide file tree
Showing 2 changed files with 196 additions and 130 deletions.
2 changes: 1 addition & 1 deletion apps/e2e/datetime-storybook-e2e/src/e2e/timepicker.component.cy.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,5 +54,5 @@ describe('datetime-storybook', () => {
});
});
});
});
}, true);
});
324 changes: 195 additions & 129 deletions libs/components/datetime/src/lib/modules/timepicker/timepicker.component.scss
View file
Original file line number Diff line number Diff line change
@@ -1,68 +1,198 @@
@use 'libs/components/theme/src/lib/styles/mixins' as mixins;
@use 'libs/components/theme/src/lib/styles/variables' as *;
@use 'libs/components/theme/src/lib/styles/compat-tokens-mixins' as compatMixins;

@include compatMixins.sky-default-overrides('.sky-timepicker-container') {
--sky-override-timepicker-background-color: #{$sky-color-gray-05};
--sky-override-timepicker-border-radius: 5px;
--sky-override-timepicker-button-active-background-color: #{$sky-color-gray-10};
--sky-override-timepicker-button-background-color: #{$sky-color-white};
--sky-override-timepicker-button-border-radius: 3px;
--sky-override-timepicker-button-focus-outline-offset: -2px;
--sky-override-timepicker-button-focus-outline: -webkit-focus-ring-color auto
5px;
--sky-override-timepicker-button-hover-active-focus-border-radius: 0;
--sky-override-timepicker-button-hover-active-focus-box-shadow: none;
--sky-override-timepicker-button-hover-background-color: #{$sky-color-gray-05};
--sky-override-timepicker-button-padding-horizontal: #{$sky-padding-plus-half};
--sky-override-timepicker-button-padding-vertical: #{$sky-padding-half};
--sky-override-timepicker-button-selected-background-color: #{$sky-background-color-info-light};
--sky-override-timepicker-button-selected-box-shadow: #{inset 0 0 0 2px
$sky-highlight-color-info};
--sky-override-timepicker-column-border: #{1px solid
$sky-border-color-neutral-light};
--sky-override-timepicker-column-gap: 10px;
--sky-override-timepicker-column-meride-divider: #{1px solid
$sky-border-color-neutral-light};
--sky-override-timepicker-content-space: #{$sky-padding $sky-padding 0
$sky-padding};
--sky-override-timepicker-font-size: #{$sky-font-size-base};
--sky-override-timepicker-footer-padding-horizontal: #{$sky-padding};
--sky-override-timepicker-footer-padding-vertical: #{$sky-padding};
--sky-override-timepicker-text-color: #000;
}

@include compatMixins.sky-modern-overrides('.sky-timepicker-container', false) {
--sky-override-timepicker-border: #{solid 1px $sky-border-color-neutral-medium};
--sky-override-timepicker-button-background-color: var(--modern-color-white);
--sky-override-timepicker-button-padding-vertical: var(--modern-size-5);
--sky-override-timepicker-button-selected-hover-border-color: var(
--modern-color-blue-50
);
--sky-override-timepicker-column-border: #{1px solid
$sky-border-color-neutral-light};
--sky-override-timepicker-content-space: var(--modern-space-s)
var(--modern-space-s) 0 var(--modern-space-s);
--sky-override-timepicker-font-size: #{$sky-theme-modern-font-body-default-size};
--sky-override-timepicker-footer-padding-horizontal: var(--modern-size-10);
--sky-override-timepicker-text-color: var(--modern-color-black);
}

.sky-timepicker-container {
position: fixed;
font-size: $sky-font-size-base;
padding: $sky-padding-half;
background-color: $sky-color-gray-05;
border-radius: 5px;
font-size: var(--sky-override-timepicker-font-size);
background-color: var(
--sky-override-timepicker-background-color,
var(--sky-color-background-container-menu)
);
border-radius: var(
--sky-override-timepicker-border-radius,
var(--sky-border-radius-s)
);
border: var(--sky-override-timepicker-border, none);
}

.sky-timepicker-container :last-child ol {
display: flex;
flex-direction: column;
height: 100%;
}

.sky-timepicker-container :last-child ol li {
@include mixins.sky-border(light, bottom);
flex: 1;
}

.sky-timepicker-column {
margin: $sky-margin-half;
li {
border-bottom: var(--sky-override-timepicker-column-meride-divider);
flex: 1;
}
}

.sky-timepicker-column ol {
@include mixins.sky-border(light, top, right, bottom, left);
border: var(
--sky-override-timepicker-column-border,
var(--sky-border-width-separator-light) solid
var(--sky-color-border-separator-light)
);
column-gap: 1px;
columns: 2;
list-style-type: none;
margin: 0;
padding: 0;
}

.sky-timepicker-column ol li {
text-align: center;
cursor: pointer;
margin: 0;
}
li {
text-align: center;
cursor: pointer;
margin: 0;

button {
background-color: var(
--sky-override-timepicker-button-background-color,
var(--sky-color-background-action-tertiary-base)
);
border-width: 0;
border-color: var(--sky-color-border-action-tertiary-base);
color: var(
--sky-override-timepicker-text-color,
var(--sky-color-text-default)
);
cursor: pointer;
padding: var(
--sky-override-timepicker-button-padding-vertical,
var(--sky-space-inset-pillarbox-2_3-top-m)
)
var(
--sky-override-timepicker-button-padding-horizontal,
var(--sky-space-inset-pillarbox-2_3-right-m)
)
var(
--sky-override-timepicker-button-padding-vertical,
var(--sky-space-inset-pillarbox-2_3-bottom-m)
)
var(
--sky-override-timepicker-button-padding-horizontal,
var(--sky-space-inset-pillarbox-2_3-left-m)
);
width: 100%;
height: 100%;

&:focus-visible:not(:active) {
outline: var(--sky-override-timepicker-button-focus-outline);
outline-offset: var(
--sky-override-timepicker-button-focus-outline-offset
);
border-radius: var(
--sky-override-timepicker-button-hover-active-focus-border-radius,
var(--sky-border-radius-s)
);
box-shadow: var(
--sky-override-timepicker-button-hover-active-focus-box-shadow,
inset 0 0 0 var(--sky-border-width-action-focus)
var(--sky-color-border-action-tertiary-focus),
var(--sky-elevation-focus)
);
}

.sky-timepicker-column ol li button {
cursor: pointer;
&:hover:not(.sky-btn-active) {
border-radius: var(
--sky-override-timepicker-button-hover-active-focus-border-radius,
var(--sky-border-radius-s)
);
background-color: var(
--sky-override-timepicker-button-hover-background-color,
var(--sky-color-background-action-tertiary-hover)
);
box-shadow: var(
--sky-override-timepicker-button-hover-active-focus-box-shadow,
inset 0 0 0 var(--sky-border-width-action-hover)
var(
--sky-override-timepicker-button-selected-hover-border-color,
var(--sky-color-border-action-tertiary-hover)
)
);
}

&:focus {
outline: thin dotted;
//webkit
outline: -webkit-focus-ring-color auto 5px;
outline-offset: -2px;
}
}
&:active {
background-color: var(
--sky-override-timepicker-button-active-background-color,
var(--sky-color-background-action-tertiary-active)
);
border-radius: var(
--sky-override-timepicker-button-hover-active-focus-border-radius,
var(--sky-border-radius-s)
);
box-shadow: var(
--sky-override-timepicker-button-hover-active-focus-box-shadow,
inset 0 0 0 var(--sky-border-width-action-active)
var(--sky-color-border-action-tertiary-active)
);
}

.sky-timepicker-column ol li button:hover {
background-color: $sky-color-gray-05;
}
.sky-timepicker-column ol li button:active {
background-color: $sky-color-gray-10;
}
.sky-timepicker-column ol li button.sky-btn-active:hover {
background-color: $sky-background-color-info-light;
}
.sky-timepicker-column ol .sky-btn-active {
background-color: $sky-background-color-info-light;
box-shadow: inset 0 0 0 2px $sky-highlight-color-info;
border-radius: 3px;
&.sky-btn-active {
background-color: var(
--sky-override-timepicker-button-selected-background-color,
var(--sky-color-background-selected-soft)
);
box-shadow: var(
--sky-override-timepicker-button-selected-box-shadow,
inset 0 0 0 var(--sky-border-width-action-selected-s)
var(
--sky-override-timepicker-button-selected-hover-border-color,
var(--sky-color-border-selected)
)
);
border-radius: var(
--sky-override-timepicker-button-border-radius,
var(--sky-border-radius-s)
);
}
}
}
}

.sky-timepicker-column.sky-timepicker-24hour ol {
Expand All @@ -75,26 +205,37 @@

.sky-timepicker-content {
display: flex;

button {
background-color: $sky-color-white;
border-width: 0;
padding: $sky-padding-plus-half;
padding-top: $sky-padding-half;
padding-bottom: $sky-padding-half;
width: 100%;
height: 100%;
}
padding: var(
--sky-override-timepicker-content-space,
var(--sky-space-inset-balanced-m)
);
gap: var(
--sky-override-timepicker-column-gap,
var(--sky-space-gap-action_group-m)
);
}

.sky-timepicker-footer {
margin: 0;
padding: 0 $sky-padding-half;
padding: var(
--sky-override-timepicker-footer-padding-vertical,
var(--sky-space-inset-pillarbox-2_3-top-m)
)
var(
--sky-override-timepicker-footer-padding-horizontal,
var(--sky-space-inset-pillarbox-2_3-right-m)
)
var(
--sky-override-timepicker-footer-padding-vertical,
var(--sky-space-inset-pillarbox-2_3-bottom-m)
)
var(
--sky-override-timepicker-footer-padding-horizontal,
var(--sky-space-inset-pillarbox-2_3-left-m)
);
}

.sky-timepicker-footer .sky-timepicker-column {
margin-left: 0;
margin-right: 0;
width: 100%;
}

Expand All @@ -114,79 +255,4 @@
.sky-timepicker-clock-icon-modern {
display: inline;
}

.sky-timepicker-container {
background-color: #fff;
border: solid 1px $sky-border-color-neutral-medium;
border-radius: $sky-theme-modern-border-radius-md;
font-size: $sky-theme-modern-font-body-default-size;

&:focus-within {
border: solid 2px $sky-theme-modern-background-color-primary-dark;
padding: $sky-padding-half - 1;
}

&:last-child ol li {
border-bottom: none;
}

.sky-timepicker-column ol {
.sky-btn-default {
border-width: 1px;
border-color: transparent;
padding: 4px 6px;
outline: none;
}

button:hover:not(.sky-btn-active) {
background-color: transparent;
}

.sky-btn-active,
button:hover {
box-shadow: inset 0 0 0 1px $sky-highlight-color-info;
border-radius: $sky-theme-modern-border-radius-md;
}

button {
&:active,
&:focus {
outline: none;
border-radius: $sky-theme-modern-border-radius-md;
box-shadow: inset 0 0 0 2px
$sky-theme-modern-background-color-primary-dark;
}
}
}

.sky-timepicker-column ol li button.sky-btn-active:hover {
background-color: var(--sky-background-color-input-selected);
}
.sky-timepicker-column ol .sky-btn-active {
background-color: var(--sky-background-color-input-selected);
}
}

&.sky-theme-mode-dark {
.sky-timepicker-container {
color: $sky-theme-modern-mode-dark-font-body-default-color;

&:not(:focus-within) {
border-color: $sky-theme-modern-mode-dark-border-color-neutral-medium;
}
}

.sky-timepicker-column ol {
border-color: $sky-theme-modern-mode-dark-border-color-neutral-medium;

button {
background-color: transparent;
color: $sky-theme-modern-mode-dark-font-body-default-color;
}

.sky-btn-active {
background-color: $sky-theme-modern-mode-dark-text-color-action-primary;
}
}
}
}

0 comments on commit 957b7d6

Please sign in to comment.