Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

style(elements): use new color scheme #1118

Merged
merged 22 commits into from
Dec 6, 2023
Merged

style(elements): use new color scheme #1118

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
22 commits
Select commit Hold shift + click to select a range
1148d8f
refactor(elements|ino-tooltip): use new color scheme
MariaLStefan Nov 30, 2023
9de5313
refactor(elements|ino-chip): use new color scheme
MariaLStefan Nov 30, 2023
c05fb13
style(elements|ino-datepicker): use new color scheme
MariaLStefan Nov 30, 2023
3c74401
style(elements|ino-fab): use new color scheme
MariaLStefan Nov 30, 2023
0377ce4
style(elements|ino-icon-button): use new color scheme
MariaLStefan Nov 30, 2023
d3a82c3
style(elements|ino-input): use new color scheme
MariaLStefan Nov 30, 2023
6616497
style(elements|ino-list-divider): use new color scheme
MariaLStefan Nov 30, 2023
3cb3399
style(elements|ino-list-item): use new color scheme
MariaLStefan Nov 30, 2023
dd7bf3a
style(elements|ino-markdown-editor): use new color scheme
MariaLStefan Nov 30, 2023
bc6175b
style(elements|ino-nav-drawer): use new color scheme
MariaLStefan Nov 30, 2023
60bae57
style(elements|ino-nav-item): use new color scheme
MariaLStefan Nov 30, 2023
a43a507
style(elements|ino-progress-bar): use new color scheme
MariaLStefan Nov 30, 2023
1bebfad
style(elements|ino-range): use new color scheme
MariaLStefan Nov 30, 2023
2f586e5
style(elements|ino-segment-button): use new color scheme
MariaLStefan Nov 30, 2023
fc728c0
style(elements|ino-select): use new color scheme
MariaLStefan Nov 30, 2023
b816abb
style(elements|ino-snackbar): use new color scheme
MariaLStefan Nov 30, 2023
93e1ff8
style(elements|ino-spinner): use new color scheme
MariaLStefan Nov 30, 2023
3863252
style(elements|ino-tab): use new color scheme
MariaLStefan Nov 30, 2023
a65a03b
style(elements|ino-table): use new color scheme
MariaLStefan Nov 30, 2023
fe041ff
style(elements|ino-table-header-cell): use new color scheme
MariaLStefan Nov 30, 2023
a94861b
style(elements|ino-textarea): use new color scheme
MariaLStefan Nov 30, 2023
5457c34
chore: format fix
MariaLStefan Dec 5, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/elements/src/components/base/_tooltip-base.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
@import '../base/typography';

$border-radius: 10px;
$shadow-color: rgba(93, 91, 105, 0.3);
$shadow-color: rgba(theme.$n-10, 0.35);

