Skip to content

Commit

Permalink
Feat/dark themes (#1865)
Browse files Browse the repository at this point in the history 
* Made useElementBackground demo.

* Added colors with alpha support to useElementBackground.

* Added sidebar transparent its demo.

* Optimize useElementBackground. Added debounce and reduced recalculation calls.

* Fix VaSidebarItem text color.

* Added temp cache optimization.

* Now VaTimePicker can be seen on dark background,

* Init color service update.

* Fix docs Navbar, Sidebar, Input, Card issues.

* Raw. Fix alert styles.

* Removed useless css vars, fix alert, button, carousel, checkbox, date-picker, modal

* Fix all component problems in dark theme.

* Fix useElement background. Fixed algolia search in docs.

* Removed old colors.

* Fix some transitions.

* Optimization. Sidebar color demo fixes.

* Raw. Added docs theme examples.

* Improve docs dark theme.

* Fix landing text colors.

* Fix docs header.

* Removed unused css variables.

* Fix ag-grid colors.

* Move back temp storage.

* Minor. Review fixes.

* Minor. Fix paths.

* raw

* update some colors after merge.

* optimization: useInViewPort.

* Added essential colors type.

* Fix algolia colors and header shadow.

* Improve getTextColor.

* fix docs exaples colors.

* Use va-scrollbars in docs.

* Fix sidebar demos.

* Fix icons config demo colors.

* Minor improve form color.

* Fix color config demo.

* rename form color to background-form

* Rename background colors to more abstract.

* fix: va-button-group after merge.

* raw: fixes

* minor: remove old color.

* minor: typography fix highlighted text

* chore: rename background-form to background-element
  • Loading branch information
@m0ksem
m0ksem committed Sep 5, 2022
1 parent 6991670 commit 25dcfe4
Show file tree
Hide file tree
Showing 160 changed files with 1,445 additions and 641 deletions.
3 changes: 2 additions & 1 deletion package.json
View file
Expand Up @@ -33,7 +33,8 @@
},
"workspaces": {
"packages": [
"packages/*"
"packages/*",
"packages/extensions/*"
]
},
"gitHooks": {
Expand Down
4 changes: 2 additions & 2 deletions packages/ag-grid-theme/src/_ag-theme-vuestic-default-params.scss
View file
Expand Up @@ -8,7 +8,7 @@ $ag-theme-vuestic-default-params: (
data-color: ag-derived(foreground-color),

// Colour of text and icons in UI elements that need to be slightly less emphasised to avoid distracting attention from data
secondary-foreground-color: var(--va-vue-darkest-blue),
secondary-foreground-color: currentColor,

// Colour of text and icons in the header
header-foreground-color: ag-derived(secondary-foreground-color),
Expand All @@ -32,7 +32,7 @@ $ag-theme-vuestic-default-params: (
control-panel-background-color: null,

// Background color of selected rows in the grid and in dropdown menus
selected-row-background-color: var(--va-light-gray2),
selected-row-background-color: var(--va-background-secondary),

// Background colour applied to every other row or null to use background-color for all rows
odd-row-background-color: null,
Expand Down
4 changes: 2 additions & 2 deletions packages/ag-grid-theme/src/parts/_footer.scss
View file
Expand Up @@ -16,7 +16,7 @@
border-radius: 50%;

&:hover {
background: var(--va-light-gray);
background: var(--va-background-tertiary);
}
}

Expand All @@ -39,7 +39,7 @@
.ag-keyboard-focus {
.ag-paging-button {
&:focus {
background: var(--va-light-gray);
background: var(--va-background-tertiary);

&::after {
display: none;
Expand Down
16 changes: 14 additions & 2 deletions packages/ag-grid-theme/src/parts/_grid.scss
View file
Expand Up @@ -18,7 +18,7 @@
// keyboard focus
.ag-has-focus .ag-cell-focus:not(.ag-cell-range-selected) {
border: none;
background-color: var(--va-light-gray);
background-color: var(--va-background-tertiary);
}
}

Expand All @@ -33,7 +33,7 @@
@mixin vuestic-theme-striped {
&--striped {
.ag-row-odd {
background-color: var(--va-light-gray3);
background-color: var(--va-background-secondary);

&.ag-row-selected {
background-color: ag-param(selected-row-background-color);
Expand All @@ -50,6 +50,18 @@
.ag-row {
&:hover {
background-color: ag-param(selected-row-background-color);
&::after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: '';
background: rgb(0, 0, 0);
opacity: 0.1;
z-index: 0;
transition: all 0.3s ease-in-out;
}
}
}
}
Expand Down
2 changes: 1 addition & 1 deletion packages/ag-grid-theme/src/parts/_header.scss
View file
Expand Up @@ -22,7 +22,7 @@

.ag-keyboard-focus .ag-header-cell {
&:focus {
background: var(--va-light-gray);
background: var(--va-background-tertiary);

&::after {
display: none;
Expand Down
12 changes: 6 additions & 6 deletions packages/ag-grid-theme/src/parts/_widgets.scss
View file
Expand Up @@ -15,7 +15,7 @@
border: 1px solid var(--va-input-color);

&:focus {
border: 1px solid var(--va-light-gray); // keyboard focus color
border: 1px solid var(--va-background-tertiary); // keyboard focus color
}
}

Expand All @@ -24,7 +24,7 @@
////////////////////////////////////////
.ag-list-item {
&.ag-active-item {
background-color: var(--va-light-gray2);
background-color: var(--va-background-secondary);
}
}

Expand All @@ -42,7 +42,7 @@
cursor: pointer;
padding: 0 var(--va-input-content-horizontal-padding);
background: var(--va-input-color);
border: 1px solid var(--va-light-gray);
border: 1px solid var(--va-background-tertiary);
border-radius: var(--va-input-border-radius);
}

Expand All @@ -62,13 +62,13 @@

&::after {
font-size: $radio-size;
color: var(--va-lighter-gray);
color: var(--va-background-primary);
line-height: $radio-size;
}

&.ag-checked::after {
font-size: $radio-size;
color: var(--va-vue-darkest-blue);
color: currentColor;
}
}

Expand Down Expand Up @@ -113,6 +113,6 @@
}

.ag-dnd-ghost-icon {
color: var(--va-vue-darkest-blue);
color: currentColor;
}
}
2 changes: 1 addition & 1 deletion packages/docs/src/App.vue
View file
@@ -1,5 +1,5 @@
<template>
<metainfo />
<!-- <metainfo /> -->
<router-view />
</template>

Expand Down
2 changes: 1 addition & 1 deletion packages/docs/src/components/DocsApi/ApiDocs.vue
View file
Expand Up @@ -223,7 +223,7 @@ export default defineComponent({
font-size: 16px;
&__row {
border-bottom: 1px solid $prism-background;
border-bottom: 1px solid var(--va-background-secondary);
& .MarkdownView {
code,
Expand Down
2 changes: 1 addition & 1 deletion packages/docs/src/components/DocsApi/ApiDocsPropsRow.vue
View file
Expand Up @@ -23,7 +23,7 @@ const PropsMixin = Vue.with(Props)
@Options({
name: 'ApiDocsPropsRow',
components: { MarkdownView },
})
})
export default class ApiDocsPropsRow extends mixins(PropsMixin) {
}
</script>
Expand Down
176 changes: 87 additions & 89 deletions packages/docs/src/components/DocsCode.vue
View file
Expand Up @@ -63,7 +63,7 @@ export default defineComponent({
@import "~vuestic-ui/src/styles/resources";
/* PrismJS 1.20.0
https://prismjs.com/download.html#themes=prism&languages=css */
https://prismjs.com/download.html#themes=prism&languages=css */
/**
* prism.js default theme for JavaScript, CSS and HTML
Expand All @@ -77,15 +77,14 @@ https://prismjs.com/download.html#themes=prism&languages=css */
// Here class is being applied twice, while it should have been applied only on external container
pre.DocsCode {
margin-bottom: 0.2rem;
background: #f4f8fa;
background: var(--va-background-secondary);
padding-top: 1.3rem;
font-size: calc(1rem / 1.4);
code[class*="language-"],
pre[class*="language-"] {
color: black;
color: currentColor;
background: none;
text-shadow: 0 1px white;
font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
font-size: 1rem;
text-align: left;
Expand All @@ -103,92 +102,91 @@ https://prismjs.com/download.html#themes=prism&languages=css */
padding: 1rem;
margin: 0;
overflow: auto;
}
:not(pre) > code[class*="language-"],
pre[class*="language-"] {
background: $prism-background;
}
/* Inline code */
:not(pre) > code[class*="language-"] {
padding: 0.1rem;
border-radius: 0.3rem;
white-space: normal;
}
.token.comment,
.token.block-comment,
.token.prolog,
.token.doctype,
.token.cdata {
color: slategray;
}
.token.punctuation {
color: #999999;
}
.token.namespace {
opacity: 0.7;
}
.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol,
.token.deleted {
color: #990055;
}
.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
color: #669900;
}
.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
color: #9a6e3a;
background: #f4f8fa;
}
.token.atrule,
.token.attr-value,
.token.keyword {
color: #0077aa;
}
.token.function,
.token.class-name {
color: #dd4a68;
}
.token.regex,
.token.important,
.token.variable {
color: #ee9900;
}
.token.important,
.token.bold {
font-weight: $font-weight-bold;
}
.token.italic {
font-style: italic;
}
.token.entity {
cursor: help;
:not(pre) > code[class*="language-"],
pre[class*="language-"] {
background: $prism-background;
}
/* Inline code */
:not(pre) > code[class*="language-"] {
padding: 0.1rem;
border-radius: 0.3rem;
white-space: normal;
}
.token.comment,
.token.block-comment,
.token.prolog,
.token.doctype,
.token.cdata {
color: slategray;
}
.token.punctuation {
color: #999999;
}
.token.namespace {
opacity: 0.7;
}
.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol,
.token.deleted {
color: #990055;
}
.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
color: #669900;
}
.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
color: #9a6e3a;
}
.token.atrule,
.token.attr-value,
.token.keyword {
color: #0077aa;
}
.token.function,
.token.class-name {
color: #dd4a68;
}
.token.regex,
.token.important,
.token.variable {
color: #ee9900;
}
.token.important,
.token.bold {
font-weight: $font-weight-bold;
}
.token.italic {
font-style: italic;
}
.token.entity {
cursor: help;
}
}
}
</style>
4 changes: 2 additions & 2 deletions packages/docs/src/components/DocsExample.vue
View file
Expand Up @@ -115,7 +115,7 @@ function parseTemplate (target: string, template: string) {

<style lang="scss" scoped>
.docs-example-card {
--va-card-outlined-border: 3px solid var(--va-background);
--va-card-outlined-border: 3px solid var(--va-background-secondary);
--va-card-border-radius: 0.25rem;
border-bottom-left-radius: 0;
Expand All @@ -128,7 +128,7 @@ function parseTemplate (target: string, template: string) {
left: 0;
width: 100%;
height: 100%;
background: var(--va-background);
background: var(--va-background-primary);
opacity: 0.3;
z-index: -1;
}
Expand Down

0 comments on commit 25dcfe4

Please sign in to comment.