diff --git a/apps/common/main/resources/less/colors-table-classic.less b/apps/common/main/resources/less/colors-table-classic.less index 610768f56..ea02c2acf 100644 --- a/apps/common/main/resources/less/colors-table-classic.less +++ b/apps/common/main/resources/less/colors-table-classic.less @@ -71,6 +71,7 @@ --canvas-page-border: #bbbec2; --canvas-ruler-background: #fff; + --canvas-ruler-border: #cbcbcb; --canvas-ruler-margins-background: #d6d6d6; --canvas-ruler-mark: #585b5e; --canvas-ruler-handle-border: #555; @@ -138,3 +139,4 @@ --menu-icon-item-checked-offset-x: -20px; } } + diff --git a/apps/common/main/resources/less/colors-table-dark-contrast.less b/apps/common/main/resources/less/colors-table-dark-contrast.less new file mode 100644 index 000000000..34960b4a0 --- /dev/null +++ b/apps/common/main/resources/less/colors-table-dark-contrast.less @@ -0,0 +1,142 @@ + +:root { + .theme-dark-contrast { + --toolbar-header-document: #1e1e1e; + --toolbar-header-spreadsheet: #1e1e1e; + --toolbar-header-presentation: #1e1e1e; + + --text-toolbar-header-on-background-document: #2a2a2a; + --text-toolbar-header-on-background-spreadsheet: #2a2a2a; + --text-toolbar-header-on-background-presentation: #2a2a2a; + + --background-normal: #212121; + --background-toolbar: #2a2a2a; + --background-toolbar-additional: #2a2a2a; + --background-primary-dialog-button: #E6E6E6; + --background-accent-button: #4d76a8; + --background-tab-underline: #717171; + --background-notification-popover: #5f5d81; + --background-notification-badge: #7792fd; + --background-scrim: fade(black, 60%); + --background-loader: fade(#121212, 95%); + --background-alt-key-hint: #FFD938; + --background-contrast-popover: #121212; + + --highlight-button-hover: #424242; + --highlight-button-pressed: #666666; + --highlight-button-pressed-hover: #828282; + --highlight-primary-dialog-button-hover: #a6a6a6; + --highlight-accent-button-hover: #75a2d6; + --highlight-accent-button-pressed: #89afdc; + --highlight-header-button-hover: #424242; + --highlight-header-button-pressed: #828282; + --highlight-toolbar-tab-underline: #d0d0d0; + --highlight-text-select: #96c8fd; + + --border-toolbar: #616161; + --border-divider: #414141; + --border-regular-control: #696969; + --border-toolbar-button-hover: #616161; + --border-preview-hover: #828282; + --border-preview-select: #888; + --border-control-focus: #b8b8b8; + --border-color-shading: fade(#fff, 15%); + --border-error: #f62211; + --border-contrast-popover: #616161; + + --text-normal: #e8e8e8; + --text-normal-pressed: #e8e8e8; + --text-secondary: #b8b8b8; + --text-tertiary: #888888; + --text-link: #ffd78c; + --text-link-hover: #ffd78c; + --text-link-active: #ffd78c; + --text-link-visited: #ffd78c; + --text-inverse: #121212; + --text-toolbar-header: #e8e8e8; + --text-contrast-background: #fff; + --text-alt-key-hint: #121212; + + --icon-normal: #e8e8e8; + --icon-normal-pressed: #e8e8e8; + --icon-inverse: #2a2a2a; + --icon-toolbar-header: #d0d0d0; + --icon-notification-badge: #121212; + --icon-contrast-popover: #fff; + --icon-success: #090; + + // Canvas + + --canvas-background: #121212; + --canvas-content-background: #fff; + --canvas-page-border: #5f5f5f; + + --canvas-ruler-background: #414141; + --canvas-ruler-border: #616161; + --canvas-ruler-margins-background: #1e1e1e; + --canvas-ruler-mark: #d0d0d0; + --canvas-ruler-handle-border: #b8b8b8; + --canvas-ruler-handle-border-disabled: #717171; + + --canvas-high-contrast: #c3c3c3; + --canvas-high-contrast-disabled: #7d7d7d; + + --canvas-cell-border: #656565; + --canvas-cell-title-border: #616161; + --canvas-cell-title-border-hover: #a0a0a0; + --canvas-cell-title-border-selected: #888888; + --canvas-cell-title-hover: #303030; + --canvas-cell-title-selected: #3d3d3d; + + --canvas-dark-cell-title: #1e1e1e; + --canvas-dark-cell-title-hover: #828282; + --canvas-dark-cell-title-selected: #414141; + --canvas-dark-cell-title-border: #717171; + --canvas-dark-cell-title-border-hover: #a0a0a0; + --canvas-dark-cell-title-border-selected: #b8b8b8; + + --canvas-scroll-thumb: #2a2a2a; + --canvas-scroll-thumb-hover: #424242; + --canvas-scroll-thumb-pressed: #4d4d4d; + --canvas-scroll-thumb-border: #616161; + --canvas-scroll-thumb-border-hover: #616161; + --canvas-scroll-thumb-border-pressed: #616161; + --canvas-scroll-arrow: #7d7d7d; + --canvas-scroll-arrow-hover: #8c8c8c; + --canvas-scroll-arrow-pressed: #999999; + --canvas-scroll-thumb-target: #717171; + --canvas-scroll-thumb-target-hover: #8c8c8c; + --canvas-scroll-thumb-target-pressed: #999999; + + // Others + + --button-small-normal-icon-offset-x: -20px; + --button-small-active-icon-offset-x: -20px; + --button-large-normal-icon-offset-x: -31px; + --button-large-active-icon-offset-x: -31px; + --button-huge-normal-icon-offset-x: -40px; + --button-huge-active-icon-offset-x: -40px; + --button-xhuge-normal-icon-offset-x: -28px; + --button-xhuge-active-icon-offset-x: -28px; + //--button-xhuge-normal-icon-offset-x: -37px; + //--button-xhuge-active-icon-offset-x: -37px; + + --modal-window-mask-opacity: 0.6; + --image-border-types-filter: invert(100%) brightness(4); + --image-border-types-filter-selected: invert(100%) brightness(4); + --component-normal-icon-filter: invert(100%); + + --component-normal-icon-opacity: .8; + --component-hover-icon-opacity: .8; + --component-active-icon-opacity: 1; + --component-active-hover-icon-opacity: 1; + --component-disabled-opacity: .4; + + --header-component-normal-icon-opacity: .8; + --header-component-hover-icon-opacity: .8; + --header-component-active-icon-opacity: 1; + --header-component-active-hover-icon-opacity: 1; + + --menu-icon-item-checked-offset-x: -20px; + } +} diff --git a/apps/common/main/resources/less/colors-table-dark.less b/apps/common/main/resources/less/colors-table-dark.less index fa525ed83..7352b0f2c 100644 --- a/apps/common/main/resources/less/colors-table-dark.less +++ b/apps/common/main/resources/less/colors-table-dark.less @@ -33,7 +33,7 @@ --highlight-toolbar-tab-underline: #ddd; --highlight-text-select: #96c8fd; - --border-toolbar: #2a2a2a; + --border-toolbar: #616161; --border-divider: #505050; --border-regular-control: #666; --border-toolbar-button-hover: #5a5a5a; @@ -60,7 +60,7 @@ --icon-normal: fade(#fff, 80%); --icon-normal-pressed: fade(#fff, 80%); --icon-inverse: #444; - --icon-toolbar-header: #fff; + --icon-toolbar-header: fade(#fff, 80%); --icon-notification-badge: #000; --icon-contrast-popover: #fff; --icon-success: #090; @@ -72,6 +72,7 @@ --canvas-page-border: #555; --canvas-ruler-background: #555; + --canvas-ruler-border: #2A2A2A; --canvas-ruler-margins-background: #444; --canvas-ruler-mark: #b6b6b6; --canvas-ruler-handle-border: #b6b6b6; @@ -129,7 +130,7 @@ --component-hover-icon-opacity: .8; --component-active-icon-opacity: 1; --component-active-hover-icon-opacity: 1; - --component-disabled-opacity: .4; + --component-disabled-opacity: .6; --header-component-normal-icon-opacity: .8; --header-component-hover-icon-opacity: .8; diff --git a/apps/common/main/resources/less/colors-table.less b/apps/common/main/resources/less/colors-table.less index a4290ac8d..3807516ab 100644 --- a/apps/common/main/resources/less/colors-table.less +++ b/apps/common/main/resources/less/colors-table.less @@ -83,6 +83,7 @@ --canvas-page-border: #ccc; --canvas-ruler-background: #fff; + --canvas-ruler-border: #cbcbcb; --canvas-ruler-margins-background: #d9d9d9; --canvas-ruler-mark: #555; --canvas-ruler-handle-border: #555; @@ -256,3 +257,4 @@ @canvas-page-border: var(--canvas-page-border); @canvas-scroll-thumb-hover: var(--canvas-scroll-thumb-hover); @canvas-scroll-thumb-border-hover: var(--canvas-scroll-thumb-border-hover); +