@mixin tooltip($background-color, $font-color) {
background: $background-color;
Expand Down
2 changes: 1 addition & 1 deletion packages/elements/src/components/base/_tooltip_base.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
@import '../base/typography';

$border-radius: 10px;
$shadow-color: rgba(93, 91, 105, 0.3);
$shadow-color: rgba(theme.$n-10, 0.35);

@mixin tooltip($background-color, $font-color) {
background: $background-color;
Expand Down
29 changes: 16 additions & 13 deletions packages/elements/src/components/ino-chip/ino-chip.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,16 +3,17 @@
@use '@material/chips/styles';
@use '../base/new-theme' as theme;

$border-focused: rgba(45, 93, 255, 0.3);
$border-focused: theme.$primary-focus;

$chip-outlined-color-enabled: transparent;
$chip-outlined-color-hover: #e8edff;
$chip-outlined-color-hover: theme.$p-1;

$chip-solid-color-enabled: #e8edff;
$chip-solid-color-hover: #d7e0fe;
$chip-solid-color-enabled: theme.$p-2;
$chip-solid-color-hover: theme.$p-3;
$chip-solid-font-color-hover: theme.$p-6;

$chip-color-focus: #2d5dff4d;
$chip-color-font: theme.$primary;
$chip-color-focus: theme.$primary-focus;
$chip-color-font: theme.$p-5;

$icon-size: 16px;

Expand All @@ -28,13 +29,14 @@ ino-chip {
width: inherit;
height: inherit;
@include chips.ripple-color(transparent);
@include chips.trailing-action-color(theme.$primary);
@include chips.trailing-action-color(theme.$p-5);
@include chips.trailing-action-ripple-size(0px);
@include chips.text-label-color(theme.$primary);
@include chips.icon-color(theme.$primary);
@include chips.checkmark-color(theme.$primary);
@include chips.text-label-color(theme.$p-5);
@include chips.icon-color(theme.$p-5);
@include chips.checkmark-color(theme.$p-5);
@include chips.height(inherit);
@include chips.shape-radius(100%);
@include chips.text-label-color($chip-color-font);
transition: ease-in-out 0.15s;

.ino-chip-leading-icon {
Expand Down Expand Up @@ -77,10 +79,10 @@ ino-chip {
@include chips.outline-style(solid);
@include chips.outline-width(1px);
@include chips.container-color($chip-outlined-color-enabled);
@include chips.outline-color(theme.$primary);
@include chips.outline-color(theme.$p-5);

ino-icon {
--icon-color: #{theme.$primary};
--icon-color: #{theme.$p-5};
}

&:hover,
Expand All @@ -94,12 +96,13 @@ ino-chip {
@include chips.container-color($chip-solid-color-enabled);

ino-icon {
--icon-color: theme.$primary;
--icon-color: theme.$p-5;
}

&:hover,
&:focus {
@include chips.container-color($chip-solid-color-hover);
@include chips.text-label-color($chip-solid-font-color-hover);
}
}

Expand Down
47 changes: 23 additions & 24 deletions packages/elements/src/components/ino-datepicker/ino-datepicker.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,8 @@
@use '../base/typography';
@use '../base/theme';
@use '../base/new-theme' as theme;
@import '~flatpickr/dist/flatpickr';
@import '~flatpickr/dist/plugins/monthSelect/style';

$light-blue: #d0d0e6; // rgba(theme.color(primary), 0.1);
$padding-vertical: 12px;
$padding-horizontal: 24px;

Expand All @@ -24,11 +23,11 @@ ino-datepicker {

// Customize flatpickr styles

$hover-color: lighten(theme.color(primary), 36.5%);
$hover-color: theme.$p-3;

.flatpickr-calendar {
@include typography.font(sans-serif, s, regular);
box-shadow: 0 3px 20px 0 rgba(0, 0, 0, 0.2);
box-shadow: 0 3px 20px 0 rgba(theme.$n-10, 0.35);
border-radius: 0 6px 6px 6px;
margin-top: 4px;

Expand Down Expand Up @@ -73,7 +72,7 @@ $hover-color: lighten(theme.color(primary), 36.5%);
padding: 0 20px 0 6px;
margin-bottom: 10px;
border-radius: 24px;
// background-color: theme.$light-blue;
// background-color: theme.theme.$n-3;
width: 100%;

.flatpickr-month {
Expand Down Expand Up @@ -101,7 +100,7 @@ $hover-color: lighten(theme.color(primary), 36.5%);

--ino-icon-height: 12px;
--ino-icon-width: 12px;
--ino-icon-color: #{theme.color(primary)};
--ino-icon-color: #{theme.$p-5};
}
}

Expand Down Expand Up @@ -140,28 +139,28 @@ $hover-color: lighten(theme.color(primary), 36.5%);

// Text color
&:not(.flatpickr-disabled)#{$notSelected} {
color: theme.color(dark);
color: theme.$n-7;
}

&.nextMonthDay:not(.flatpickr-disabled)#{$notSelected},
&.prevMonthDay:not(.flatpickr-disabled)#{$notSelected} {
color: theme.color(dark, light);
color: theme.$n-4;
}

&:hover:not(.flatpickr-disabled)#{$notSelected},
&:focus:not(.flatpickr-disabled)#{$notSelected} {
color: theme.color(primary);
background-color: $light-blue;
border-color: $light-blue;
color: theme.$p-5;
background-color: theme.$n-3;
border-color: theme.$n-3;
}

// Today
&.today:not(.flatpickr-disabled)#{$notSelected} {
color: theme.color(primary);
color: theme.$p-5;
// Only add border if its not in a range
// (provides problems with the background color logic of flatpickr)
&:not(.inRange) {
border: 1px solid theme.color(primary);
border: 1px solid theme.$p-5;
}
}

Expand All @@ -171,23 +170,23 @@ $hover-color: lighten(theme.color(primary), 36.5%);
&.endRange:hover,
&.startRange,
&.startRange:hover {
background-color: theme.color(primary);
border-color: theme.color(primary);
background-color: theme.$p-5;
border-color: theme.$p-5;
color: white;
font-weight: typography.font-weight(semibold);
line-height: $size;
}

// Background within a range
&.inRange:not(.selected) {
border-color: $light-blue;
background-color: $light-blue;
box-shadow: -12px 0 0 $light-blue, 12px 0 0 $light-blue;
border-color: theme.$n-3;
background-color: theme.$n-3;
box-shadow: -12px 0 0 theme.$n-3, 12px 0 0 theme.$n-3;
}

&.selected.startRange + .endRange:not(:nth-child(7n + 1)),
&.startRange.startRange + .endRange:not(:nth-child(7n + 1)) {
box-shadow: -12px 0 0 $light-blue;
box-shadow: -12px 0 0 theme.$n-3;
}
}

Expand All @@ -208,19 +207,19 @@ $hover-color: lighten(theme.color(primary), 36.5%);
align-items: center;

&.selected {
background-color: theme.color(primary);
border-color: theme.color(primary);
background-color: theme.$p-5;
border-color: theme.$p-5;
font-weight: typography.font-weight(semibold);
color: white;
}

&.today {
border-color: theme.color(primary);
color: theme.color(primary);
border-color: theme.$p-5;
color: theme.$p-5;
}

&:hover:not(.selected) {
background-color: $light-blue;
background-color: theme.$n-3;
}
}
}
25 changes: 8 additions & 17 deletions packages/elements/src/components/ino-fab/ino-fab.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
@use '../base/mdc-customize';
@use '@material/fab/mdc-fab';
@use '@material/fab';
@use '../base/theme';
@use '../base/new-theme' as theme;
@use '../base/animation';

