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

Jump to bottom

fix: apply theme accent color scale and other small tweaks #1768

Merged
merged 1 commit into from
Feb 2, 2024
Merged

fix: apply theme accent color scale and other small tweaks #1768

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
3 changes: 2 additions & 1 deletion jest.config.lint.cjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,11 +12,12 @@ module.exports = {
displayName: 'stylelint',
runner: 'jest-runner-stylelint',
testMatch: [
'<rootDir>/packages/*/src/**/*.css',
'<rootDir>/packages/*/src/**/*.scss',
'<rootDir>/packages/*/scss/**/*.scss',
],
testPathIgnorePatterns: ['<rootDir>/packages/golden-layout/*'],
moduleFileExtensions: ['scss'],
moduleFileExtensions: ['css', 'scss'],
testEnvironment: 'node',
},
],
Expand Down
6 changes: 1 addition & 5 deletions packages/components/src/theme/theme-dark/theme-dark-components.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -115,11 +115,7 @@
--dh-color-highlight-selected-hover
);
--dh-color-item-list-selected-inactive-bg: var(--dh-color-gray-200);
--dh-color-item-list-selected-border: color-mix(
in srgb,
var(--dh-color-accent) 60%,
transparent
);
--dh-color-item-list-selected-border: var(--dh-color-accent-900);
--dh-color-item-list-drop-target-fg: var(--dh-color-white);