@include fab.core-styles;
Expand Down Expand Up @@ -56,33 +56,24 @@ $extended-edged-borders: (
* @prop --fab-icon-color-disabled: Color of the slotted icon if disabled
*/
--fab-color: var(--ino-fab-color, white);
--fab-background-color: var(
--ino-fab-background-color,
#{theme.color(primary)}
);
--fab-background-color: var(--ino-fab-background-color, #{theme.$p-6});
--fab-background-color-hover: var(
--ino-fab-background-color-hover,
#{theme.color(primary, light)}
#{theme.$p-5}
);
--fab-background-color-active: var(
--ino-fab-background-color-active,
#{theme.color(primary, dark)}
);
--fab-icon-color: var(
--ino-fab-icon-color,
#{theme.color(primary, contrast)}
);
--fab-color-disabled: var(
--ino-fab-color-disabled,
#{theme.color(primary, contrast)}
#{theme.$p-7}
);
--fab-icon-color: var(--ino-fab-icon-color, #{theme.$white});
--fab-color-disabled: var(--ino-fab-color-disabled, #{theme.$white});
--fab-background-color-disabled: var(
--ino-background-color-disabled,
#{theme.color(dark, light)}
#{theme.$n-4}
);
--fab-icon-color-disabled: var(
--ino-fab-icon-color-disabled,
#{theme.color(primary, contrast)}
#{theme.$white}
);
}

Expand Down
25 changes: 11 additions & 14 deletions packages/elements/src/components/ino-icon-button/ino-icon-button.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
@use '../base/mdc-customize';
@use '../base/theme';
@use '../base/new-theme' as theme;
@use '@material/icon-button/mdc-icon-button';
@use '@material/icon-button';
@use '@material/ripple/ripple-theme';
Expand All @@ -18,15 +18,12 @@ ino-icon-button {

$button-size: var(--ino-icon-button-size, 48px);
$icon-size: var(--ino-icon-button-icon-size, 24px);
$icon-color: var(--ino-icon-button-icon-color, theme.color(primary));
$icon-color: var(--ino-icon-button-icon-color, theme.$p-5);
$background-color: var(--ino-icon-button-background-color, transparent);
$icon-active-color: var(
--ino-icon-button-icon-active-color,
theme.color(primary)
);
$icon-active-color: var(--ino-icon-button-icon-active-color, theme.$p-5);
$background-active-color: var(
--ino-icon-button-background-active-color,
theme.color(primary)
theme.$p-5
);

ino-icon {
Expand Down Expand Up @@ -58,10 +55,10 @@ ino-icon-button {
}

&.ino-icon-button--filled {
--ino-icon-button-icon-color: #{theme.color(primary, contrast)};
--ino-icon-button-icon-active-color: #{theme.color(primary, contrast)};
--ino-icon-button-background-color: #{theme.color(primary)};
--ino-icon-button-background-active-color: #{theme.color(primary, contrast)};
--ino-icon-button-icon-color: #{theme.$white};
--ino-icon-button-icon-active-color: #{theme.$white};
--ino-icon-button-background-color: #{theme.$p-6};
--ino-icon-button-background-active-color: #{theme.$white};
}
}

Expand All @@ -70,19 +67,19 @@ ino-icon-button {
.ino-icon-button--disabled.ino-icon-button-filled {
--ino-icon-button-background-color: var(
--ino-icon-button-background-disabled-color,
#{theme.color(dark, light)}
#{theme.$n-4}
);

ino-icon {
--ino-icon-button-icon-color: #fff;
--ino-icon-button-icon-color: #{theme.$white};
}
}

.ino-icon-button--disabled:not(.ino-icon-button-filled) {
ino-icon {
--ino-icon-button-icon-color: var(
--ino-icon-button-icon-disabled-color,
#{theme.color(dark, light)}
#{theme.$n-4}
);
}
}
18 changes: 9 additions & 9 deletions packages/elements/src/components/ino-input/ino-input.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
@use '@material/floating-label/mdc-floating-label';
@use '@material/floating-label';
@use '@material/notched-outline/mdc-notched-outline';
@use '../base/theme';
@use '../base/new-theme' as theme;
@use '../base/typography';

$default-text-field: 'not(.mdc-text-field--outlined):not(.mdc-text-field--textarea)';
Expand Down Expand Up @@ -63,10 +63,10 @@ ino-input {
* @prop --ino-input-icon-color: icon color
*/
--input-color: var(--ino-input-color, #{textfield.$ink-color});
--input-caret-color: var(--ino-input-caret-color, #{theme.color(primary)});
--input-label-color: var(--ino-input-label-color, #{theme.color(primary)});
--input-line-color: var(--ino-input-line-color, #{theme.color(primary)});
--input-icon-color: var(--ino-input-icon-color, #{theme.color(primary)});
--input-caret-color: var(--ino-input-caret-color, #{theme.$p-5});
--input-label-color: var(--ino-input-label-color, #{theme.$p-5});
--input-line-color: var(--ino-input-line-color, #{theme.$p-5});
--input-icon-color: var(--ino-input-icon-color, #{theme.$p-5});

display: block;
@include icon.icon-core-styles;
Expand Down Expand Up @@ -107,8 +107,8 @@ ino-input {
}

.mdc-text-field--invalid {
@include textfield.label-color(theme.color(error));
@include setIconColors(theme.color(error));
@include textfield.label-color(theme.$error);
@include setIconColors(theme.$error);
}

:not(.mdc-text-field--disabled) {
Expand All @@ -127,7 +127,7 @@ ino-input .mdc-text-field--filled {
@include textfield.line-ripple-color(var(--input-line-color));

&.mdc-text-field--invalid {
@include textfield.line-ripple-color(theme.color(error));
@include textfield.line-ripple-color(theme.$error);
}

&:not([class*='--with-leading-icon']) {
Expand Down Expand Up @@ -189,7 +189,7 @@ ino-input .mdc-text-field--outlined {
}

&.mdc-text-field--invalid {
@include textfield.focused-outline-color(theme.color(error));
@include textfield.focused-outline-color(theme.$error);
}

&[class*='--with-leading-icon']
Expand Down
Loading
Loading