--dh-color-item-list-keyboard-selected-bg: color-mix(
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/theme/theme-dark/theme-dark-palette.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
/* stylelint-disable custom-property-empty-line-before */
/* stylelint-disable custom-property-empty-line-before, color-hex-length */
:root {
/* Gray */
--dh-color-gray-50: #1a171a;
Expand Down
8 changes: 2 additions & 6 deletions packages/components/src/theme/theme-light/theme-light-components.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -114,12 +114,8 @@
--dh-color-item-list-selected-hover-bg: var(
--dh-color-highlight-selected-hover
);
--dh-color-item-list-selected-inactive-bg: var(--dh-color-gray-200);
--dh-color-item-list-selected-border: color-mix(
in srgb,
var(--dh-color-accent) 60%,
transparent
);
--dh-color-item-list-selected-inactive-bg: var(--dh-color-gray-300);
--dh-color-item-list-selected-border: var(--dh-color-accent-900);
--dh-color-item-list-drop-target-fg: var(--dh-color-white);

--dh-color-item-list-keyboard-selected-bg: color-mix(
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/theme/theme-light/theme-light-palette.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
/* stylelint-disable custom-property-empty-line-before */
/* stylelint-disable custom-property-empty-line-before, color-hex-length */
:root {
--dh-color-gray-50: #ffffff;
--dh-color-gray-75: #fafafa;
Expand Down
15 changes: 15 additions & 0 deletions packages/components/src/theme/theme-spectrum/theme-spectrum-alias.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -147,6 +147,21 @@
--dh-color-accent-key-focus-bg
);

--spectrum-accent-color-100: var(--dh-color-accent-100);
--spectrum-accent-color-200: var(--dh-color-accent-200);
--spectrum-accent-color-300: var(--dh-color-accent-300);
--spectrum-accent-color-400: var(--dh-color-accent-400);
--spectrum-accent-color-500: var(--dh-color-accent-500);
--spectrum-accent-color-600: var(--dh-color-accent-600);
--spectrum-accent-color-700: var(--dh-color-accent-700);
--spectrum-accent-color-800: var(--dh-color-accent-800);
--spectrum-accent-color-900: var(--dh-color-accent-900);
--spectrum-accent-color-1000: var(--dh-color-accent-1000);
--spectrum-accent-color-1100: var(--dh-color-accent-1100);
--spectrum-accent-color-1200: var(--dh-color-accent-1200);
--spectrum-accent-color-1300: var(--dh-color-accent-1300);
--spectrum-accent-color-1400: var(--dh-color-accent-1400);

/* Neutral */
--spectrum-neutral-background-color-default: var(--dh-color-neutral-bg);
--spectrum-neutral-background-color-hover: var(--dh-color-neutral-hover-bg);
Expand Down
17 changes: 16 additions & 1 deletion packages/components/src/theme/theme-spectrum/theme-spectrum-overrides.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,22 +29,37 @@ label[class^='spectrum-'] {
);
}

/* Table */
[class^='spectrum-Table-headCell'] {
/*
Tables are styled with the assumption that the header is the same color as the bg
which means they look bad against any other background color, instead just inherit the bg.
There is also no variable exposed for this, so we have to target the class directly.
*/
--dh-table-header-cell-background-color: transparent;

background: var(--dh-table-header-cell-background-color);
}

/* Table */
[class^='spectrum-Table-row'] {
/* border of selected color is hard-coded as blue rather than accent color */
--spectrum-table-row-border-color-selected: var(
--dh-color-item-list-selected-border
);
}

[class*='spectrum-Table--quiet'] {
/* Quiet shouldn't assume a bg color */
--spectrum-alias-background-color-default: transparent;
}

[class*='spectrum-ListView'] {
/* border of selected color is hard-coded as blue rather than accent color */
--spectrum-listview-item-border-color-selected: var(
--dh-color-item-list-selected-border
);
}

button[class^='spectrum-Button'] {
/* make the icon closer to the text */
--spectrum-button-primary-text-gap: var(--spectrum-global-dimension-size-75);
Expand Down
1 change: 1 addition & 0 deletions packages/console/src/command-history/CommandHistory.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ $command-history-search-toolbar-bg: $content-bg;
padding: 0;
.item-list-scroll-pane {
border: none;
border-radius: 0;
}
}
}
Expand Down
32 changes: 26 additions & 6 deletions packages/console/src/command-history/CommandHistoryItem.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ $item-list-selection-border-color: var(--dh-color-item-list-selected-border);
$item-list-focused-bg: var(--dh-color-item-list-selected-bg);
$item-list-hover-bg: var(--dh-color-item-list-hover-bg);
$item-list-selected-color: var(--dh-color-item-list-selected-fg);
$item-list-border-width: 1px;

.command-history {
.command-history-item {
Expand All @@ -27,7 +28,7 @@ $item-list-selected-color: var(--dh-color-item-list-selected-fg);
cursor: pointer;
user-select: none;
line-height: 27px; // CommandHistory.ITEM_HEIGHT - borders
border: 1px solid transparent; //we need a spacer border so stuff doesn't move on us when we apply a border-color
border: $item-list-border-width solid transparent; //we need a spacer border so stuff doesn't move on us when we apply a border-color
}

.item-list-item.is-focused {
Expand All @@ -51,8 +52,23 @@ $item-list-selected-color: var(--dh-color-item-list-selected-fg);
.command-history:focus-within .item-list-item.active {
background-color: $item-list-selected-bg;
color: $item-list-selected-color;
border-left-color: $item-list-selection-border-color;
border-right-color: $item-list-selection-border-color;
// because of border mitre, we use pseudo elements to act as borders
// otherwise we get mitre gap beteween the borders
::before,
::after {
content: '';
position: absolute;
top: -$item-list-border-width;
bottom: -$item-list-border-width * 2; // times 2 the bottom border is actually the top of next item
width: $item-list-border-width;
background-color: $item-list-selection-border-color;
}
::before {
left: -$item-list-border-width;
}
::after {
right: -$item-list-border-width;
}
}

.command-history .item-list-item:hover {
Expand All @@ -68,16 +84,20 @@ $item-list-selected-color: var(--dh-color-item-list-selected-fg);
//apply border to top of the first item in the list if its selected, and the first selected after a non-selected item
.command-history:focus-within .item-list-item:not(.active) + .active,
.command-history:focus-within .item-list-item.active:first-of-type {
border-top: 1px solid $item-list-selection-border-color;
border-top: $item-list-border-width solid $item-list-selection-border-color;
}

//there's no easy way to get the last select item in a grouping, so we apply the end border
//to the TOP of the first non-selected item, ie. the previous selection group
.command-history:focus-within .active + .item-list-item:not(.active) {
border-top: 1px solid $item-list-selection-border-color;
border-top: $item-list-border-width solid $item-list-selection-border-color;
}

//since there is no item after the last item in teh selection, we apply the border to the bottom of the last selected element
.command-history:focus-within .item-list-item.active:last-of-type {
border-bottom: 1px solid $item-list-selection-border-color;
border-bottom: $item-list-border-width solid $item-list-selection-border-color;
::before,
::after {
bottom: -$item-list-border-width; // not times 2, because there is no next item
}
}
34 changes: 28 additions & 6 deletions packages/file-explorer/src/FileList.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
$depth-line-color: $gray-600;
$depth-margin: 5px;
$depth-indentation: 8px;
$item-list-border-width: 1px;
$item-list-color: $text-muted;
$item-list-selected-nofocus-bg: var(--dh-color-item-list-selected-inactive-bg);
$item-list-selected-bg: var(--dh-color-item-list-selected-bg);
Expand Down Expand Up @@ -31,12 +32,13 @@ $item-list-drop-target-color: var(--dh-color-item-list-drop-target-fg);

.item-list-scroll-pane {
border: none;
border-radius: 0;
}

.item-list-item {
padding: 0 $input-btn-padding-x;
color: $item-list-color;
border: 1px solid transparent; // we need a spacer border so stuff doesn't move on us when we apply a border-color
border: $item-list-border-width solid transparent; // we need a spacer border so stuff doesn't move on us when we apply a border-color
-webkit-user-drag: none; // we need to disable webkit-user-drag or else Chrome switches to a Copy icon when dragging on Mac
cursor: pointer;

Expand Down Expand Up @@ -75,8 +77,23 @@ $item-list-drop-target-color: var(--dh-color-item-list-drop-target-fg);
.item-list-item.active {
background-color: $item-list-selected-bg;
color: $item-list-selected-color;
border-left-color: $item-list-selection-border-color;
border-right-color: $item-list-selection-border-color;
// because of border mitre, we use pseudo elements to act as borders
// otherwise we get mitre gap beteween the borders
::before,
::after {
content: '';
position: absolute;
top: -$item-list-border-width;
bottom: -$item-list-border-width * 2; // times 2 the bottom border is actually the top of next item
width: $item-list-border-width;
background-color: $item-list-selection-border-color;
}
::before {
left: -$item-list-border-width;
}
::after {
right: -$item-list-border-width;
}
}
}

Expand Down Expand Up @@ -110,18 +127,23 @@ $item-list-drop-target-color: var(--dh-color-item-list-drop-target-fg);
//apply border to top of the first item in the list if its selected, and the first selected after a non-selected item
&:focus-within .item-list-item:not(.active) + .active,
&:focus-within .item-list-item.active:first-of-type {
border-top: 1px solid $item-list-selection-border-color;
border-top: $item-list-border-width solid $item-list-selection-border-color;
}

//there's no easy way to get the last select item in a grouping, so we apply the end border
//to the TOP of the first non-selected item, ie. the previous selection group
&:focus-within .item-list-item.active + .item-list-item:not(.active) {
border-top: 1px solid $item-list-selection-border-color;
border-top: $item-list-border-width solid $item-list-selection-border-color;
}

//since there is no item after the last item in teh selection, we apply the border to the bottom of the last selected element
&:focus-within .item-list-item.active:last-of-type {
border-bottom: 1px solid $item-list-selection-border-color;
border-bottom: $item-list-border-width solid
$item-list-selection-border-color;
::before,
::after {
bottom: 0; // not times 2 because there is no next item
}
}
/* stylelint-enable no-descending-specificity */
}
Expand Down
Binary file modified tests/styleguide.spec.ts-snapshots/component-colors-chromium-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified tests/styleguide.spec.ts-snapshots/component-colors-firefox-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified tests/styleguide.spec.ts-snapshots/component-colors-webkit-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading