opensource/beekeeper-studio
1
0
Fork 0
mirror of https://github.com/beekeeper-studio/beekeeper-studio.git synced 2026-03-13 10:12:54 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #2960 from beekeeper-studio/fix/sass

Browse Source 
fix some deprecation warnings and dark theme
This commit is contained in:
Day Matchullis
2025-04-08 11:56:09 -06:00
committed by GitHub
parent c87d345201 87c9c2e393
commit 521dd6e3f3
41 changed files with 252 additions and 197 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
apps/studio/src/assets/styles/app.scss
View File

@@ -34,6 +34,7 @@ body.theme-system {
}
body.theme-dark {
@import './themes/dark/variables.scss';
@import './app/mixins';
@import './components/all';
@import './vendor.scss';

25
apps/studio/src/assets/styles/app/_layout.scss
View File

@@ -1,3 +1,4 @@
@use "sass:color";
// Global
// ------------------------------------
a {
@@ -69,7 +70,7 @@ hr {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=); background-repeat: repeat-y!important;
}
::-webkit-scrollbar-thumb {
background: mix($theme-base, $theme-bg, 20%);
background: color.mix($theme-base, $theme-bg, 20%);
border-radius: 2px;
}
::-webkit-scrollbar-button {
@@ -138,7 +139,7 @@ x-buttons > x-button[menu].btn {
background: $brand-info;
color: rgba(black, 0.87);
&:hover, &:focus {
background: lighten($brand-info, 8%);
background: color.adjust($brand-info, $lightness: 8%);
color: rgba(black, 0.87);
}
}
@@ -198,7 +199,7 @@ x-buttons {
color: rgba(black, 0.87);
}
&:hover, &:focus {
background: darken($theme-primary, 8%);
background: color.adjust($theme-primary, $lightness: -8%);
.material-icons {
color: rgba(black, 0.87);
}
@@ -353,7 +354,7 @@ select {
background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' fill='rgba(255,255,255, 0.87)'><polygon points='0,0 8,0 4,4'/></svg>") no-repeat scroll 98% 60% transparent !important;
padding: 0 0.75rem;
option {
background: lighten($theme-bg, 3%);
background: color.adjust($theme-bg, $lightness: 3%);
color: $text;
&:checked,
&:hover {
@@ -460,7 +461,7 @@ input[type="radio"] {
transition: background 0.2s ease-in-out;
cursor: pointer;
&:checked{
background: darken($theme-primary, 10%);
background: color.adjust($theme-primary, $lightness: -10%);
color: rgba(black, 0.87);
box-shadow: none;
}
@@ -507,7 +508,7 @@ input[type=file] {
color: $brand-info!important;
}
.text-danger {
color: lighten($brand-danger, 5%)!important;
color: color.adjust($brand-danger, $lightness: 5%)!important;
}
.text-warning {
color: $brand-warning!important;
@@ -558,7 +559,7 @@ input[type=file] {
}
.item-icon {
font-size: 12px;
color: darken($theme-primary, 15%);
color: color.adjust($theme-primary, $lightness: -15%);
&.schema-icon {
color: $text-lighter;
}
@@ -661,7 +662,7 @@ input[type=file] {
justify-content: flex-end;
}
.card {
background: lighten($theme-bg, 6%);
background: color.adjust($theme-bg, $lightness: 6%);
@include card-shadow;
}
.card-flat {
@@ -779,16 +780,16 @@ input[type=file] {
}
}
.alert-danger {
color: lighten($brand-danger, 5%);
color: color.adjust($brand-danger, $lightness: 5%);
}
.alert-warning {
color: lighten($brand-warning, 5%);
color: color.adjust($brand-warning, $lightness: 5%);
}
.alert-info {
color: lighten($brand-info, 5%);
color: color.adjust($brand-info, $lightness: 5%);
}
.alert-success {
color: lighten($brand-success, 5%);
color: color.adjust($brand-success, $lightness: 5%);
}
// Dropdown

13
apps/studio/src/assets/styles/app/_variables.scss
View File

@@ -1,3 +1,4 @@
@use "sass:color";
// Theme
// -----------------------------
$theme-bg: #181818!default;
@@ -32,14 +33,14 @@ $selection: rgba($theme-primary, 0.2)!default;
$input-highlight: rgba($theme-base, 0.27)!default;
$db-select-text: white!default;
$query-editor-bg: darken($theme-bg, 6%)!default;
$query-editor-bg: color.adjust($theme-bg, $lightness: -6%)!default;
$row-handle-selected: lighten($query-editor-bg, 5%);
$row-handle-hover: lighten($query-editor-bg, 5%);
$row-handle-selected: color.adjust($query-editor-bg, $lightness: 5%);
$row-handle-hover: color.adjust($query-editor-bg, $lightness: 5%);
$titlebar-bg: transparent!default;
$global-sidebar-bg: transparent!default;
$sidebar-bg: darken($theme-bg, 3%)!default;
$sidebar-bg: color.adjust($theme-bg, $lightness: -3%)!default;
$sidebar-heading-bg: $theme-bg!default;
$tabs-bg: transparent!default;
$statusbar-bg: rgba($theme-base, 0.1)!default;
@@ -85,5 +86,5 @@ $statusbar-height: 2.6rem;
// text
$font-family: 'Roboto, sans-serif';
$grouped-tables-base: lighten($theme-bg, 2%);
$grouped-tables-light: lighten($grouped-tables-base, 2%);
$grouped-tables-base: color.adjust($theme-bg, $lightness: 2%);
$grouped-tables-light: color.adjust($grouped-tables-base, $lightness: 2%);

3
apps/studio/src/assets/styles/app/app-menu.scss
View File

@@ -1,3 +1,4 @@
@use "sass:color";
.flyout-nav {
ul {
@@ -7,7 +8,7 @@
display: none;
list-style-type: none;
white-space: nowrap;
background: lighten($theme-bg, 5%);
background: color.adjust($theme-bg, $lightness: 5%);
border-radius: 6px;
min-width: 150px;
@include card-shadow-hover;

3
apps/studio/src/assets/styles/app/connection-interface.scss
View File

@@ -1,3 +1,4 @@
@use "sass:color";
.interface.connection-interface {
padding-top: 0;
}
@@ -153,7 +154,7 @@
.advanced-connection-settings {
display: flex;
flex-direction: column;
background: darken($theme-bg, 4%);
background: color.adjust($theme-bg, $lightness: -4%);
border-radius: 8px;
margin: $gutter-w 0;
padding: $gutter-w ($gutter-w * 1.25);

15
apps/studio/src/assets/styles/app/connection-labels.scss
View File

@@ -1,3 +1,4 @@
@use "sass:list";
$color-defaults: (
red: $brand-danger,
orange: $brand-warning,
@@ -10,7 +11,7 @@ $color-defaults: (
@each $key, $val in $color-defaults {
.connection-label-color-#{'#{$key}'} {
--connection-label-color: #{nth($val, 1)};
--connection-label-color: #{list.nth($val, 1)};
}
}
@@ -26,9 +27,9 @@ $color-defaults: (
@each $key, $val in $color-defaults {
&.connection-label-color-#{'#{$key}'} {
background-color: nth($val, 1);
background-color: list.nth($val, 1);
&:checked {
background-color: nth($val, 1);
background-color: list.nth($val, 1);
}
}
}
@@ -36,20 +37,20 @@ $color-defaults: (
.statusbar {
@each $key, $val in $color-defaults {
&.#{'#{$key}'} {
background-color: rgba(nth($val, 1), 1);
background-color: rgba(list.nth($val, 1), 1);
}
}
&.query-meta {
@each $key, $val in $color-defaults {
&.#{'#{$key}'} {
background-color: rgba(nth($val, 1), 0.85);
background-color: rgba(list.nth($val, 1), 0.85);
}
}
}
&.editing, &.failure {
@each $key, $val in $color-defaults {
&.#{'#{$key}'} {
background-color: rgba(nth($val, 1), 0.8);
background-color: rgba(list.nth($val, 1), 0.8);
}
}
}
@@ -58,7 +59,7 @@ $color-defaults: (
.statusbar {
@each $key, $val in $color-defaults {
&.#{'#{$key}'} {
background-color: rgba(nth($val, 1), 0.85);
background-color: rgba(list.nth($val, 1), 0.85);
}
}
}

9
apps/studio/src/assets/styles/app/core-tabs.scss
View File

@@ -1,3 +1,4 @@
@use "sass:color";
.core-tabs {
position: relative;
@@ -59,7 +60,7 @@
overflow: hidden;
}
.nav-item-wrap-chosen {
background: lighten($theme-bg, 3%);
background: color.adjust($theme-bg, $lightness: 3%);
opacity: 0.5;
}
.nav-item {
@@ -71,7 +72,7 @@
position: relative;
display: flex;
align-items: center;
background: lighten($theme-bg, 3%);
background: color.adjust($theme-bg, $lightness: 3%);
padding: 0;
height: $tab-height;
line-height: $tab-height * 0.9;
@@ -157,7 +158,7 @@
justify-content: center;
height: 100%;
min-width: 28px;
background: linear-gradient(-90deg, rgba(lighten($theme-bg, 3%), 100%) 80%, rgba(lighten($theme-bg, 3%), 0) 100%);
background: linear-gradient(-90deg, rgba(color.adjust($theme-bg, $lightness: 3%), 100%) 80%, rgba(color.adjust($theme-bg, $lightness: 3%), 0) 100%);
}
.tab-close {
position: absolute;
@@ -299,7 +300,7 @@
&:hover,
&:focus {
// background: lighten($text-dark, 10%);
background: lighten($theme-primary, 10%);
background: color.adjust($theme-primary, $lightness: 10%);
}
.material-icons, .material-icons-outlined {
color: rgba(black, 0.87);

3
apps/studio/src/assets/styles/app/query-editor.scss
View File

@@ -1,3 +1,4 @@
@use "sass:color";
.query-editor {
position: relative;
display: flex;
@@ -100,7 +101,7 @@
padding-top: $gutter-h * 0.5;
padding-bottom: $gutter-h * 0.5;
padding-left: ($gutter-h * 1.5);
background: lighten($query-editor-bg, 1%);
background: color.adjust($query-editor-bg, $lightness: 1%);
}
.result-table {
display: flex;

3
apps/studio/src/assets/styles/app/statusbar.scss
View File

@@ -1,3 +1,4 @@
@use "sass:color";
$button-height: $statusbar-height * 0.72;
.statusbar {
@@ -147,7 +148,7 @@ $button-height: $statusbar-height * 0.72;
box-shadow: inset 0 0 0 1px rgba($statusbar-text, 0.025);
color: $statusbar-text-default;
&.deactivated {
background-color: darken(rgba($statusbar-text, 0.35), 10%);
background-color: color.adjust(rgba($statusbar-text, 0.35), $lightness: -10%);
cursor: not-allowed;
}
}

13
apps/studio/src/assets/styles/app/tabs/database-backup.scss
View File

@@ -1,3 +1,4 @@
@use "sass:color";
.backup-stepper-wrapper {
max-height: 90vh;
overflow-y: scroll;
@@ -43,7 +44,7 @@
padding: 2rem;
width: 100%;
resize: none;
background-color: darken($theme-bg, 2%);
background-color: color.adjust($theme-bg, $lightness: -2%);
display: block;
position: relative;
overflow-wrap: break-word;
@@ -57,7 +58,7 @@
.copy-button {
opacity: 0.5;
background-color: lighten($theme-bg, 2%);
background-color: color.adjust($theme-bg, $lightness: 2%);
border-radius: 5px;
padding-top: 0.25rem;
border: none;
@@ -71,7 +72,7 @@
}
&:hover {
background-color: lighten($theme-bg, 4%);
background-color: color.adjust($theme-bg, $lightness: 4%);
cursor: pointer;
margin-bottom: 0.15rem;
margin-top: -0.15rem;
@@ -110,7 +111,7 @@
flex-direction: column;
margin: auto;
margin-top: 2rem;
background-color: darken($theme-bg, 2%);
background-color: color.adjust($theme-bg, $lightness: -2%);
.system-logs {
display: flex;
@@ -140,7 +141,7 @@
.beekeeper-log {
padding: 1rem;
background-color: lighten($theme-bg, 4%);
background-color: color.adjust($theme-bg, $lightness: 4%);
border-radius: 5px;
// margin-top: 1rem;
margin-bottom: 1rem;
@@ -225,7 +226,7 @@
position: absolute;
top: 0.5rem;
right: 0.5rem;
background: lighten($theme-bg, 1%);
background: color.adjust($theme-bg, $lightness: 1%);
padding: 0;
color: $text-light;
border: none;

7
apps/studio/src/assets/styles/app/tabs/import-export.scss
View File

@@ -1,3 +1,4 @@
@use "sass:color";
.import-export {
&__container {
@@ -36,7 +37,7 @@
li {
padding: 1rem;
margin: 0.75rem 0 0.75rem 0;
background: lighten($theme-bg, 2%);
background: color.adjust($theme-bg, $lightness: 2%);
border-radius: 0.5rem;
display: flex;
flex-direction: column;
@@ -82,7 +83,7 @@
padding: 0.5rem;
&:hover {
background: lighten($theme-bg, 6%);
background: color.adjust($theme-bg, $lightness: 6%);
}
}
}
@@ -90,7 +91,7 @@
.progress .progress-bg {
margin-top: 0.5rem;
height: 0.65rem;
background: lighten($theme-bg, 6%);
background: color.adjust($theme-bg, $lightness: 6%);
border-radius: 0.35rem;
position: relative;
.progress-fill {

3
apps/studio/src/assets/styles/app/tabs/table-properties.scss
View File

@@ -1,5 +1,6 @@
@use "sass:color";
$row-highlight: lighten($query-editor-bg, 1%);
$row-highlight: color.adjust($query-editor-bg, $lightness: 1%);
$row-add: #104633;
$row-delete: #8A3937;
$row-error: #38201F;

5
apps/studio/src/assets/styles/app/vendor/codemirror.scss vendored
View File

@@ -1,3 +1,4 @@
@use "sass:color";
:not(.BksTextEditor) {
.CodeMirror {
font-family: $font-family-mono, monospace;
@@ -51,7 +52,7 @@
// --------------------------------------
.CodeMirror-hints {
font-family: $font-family-mono, monospace;
background: lighten($theme-bg, 5%);
background: color.adjust($theme-bg, $lightness: 5%);
color: $text-dark;
padding: $gutter-h 0;
border: 0;
@@ -62,7 +63,7 @@
background: rgba($theme-base, 0.05);
}
&.CodeMirror-hint-active {
background: darken($theme-secondary, 25%);
background: color.adjust($theme-secondary, $lightness: -25%);
color: white;
}
}

9
apps/studio/src/assets/styles/app/vendor/datepicker/var.scss vendored
View File

@@ -1,9 +1,10 @@
@use "sass:color";
$namespace: 'mx' !default;
$default-color: #73879c !default;
$primary-color: #1284e7 !default;
$today-color: mix(#fff, $primary-color, 10%) !default;
$today-color: color.mix(#fff, $primary-color, 10%) !default;
$popup-z-index: 2001 !default;
@@ -20,16 +21,16 @@ $calendar-active-color: $default-color !default;
$calendar-active-background-color: $primary-color !default;
$calendar-hover-color: $default-color !default;
$calendar-hover-background-color: mix(#fff, $calendar-active-background-color, 95%) !default;
$calendar-hover-background-color: color.mix(#fff, $calendar-active-background-color, 95%) !default;
$calendar-in-range-color: $default-color !default;
$calendar-in-range-background-color: mix(#fff, $calendar-active-background-color, 85%) !default;
$calendar-in-range-background-color: color.mix(#fff, $calendar-active-background-color, 85%) !default;
$time-active-color: $default-color !default;
$time-active-background-color: $default-color !default;
$time-hover-color: $default-color !default;
$time-hover-background-color: mix(#fff, $calendar-active-background-color, 95%) !default;
$time-hover-background-color: color.mix(#fff, $calendar-active-background-color, 95%) !default;
$input-border-radius: 4px !default;
$sidebar-margin-left: 100px !default;

11
apps/studio/src/assets/styles/app/vendor/noty.scss vendored
View File

@@ -1,9 +1,10 @@
@use "sass:color";
// Note: Mint is the default Noty theme
// '~noty/themes/mint.scss';
// --------------------------------------
.noty_theme__mint.noty_bar {
background: lighten($theme-bg, 5%);
background: color.adjust($theme-bg, $lightness: 5%);
border: 0;
border-radius: 4px;
@include card-shadow;
@@ -46,15 +47,15 @@
color: $text-dark;
}
.noty_theme__mint.noty_type__warning {
color: lighten($brand-warning, 5%);
color: color.adjust($brand-warning, $lightness: 5%);
}
.noty_theme__mint.noty_type__error {
color: lighten($brand-danger, 5%);
color: color.adjust($brand-danger, $lightness: 5%);
}
.noty_theme__mint.noty_type__info,
.noty_theme__mint.noty_type__information {
color: lighten($brand-info, 5%);
color: color.adjust($brand-info, $lightness: 5%);
}
.noty_theme__mint.noty_type__success {
color: lighten($brand-success, 5%);
color: color.adjust($brand-success, $lightness: 5%);
}

25
apps/studio/src/assets/styles/app/vendor/tabulator.scss vendored
View File

@@ -1,3 +1,4 @@
@use "sass:color";
$errorColor: $brand-danger;
$foreign-key-width: 20px;
@@ -14,10 +15,10 @@ $cell-radius: 2px;
$cell-padding: $gutter-w;
$header-highlight: mix($query-editor-bg, $theme-base, 95%);
$header-selected: mix($query-editor-bg, $theme-primary, 10%);
$header-highlight: color.mix($query-editor-bg, $theme-base, 95%);
$header-selected: color.mix($query-editor-bg, $theme-primary, 10%);
$columnResizeGuideColor: mix($query-editor-bg, $theme-base, 80%);
$columnResizeGuideColor: color.mix($query-editor-bg, $theme-base, 80%);
// Mixin
@mixin cell-shadow($bg) {
@@ -301,19 +302,19 @@ $columnResizeGuideColor: mix($query-editor-bg, $theme-base, 80%);
&.edited {
background: $cell-edited;
&:hover {
background: lighten($cell-edited, 3%);
background: color.adjust($cell-edited, $lightness: 3%);
}
}
&.edit-error {
background: $cell-error;
&:hover {
background: lighten($cell-error, 5%);
background: color.adjust($cell-error, $lightness: 5%);
}
}
&.edit-success {
background: $cell-success;
&:hover {
background: lighten($cell-success, 5%);
background: color.adjust($cell-success, $lightness: 5%);
}
}
&.edited,
@@ -750,7 +751,7 @@ $columnResizeGuideColor: mix($query-editor-bg, $theme-base, 80%);
}
.tabulator-menu {
background: lighten($theme-bg, 5%);
background: color.adjust($theme-bg, $lightness: 5%);
border: none;
border-radius: 6px;
min-width: 150px;
@@ -797,11 +798,11 @@ $columnResizeGuideColor: mix($query-editor-bg, $theme-base, 80%);
.tabulator .tabulator-tableholder .tabulator-range-overlay {
.tabulator-range, .tabulator-range-cell-active {
border-color: darken($theme-primary, 20%);
border-color: color.adjust($theme-primary, $lightness: -20%);
border-width: 1px;
}
.tabulator-range.tabulator-range-active::after {
background-color: darken($theme-primary, 20%);
background-color: color.adjust($theme-primary, $lightness: -20%);
}
.tabulator-range.copied {
border-style: dashed;
@@ -822,7 +823,7 @@ $columnResizeGuideColor: mix($query-editor-bg, $theme-base, 80%);
color: black;
}
&.foreign-key:before {
color: mix($theme-primary, black, 60%);
color: color.mix($theme-primary, black, 60%);
}
.tabulator-col-content .tabulator-col-title-holder .tabulator-col-title {
color: inherit;
@@ -836,7 +837,7 @@ $columnResizeGuideColor: mix($query-editor-bg, $theme-base, 80%);
}
}
.tabulator-header-popup-button::before, .tabulator-col-sorter.tabulator-col-sorter-element:hover {
background-color: darken($header-selected, 10%);
background-color: color.adjust($header-selected, $lightness: -10%);
}
}
}
@@ -898,7 +899,7 @@ $columnResizeGuideColor: mix($query-editor-bg, $theme-base, 80%);
width: 3px;
height: 60%;
transform: translate(0, -50%);
background-color: transparentize($columnResizeGuideColor, 0.4);
background-color: color.adjust($columnResizeGuideColor, $alpha: -0.4);
backdrop-filter: invert(100%);
border-radius: 999px;
}

5
apps/studio/src/assets/styles/app/vendor/vue-js-modal.scss vendored
View File

@@ -1,3 +1,4 @@
@use "sass:color";
.vue-modal-resizer {
display: block;
@@ -40,7 +41,7 @@
top: 0;
width: 100%;
height: 100vh;
background: rgba(darken($theme-bg, 3%), 0.9);
background: rgba(color.adjust($theme-bg, $lightness: -3%), 0.9);
z-index: 9999;
opacity: 1;
&.relative {
@@ -77,7 +78,7 @@
// Modal
// ----------------------------
.v--modal {
background-color: lighten($theme-bg, 1%) !important;
background-color: color.adjust($theme-bg, $lightness: 1%) !important;
color: $theme-base !important;
text-align: left !important;
border-radius: 8px !important;

3
apps/studio/src/assets/styles/app/vendor/vueable.scss vendored
View File

@@ -1,3 +1,4 @@
@use "sass:color";
@import '../extends';
@@ -16,7 +17,7 @@
position: absolute;
left: 0;
top: 0;
background: lighten($theme-bg, 10%);
background: color.adjust($theme-bg, $lightness: 10%);
padding: ($gutter-h * 0.65) 0;
min-width: 200px;
border-radius: 6px;

5
apps/studio/src/assets/styles/app/vendor/xel.scss vendored
View File

@@ -1,3 +1,4 @@
@use "sass:color";
/*
* @copyright
* © 2016-2017 Jarosław Foksa
@@ -422,7 +423,7 @@ x-button {
transition: background 0.15s ease-in-out;
&:hover, &:focus {
// background: rgba($theme-base, 0.44);
background: lighten($theme-primary, 8%);
background: color.adjust($theme-primary, $lightness: 8%);
color: rgba(black, 0.87);
}
}
@@ -757,7 +758,7 @@ x-doctab {
*/
x-menu {
background: lighten($theme-bg, 5%);
background: color.adjust($theme-bg, $lightness: 5%);
padding: ($gutter-h * 0.75) 0;
border-radius: 6px;
box-shadow: var(--elevation-5);

3
apps/studio/src/assets/styles/components/content-placeholders.scss
View File

@@ -1,3 +1,4 @@
@use "sass:color";
// Original Copyright https://github.com/michalsnik/vue-content-placeholders
// Variables
@@ -45,7 +46,7 @@ $vue-content-placeholders-spacing: 10px !default;
width: 100vw;
max-width: 1000px;
height: 100%;
background: linear-gradient(to right, transparent 0%, darken($vue-content-placeholders-secondary-color, 5%) 15%, transparent 30%);
background: linear-gradient(to right, transparent 0%, color.adjust($vue-content-placeholders-secondary-color, $lightness: -5%) 15%, transparent 30%);
animation-duration: 1.5s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;

9
apps/studio/src/assets/styles/components/context-menu.scss
View File

@@ -1,3 +1,4 @@
@use "sass:color";
// Original file souce copyright John Datserakis https://github.com/johndatserakis/vue-simple-context-menu
.vue-simple-context-menu {
@@ -9,7 +10,7 @@
list-style: none;
position: absolute;
z-index: 1000000;
background: lighten($theme-bg, 5%);
background: color.adjust($theme-bg, $lightness: 5%);
color: $text;
padding: ($gutter-h * 0.75) 0;
border-radius: 6px;
@@ -37,8 +38,8 @@
}
&.disabled {
pointer-events: none;
color: darken($text-dark, 25%);
background: darken(rgba($theme-base, 0.05), 25%);
color: color.adjust($text-dark, $lightness: -25%);
background: color.adjust(rgba($theme-base, 0.05), $lightness: -25%);
}
i {
height: 24px!important;
@@ -49,7 +50,7 @@
}
.shortcut {
padding-left: 5px;
color: darken($text-dark, 30%);
color: color.adjust($text-dark, $lightness: -30%);
}
i.material-icons.menu-icon {
margin-right:0!important;

3
apps/studio/src/assets/styles/components/grouped-tables.scss
View File

@@ -1,3 +1,4 @@
@use "sass:color";
.grouped-table-wrapper {
margin-top: 1rem;
@@ -25,7 +26,7 @@
border-bottom: 1px solid rgba($grouped-tables-light, 0.85);
}
&.tabulator-group {
background: lighten($theme-bg, 2%);
background: color.adjust($theme-bg, $lightness: 2%);
padding-top: 0;
padding-bottom: 0;
color: $text-lighter;

5
apps/studio/src/assets/styles/components/quicksearch.scss
View File

@@ -1,3 +1,4 @@
@use "sass:color";
.quicksearch {
@@ -46,7 +47,7 @@
line-height: $input-height;
font-size: 1.1rem;
border-radius: 6px;
background: lighten($theme-bg, 5%);
background: color.adjust($theme-bg, $lightness: 5%);
width: 100%;
@include card-shadow-hover;
}
@@ -74,7 +75,7 @@
// Results
.results {
margin: 0;
background: lighten($theme-bg, 5%);
background: color.adjust($theme-bg, $lightness: 5%);
padding-left: 0;
border-radius: 6px;
margin: ($gutter-h * 0.5) 0;

3
apps/studio/src/assets/styles/components/stepper.scss
View File

@@ -1,3 +1,4 @@
@use "sass:color";
// Original Copyright https://github.com/PygmySlowLoris/vue-stepper
.stepper-box {
@@ -85,7 +86,7 @@
border: none;
&.next {
&.deactivated {
background-color: darken($theme-primary, 20%) !important;
background-color: color.adjust($theme-primary, $lightness: -20%) !important;
cursor: not-allowed !important;
}
}

7
apps/studio/src/assets/styles/themes/dark/theme.scss
View File

@@ -1,5 +1,6 @@
@use "sass:color";
$row-handle-selected: lighten($query-editor-bg, 10%);
$row-handle-selected: color.adjust($query-editor-bg, $lightness: 10%);
& {
background: $theme-bg;
@@ -133,9 +134,9 @@ $row-handle-selected: lighten($query-editor-bg, 10%);
}
.BksTextEditor-hints {
--bks-text-editor-context-menu-bg-color: #{lighten($theme-bg, 5%)};
--bks-text-editor-context-menu-bg-color: #{color.adjust($theme-bg, $lightness: 5%)};
--bks-text-editor-context-menu-fg-color: #{$text-dark};
--bks-text-editor-context-menu-item-bg-color-active: #{darken($theme-secondary, 25%)};
--bks-text-editor-context-menu-item-bg-color-active: #{color.adjust($theme-secondary, $lightness: -25%)};
--bks-text-editor-context-menu-item-bg-color-hover: #{rgba($theme-base, 0.05)};
--bks-text-editor-context-menu-item-fg-color-active: #ffffff;
}

77
apps/studio/src/assets/styles/themes/dark/variables.scss
View File

@@ -1,37 +1,52 @@
@use "sass:color";
$material-icons-font-path: 'material-icons/iconfont/';
// Theme
// ---------------------------
// $theme-bg: #252525;
// $theme-base: #fff;
// $theme-primary: #fad83b;
// $theme-secondary: #4ad0ff;
$theme-bg: #181818;
$theme-base: #fff;
$theme-primary: #fad83b;
$theme-secondary: #4ad0ff;
// // Colors
// // -----------------------------
// $text-dark: rgba($theme-base, 0.87);
// $text: rgba($theme-base, 0.67);
// $text-light: rgba($theme-base, 0.57);
// $text-lighter: rgba($theme-base, 0.37);
// $text-hint: rgba($theme-base, 0.37);
// $text-disabled: rgba($theme-base, 0.37);
// Colors
// -----------------------------
$text-dark: rgba($theme-base, 0.87);
$text: rgba($theme-base, 0.67);
$text-light: rgba($theme-base, 0.57);
$text-lighter: rgba($theme-base, 0.37);
$text-hint: rgba($theme-base, 0.37);
$text-disabled: rgba($theme-base, 0.37);
// $brand-info: $theme-secondary;
// $brand-success: #15db95;
// $brand-warning: #ff8d21;
// $brand-danger: #ff5d59;
// $brand-default: rgba($theme-base, 0.57);
// $brand-purple: #9b59b6;
// $brand-pink: #ff78f7;
// $brand-primary: $theme-primary;
// $brand-secondary: $theme-secondary;
$brand-info: $theme-secondary;
$brand-success: #15db95;
$brand-warning: #ff8d21;
$brand-danger: #ff5d59;
$brand-default: rgba($theme-base, 0.57);
$brand-purple: #9858ff;
$brand-pink: #ff78f7;
$brand-primary: $theme-primary;
$brand-secondary: $theme-secondary;
// App
$border-color: rgba($theme-base, 0.1);
$link-color: $text-dark;
$placeholder: $text-hint;
$selection: rgba($theme-primary, 0.2);
$input-highlight: rgba($theme-base, 0.27);
$db-select-text: white;
$query-editor-bg: color.adjust($theme-bg, $lightness: -6%);
$row-handle-selected: color.adjust($query-editor-bg, $lightness: 5%);
$row-handle-hover: color.adjust($query-editor-bg, $lightness: 5%);
$titlebar-bg: transparent;
$global-sidebar-bg: transparent;
$sidebar-bg: color.adjust($theme-bg, $lightness: -3%);
$sidebar-heading-bg: $theme-bg;
$tabs-bg: transparent;
$statusbar-bg: rgba($theme-base, 0.1);
// $statusbar-bg: rgba($theme-primary, 0.4);
$statusbar-text: black;
$statusbar-text-default: white;
// // App
// $border-color: rgba($theme-base, 0.1);
// $link-color: $text-dark;
// $placeholder: $text-hint;
// $selection: rgba($theme-primary, 0.2);
// $db-select-text: white;
// $query-editor-bg: darken($theme-bg, 3%);
// $input-highlight: rgba($theme-base, 0.27);
$row-handle: rgb(22 22 22);

35
apps/studio/src/assets/styles/themes/light/theme.scss
View File

@@ -1,3 +1,4 @@
@use "sass:color";
@import "codemirror/theme/xq-light";
// Global
@@ -8,12 +9,12 @@ $sidebar-list-icons: $theme-primary;
// Editor
$tabs-heading: rgba($theme-base, 0.08);
$tab-link: darken($theme-bg, 4%);
$codemirror-hint-bg: darken($theme-bg, 2%);
$tab-link: color.adjust($theme-bg, $lightness: -4%);
$codemirror-hint-bg: color.adjust($theme-bg, $lightness: -2%);
// Table Editing
$row-highlight: darken($query-editor-bg, 3%);
$row-handle-selected: darken($query-editor-bg, 10%);
$row-highlight: color.adjust($query-editor-bg, $lightness: -3%);
$row-handle-selected: color.adjust($query-editor-bg, $lightness: -10%);
$row-add: #5ff3c0;
$row-delete: #FC8A87;
$row-error: #F9B8B7;
@@ -138,9 +139,9 @@ x-buttons {
// -----------------------------------------
.connection-label {
&.connection-label-color-yellow {
background-color: darken($theme-primary, 4%);
background-color: color.adjust($theme-primary, $lightness: -4%);
&:checked {
background-color: darken($theme-primary, 4%);
background-color: color.adjust($theme-primary, $lightness: -4%);
}
}
}
@@ -199,7 +200,7 @@ x-buttons {
}
}
.item-icon {
color: darken($theme-primary, 6%);
color: color.adjust($theme-primary, $lightness: -6%);
}
// Editor
@@ -280,20 +281,20 @@ x-buttons {
background: $cell-edited;
--row-bg-color: #{$cell-edited};
&:hover {
background: darken($cell-edited, 5%);
--row-hover-bg-color: darken($cell-edited, 5%);
background: color.adjust($cell-edited, $lightness: -5%);
--row-hover-bg-color: color.adjust($cell-edited, $lightness: -5%);
}
}
&.edit-error {
background: $cell-error;
&:hover {
background: darken($cell-error, 5%);
background: color.adjust($cell-error, $lightness: -5%);
}
}
&.edit-success {
background: $cell-success;
&:hover {
background: darken($cell-success, 5%);
background: color.adjust($cell-success, $lightness: -5%);
}
}
&.foreign-key-button {
@@ -326,7 +327,7 @@ x-buttons {
.tabulator-col {
&.foreign-key {
&:before {
color: darken($brand-primary, 6%);
color: color.adjust($brand-primary, $lightness: -6%);
}
}
.badge {
@@ -491,7 +492,7 @@ x-buttons {
}
.tabulator-row {
&.tabulator-moving {
background: lighten($theme-bg, 15%)!important;
background: color.adjust($theme-bg, $lightness: 15%)!important;
}
}
}
@@ -500,7 +501,7 @@ x-buttons {
// CodeMirror
// ----------------------------------
.CodeMirror-hints {
background: darken($theme-bg, 5%)!important;
background: color.adjust($theme-bg, $lightness: -5%)!important;
li {
&.CodeMirror-hint-active {
background: $brand-info;
@@ -541,7 +542,7 @@ x-buttons {
color: $brand-warning;
}
.CodeMirror-line .cm-string {
color: darken($brand-success, 20%);
color: color.adjust($brand-success, $lightness: -20%);
}
.CodeMirror-cursor {
border-color: $text-dark;
@@ -553,7 +554,7 @@ x-buttons {
// Noty
.noty_theme__mint.noty_type__success {
color: darken($brand-success, 5%);
color: color.adjust($brand-success, $lightness: -5%);
}
// Switch
@@ -577,7 +578,7 @@ x-switch {
// Quicksearch
.quicksearch {
.quicksearch-bg {
background: rgba(darken($theme-bg, 8%), 0.5);
background: rgba(color.adjust($theme-bg, $lightness: -8%), 0.5);
}
}

13
apps/studio/src/assets/styles/themes/light/variables.scss
View File

@@ -1,8 +1,9 @@
@use "sass:color";
// Theme
// -----------------------------
$theme-bg: #f8f8f8;
$theme-base: black;
$theme-primary: darken(#fad83b, 10%);
$theme-primary: color.adjust(#fad83b, $lightness: -10%);
$theme-secondary: #0099ff;
// Colors
@@ -33,17 +34,17 @@ $input-highlight: rgba($theme-base, 0.27);
$db-select-text: white;
$query-editor-bg: white;
$row-handle-selected: darken($query-editor-bg, 10%);
$row-handle-hover: darken($query-editor-bg, 5%);
$row-handle-selected: color.adjust($query-editor-bg, $lightness: -10%);
$row-handle-hover: color.adjust($query-editor-bg, $lightness: -5%);
$titlebar-bg: transparent;
$global-sidebar-bg: transparent;
$sidebar-bg: darken($theme-bg, 3%);
$sidebar-bg: color.adjust($theme-bg, $lightness: -3%);
$sidebar-heading-bg: $theme-bg;
$tabs-bg: transparent;
$statusbar-bg: rgba($theme-base, 0.1);
// $statusbar-bg: rgba($theme-primary, 0.4);
$statusbar-text: $theme-base;
$grouped-tables-base: darken($theme-bg, 2%);
$grouped-tables-light: darken($grouped-tables-base, 2%);
$grouped-tables-base: color.adjust($theme-bg, $lightness: -2%);
$grouped-tables-light: color.adjust($grouped-tables-base, $lightness: -2%);

5
apps/studio/src/assets/styles/themes/solarized-dark/variables.scss
View File

@@ -1,3 +1,4 @@
@use "sass:color";
@import 'codemirror/theme/solarized';
@@ -95,5 +96,5 @@ $statusbar-bg: rgba($theme-base, 0.1);
// $statusbar-bg: rgba($theme-primary, 0.4);
$statusbar-text: $text-dark;
$grouped-tables-base: lighten($theme-bg, 2%);
$grouped-tables-light: lighten($grouped-tables-base, 2%);
$grouped-tables-base: color.adjust($theme-bg, $lightness: 2%);
$grouped-tables-light: color.adjust($grouped-tables-base, $lightness: 2%);

25
apps/studio/src/assets/styles/themes/solarized-light/theme.scss
View File

@@ -1,3 +1,4 @@
@use "sass:color";
@import "codemirror/theme/solarized.css";
@@ -10,10 +11,10 @@ $sidebar-list-icons: $theme-primary;
// Editor
$tabs-heading: rgba($theme-base, 0.08);
$tab-link: $sbase4;
$codemirror-hint-bg: darken($theme-bg, 2%);
$codemirror-hint-bg: color.adjust($theme-bg, $lightness: -2%);
// Table Editing
$row-highlight: darken($query-editor-bg, 3%);
$row-highlight: color.adjust($query-editor-bg, $lightness: -3%);
$row-add: $insertedGreen;
$row-delete: $removedRed;
$row-error: #F9B8B7;
@@ -139,9 +140,9 @@ x-buttons {
// -----------------------------------------
.connection-label {
&.connection-label-color-yellow {
background-color: darken($theme-primary, 4%);
background-color: color.adjust($theme-primary, $lightness: -4%);
&:checked {
background-color: darken($theme-primary, 4%);
background-color: color.adjust($theme-primary, $lightness: -4%);
}
}
}
@@ -271,19 +272,19 @@ x-buttons {
&.edited {
background: $cell-edited;
&:hover {
background: darken($cell-edited, 5%);
background: color.adjust($cell-edited, $lightness: -5%);
}
}
&.edit-error {
background: $cell-error;
&:hover {
background: darken($cell-error, 5%);
background: color.adjust($cell-error, $lightness: -5%);
}
}
&.edit-success {
background: $cell-success;
&:hover {
background: darken($cell-success, 5%);
background: color.adjust($cell-success, $lightness: -5%);
}
}
&.foreign-key-button {
@@ -314,7 +315,7 @@ x-buttons {
.tabulator-col {
&.foreign-key {
&:before {
color: darken($brand-primary, 6%);
color: color.adjust($brand-primary, $lightness: -6%);
}
}
.badge {
@@ -477,7 +478,7 @@ x-buttons {
}
.tabulator-row {
&.tabulator-moving {
background: lighten($theme-bg, 15%)!important;
background: color.adjust($theme-bg, $lightness: 15%)!important;
}
}
}
@@ -496,14 +497,14 @@ x-buttons {
}
.BksTextEditor-hints {
--bks-text-editor-context-menu-bg-color: #{darken($theme-bg, 5%)};
--bks-text-editor-context-menu-bg-color: #{color.adjust($theme-bg, $lightness: -5%)};
--bks-text-editor-context-menu-item-bg-color-active: #{$brand-info};
--bks-text-editor-context-menu-item-fg-color-active: #ffffff;
}
// Noty
.noty_theme__mint.noty_type__success {
color: darken($brand-success, 5%);
color: color.adjust($brand-success, $lightness: -5%);
}
// Switch
@@ -527,7 +528,7 @@ x-switch {
// Quicksearch
.quicksearch {
.quicksearch-bg {
background: rgba(darken($theme-bg, 8%), 0.5);
background: rgba(color.adjust($theme-bg, $lightness: -8%), 0.5);
}
}

7
apps/studio/src/assets/styles/themes/solarized-light/variables.scss
View File

@@ -1,3 +1,4 @@
@use "sass:color";
// SOLARIZED COLORS
$sbase03: #002b36;
$sbase02: #073642;
@@ -20,7 +21,7 @@ $sgreen: #859900;
$insertedGreen: #5ff3c0;
$removedRed: #FC8A87;
$bksyellow: darken(#fad83b, 10%);
$bksyellow: color.adjust(#fad83b, $lightness: -10%);
@mixin rebase($rebase03,$rebase02,$rebase01,$rebase00,$rebase0,$rebase1,$rebase2,$rebase3)
{
@@ -89,5 +90,5 @@ $statusbar-bg: rgba($theme-base, 0.1);
// $statusbar-bg: rgba($theme-primary, 0.4);
$statusbar-text: $text-dark;
$grouped-tables-base: lighten($theme-bg, 2%);
$grouped-tables-light: lighten($grouped-tables-base, 2%);
$grouped-tables-base: color.adjust($theme-bg, $lightness: 2%);
$grouped-tables-light: color.adjust($grouped-tables-base, $lightness: 2%);

3
apps/studio/src/components/common/ContextMenu.vue
View File

@@ -136,9 +136,10 @@ export default Vue.extend({
</script>
<style lang="scss">
@use 'sass:color';
// yuck
$light-grey: #ecf0f1;
$grey: darken($light-grey, 15%);
$grey: color.adjust($light-grey, $lightness: -15%);
$blue: #007aff;
$white: #fff;
$black: #333;

3
apps/studio/src/components/common/texteditor/MongoShell.vue
View File

@@ -347,6 +347,7 @@ export default {
</script>
<style lang="scss">
@use 'sass:color';
@import '../../../assets/styles/app/_variables';
.cm-s-monokai .cm-prompt {
@@ -356,7 +357,7 @@ export default {
.text-editor {
.dropdown-icon:hover {
color: lighten($theme-primary, 15%);
color: color.adjust($theme-primary, $lightness: 15%);
}
}

7
apps/studio/src/shared/assets/styles/_variables.scss
View File

@@ -1,3 +1,4 @@
@use "sass:color";
// Theme
// -----------------------------
$theme-bg: #181818!default;
@@ -32,11 +33,11 @@ $selection: rgba($theme-primary, 0.2)!default;
$input-highlight: rgba($theme-base, 0.27)!default;
$db-select-text: white!default;
$query-editor-bg: darken($theme-bg, 6%)!default;
$query-editor-bg: color.adjust($theme-bg, $lightness: -6%)!default;
$titlebar-bg: transparent!default;
$global-sidebar-bg: transparent!default;
$sidebar-bg: darken($theme-bg, 3%)!default;
$sidebar-bg: color.adjust($theme-bg, $lightness: -3%)!default;
$sidebar-heading-bg: $theme-bg!default;
$tabs-bg: transparent!default;
$statusbar-bg: rgba($theme-base, 0.1)!default;
@@ -74,4 +75,4 @@ $tab-height: 2.4rem;
$tab-padding-w: 1rem;
// Statusbar
$statusbar-height: 2.2rem;
$statusbar-height: 2.2rem;

3
apps/studio/src/shared/components/SchemaBuilder.vue
View File

@@ -257,6 +257,7 @@ export default Vue.extend({
<style lang="scss">
@use 'sass:color';
@import '../../shared/assets/styles/_variables';
@import '../../shared/assets/styles/_extends';
$row-height: 42px;
@@ -461,7 +462,7 @@ export default Vue.extend({
&.tabulator-moving {
@extend .card-shadow-hover;
border: 0;
background: lighten($theme-bg, 15%)!important;
background: color.adjust($theme-bg, $lightness: 15%)!important;
opacity: 1!important;
}
}

7
apps/ui-kit/lib/components/context-menu/context-menu.scss
View File

@@ -1,5 +1,6 @@
// Original file source copyright John Datserakis https://github.com/johndatserakis/vue-simple-context-menu
@use "sass:color";
@use "../../styles/variables" as *;
@use "../../styles/mixins" as *;
@@ -12,7 +13,7 @@
list-style: none;
position: absolute;
z-index: 1000000;
background-color: lighten($theme-bg, 5%);
background-color: color.adjust($theme-bg, $lightness: 5%);
color: $text;
padding: ($gutter-h * 0.75) 0;
border-radius: 6px;
@@ -39,8 +40,8 @@
}
&.BksContextMenu-item-disabled {
pointer-events: none;
color: darken($text-dark, 25%);
background-color: darken(rgba($theme-base, 0.05), 25%);
color: color.adjust($text-dark, $lightness: -25%);
background-color: color.adjust(rgba($theme-base, 0.05), $lightness: -25%);
}
.BksContextMenu-item-label {
width: 100%;

5
apps/ui-kit/lib/components/entity-list/entity-list.scss
View File

@@ -1,3 +1,4 @@
@use "sass:color";
@use "../../styles/variables" as *;
@use "../../styles/mixins" as *;
@use "../../styles/base";
@@ -534,14 +535,14 @@
z-index: 100;
position: absolute;
inset: 0;
background-color: rgba(darken($theme-bg, 3%), 0.9);
background-color: rgba(color.adjust($theme-bg, $lightness: -3%), 0.9);
display: flex;
align-items: center;
justify-content: center;
.dialog-content {
position: relative;
background-color: lighten($theme-bg, 1%);
background-color: color.adjust($theme-bg, $lightness: 1%);
color: $theme-base;
border-radius: 8px;
min-height: 8.5rem;

19
apps/ui-kit/lib/components/table/table.scss
View File

@@ -1,4 +1,5 @@
@use "../../../../../node_modules/tabulator-tables/dist/css/tabulator.css";
@use 'sass:color';
@use '../../styles/variables' as *;
@use "../../styles/base";
@use './tabulator/magics.scss';
@@ -61,7 +62,7 @@ $columnResizeGuideColor: mix($query-editor-bg, $theme-base, 80%) !default;
--bks-table-sorter-fg-color-active: #{$theme-base};
--bks-table-sorter-fg-color-inactive: #{rgba($theme-base, 0.35)};
--bks-table-range-border-color: #{darken($theme-primary, 20%)};
--bks-table-range-border-color: #{color.adjust($theme-primary, $lightness: -20%)};
--bks-table-tooltip-bg-color: #292A2D;
--bks-table-tooltip-fg-color: lightgray;
@@ -98,19 +99,19 @@ $columnResizeGuideColor: mix($query-editor-bg, $theme-base, 80%) !default;
&.edited {
background: $cell-edited;
&:hover {
background: darken($cell-edited, 5%);
background: color.adjust($cell-edited, $lightness: -5%);
}
}
&.edit-error {
background: $cell-error;
&:hover {
background: darken($cell-error, 5%);
background: color.adjust($cell-error, $lightness: -5%);
}
}
&.edit-success {
background: $cell-success;
&:hover {
background: darken($cell-success, 5%);
background: color.adjust($cell-success, $lightness: -5%);
}
}
&.foreign-key-button {
@@ -143,7 +144,7 @@ $columnResizeGuideColor: mix($query-editor-bg, $theme-base, 80%) !default;
.tabulator-col {
&.foreign-key {
&:before {
color: darken($brand-primary, 6%);
color: color.adjust($brand-primary, $lightness: -6%);
}
}
.badge {
@@ -395,19 +396,19 @@ $columnResizeGuideColor: mix($query-editor-bg, $theme-base, 80%) !default;
&.edited {
background: $cell-edited;
&:hover {
background: lighten($cell-edited, 3%);
background: color.adjust($cell-edited, $lightness: 3%);
}
}
&.edit-error {
background: $cell-error;
&:hover {
background: lighten($cell-error, 5%);
background: color.adjust($cell-error, $lightness: 5%);
}
}
&.edit-success {
background: $cell-success;
&:hover {
background: lighten($cell-success, 5%);
background: color.adjust($cell-success, $lightness: 5%);
}
}
&.edited,
@@ -787,7 +788,7 @@ $columnResizeGuideColor: mix($query-editor-bg, $theme-base, 80%) !default;
color: black;
}
.tabulator-header-popup-button::before, .tabulator-col-sorter.tabulator-col-sorter-element:hover {
background-color: darken($header-selected, 10%);
background-color: color.adjust($header-selected, $lightness: -10%);
}
}
}

5
apps/ui-kit/lib/components/text-editor/text-editor.scss
View File

@@ -5,6 +5,7 @@
@use "../../../../../node_modules/codemirror/addon/search/matchesonscrollbar";
@use "../../../../../node_modules/codemirror/addon/fold/foldgutter";
@use "dialog.scss";
@use 'sass:color';
@use '../../styles/variables' as *;
@use '../../styles/mixins' as *;
@use "../../styles/base";
@@ -36,7 +37,7 @@
--bks-text-editor-number-fg-color: #{$brand-warning};
--bks-text-editor-property-fg-color: #a6e22e;
--bks-text-editor-selected-bg-color: #{rgba($theme-base, 0.25)};
--bks-text-editor-string-fg-color: #{darken($brand-success, 20%)};
--bks-text-editor-string-fg-color: #{color.adjust($brand-success, $lightness: -20%)};
--bks-text-editor-tag-fg-color: #f92672;
--bks-text-editor-variable-2-fg-color: #{$brand-secondary};
--bks-text-editor-variable-3-fg-color: #66d9ef;
@@ -214,7 +215,7 @@
}
.BksTextEditor-hints.CodeMirror-hints {
--bks-text-editor-context-menu-bg-color: #{darken($theme-bg, 5%)};
--bks-text-editor-context-menu-bg-color: #{color.adjust($theme-bg, $lightness: -5%)};
--bks-text-editor-context-menu-fg-color: #{$text-dark};
--bks-text-editor-context-menu-item-bg-color-active: #{$brand-info};
--bks-text-editor-context-menu-item-fg-color-active: #ffffff;

23
apps/ui-kit/lib/styles/_layout.scss
View File

@@ -1,5 +1,6 @@
@use "variables" as *;
@use "mixins" as *;
@use "sass:color";
.BksUiKit {
// Global
@@ -139,7 +140,7 @@
background: $brand-info;
color: rgba(black, 0.87);
&:hover, &:focus {
background: lighten($brand-info, 8%);
background: color.adjust($brand-info, $lightness: 8%);
color: rgba(black, 0.87);
}
}
@@ -192,7 +193,7 @@
color: rgba(black, 0.87);
}
&:hover, &:focus {
background: darken($theme-primary, 8%);
background: color.adjust($theme-primary, $lightness: -8%);
.material-icons {
color: rgba(black, 0.87);
}
@@ -347,7 +348,7 @@
background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' fill='rgba(255,255,255, 0.87)'><polygon points='0,0 8,0 4,4'/></svg>") no-repeat scroll 98% 60% transparent ;
padding: 0 0.75rem;
option {
background: lighten($theme-bg, 3%);
background: color.adjust($theme-bg, $lightness: 3%);
color: $text;
&:checked,
&:hover {
@@ -454,7 +455,7 @@
transition: background 0.2s ease-in-out;
cursor: pointer;
&:checked{
background: darken($theme-primary, 10%);
background: color.adjust($theme-primary, $lightness: -10%);
color: rgba(black, 0.87);
box-shadow: none;
}
@@ -501,7 +502,7 @@
color: $brand-info;
}
.text-danger {
color: lighten($brand-danger, 5%);
color: color.adjust($brand-danger, $lightness: 5%);
}
.text-warning {
color: $brand-warning;
@@ -552,7 +553,7 @@
}
.item-icon {
font-size: 12px;
color: darken($theme-primary, 15%);
color: color.adjust($theme-primary, $lightness: -15%);
&.schema-icon {
color: $text-lighter;
}
@@ -655,7 +656,7 @@
justify-content: flex-end;
}
.card {
background: lighten($theme-bg, 6%);
background: color.adjust($theme-bg, $lightness: 6%);
@include card-shadow;
}
.card-flat {
@@ -773,16 +774,16 @@
}
}
.alert-danger {
color: lighten($brand-danger, 5%);
color: color.adjust($brand-danger, $lightness: 5%);
}
.alert-warning {
color: lighten($brand-warning, 5%);
color: color.adjust($brand-warning, $lightness: 5%);
}
.alert-info {
color: lighten($brand-info, 5%);
color: color.adjust($brand-info, $lightness: 5%);
}
.alert-success {
color: lighten($brand-success, 5%);
color: color.adjust($brand-success, $lightness: 5%);
}
// Dropdown

21
apps/ui-kit/lib/styles/_variables.scss
View File

@@ -1,8 +1,9 @@
// Theme
// -----------------------------
@use 'sass:color';
$theme-bg: #f8f8f8!default;
$theme-base: black!default;
$theme-primary: darken(#fad83b, 10%)!default;
$theme-primary: color.adjust(#fad83b, $lightness: -10%)!default;
$theme-secondary: #0099ff!default;
// Colors
@@ -32,15 +33,15 @@ $selection: rgba($theme-primary, 0.2)!default;
$input-highlight: rgba($theme-base, 0.27)!default;
// Editor
$codemirror-hint-bg: darken($theme-bg, 2%) !default;
$codemirror-hint-bg: color.adjust($theme-bg, $lightness: -2%) !default;
$db-select-text: white!default;
$query-editor-bg: white!default;
// Table Editing
$row-handle-selected: darken($query-editor-bg, 10%) !default;
$row-handle-hover: darken($query-editor-bg, 5%) !default;
$row-highlight: darken($query-editor-bg, 3%) !default;
$row-handle-selected: darken($query-editor-bg, 10%) !default;
$row-handle-selected: color.adjust($query-editor-bg, $lightness: -10%) !default;
$row-handle-hover: color.adjust($query-editor-bg, $lightness: -5%) !default;
$row-highlight: color.adjust($query-editor-bg, $lightness: -3%) !default;
$row-handle-selected: color.adjust($query-editor-bg, $lightness: -10%) !default;
$row-add: #5ff3c0 !default;
$row-delete: #FC8A87 !default;
$row-error: #F9B8B7 !default;
@@ -51,13 +52,13 @@ $cell-success: $row-add !default;
// Layout
$titlebar-bg: transparent!default;
$global-sidebar-bg: transparent!default;
$sidebar-bg: darken($theme-bg, 3%)!default;
$sidebar-bg: color.adjust($theme-bg, $lightness: -3%)!default;
$sidebar-heading-bg: $theme-bg!default;
$sidebar-list-icons: $theme-primary !default;
$tabs-bg: transparent!default;
$tabs-heading: rgba($theme-base, 0.08) !default;
$grouped-tables-base: lighten($theme-bg, 2%) !default;
$grouped-tables-light: lighten($grouped-tables-base, 2%) !default;
$grouped-tables-base: color.adjust($theme-bg, $lightness: 2%) !default;
$grouped-tables-light: color.adjust($grouped-tables-base, $lightness: 2%) !default;
// Statusbar
$editor-statusbar: rgba($theme-base, 0.035) !default;
@@ -66,7 +67,7 @@ $statusbar-bg: rgba($theme-base, 0.1)!default;
$statusbar-text: $theme-base!default;
$statusbar-text-default: white!default;
$tab-link: darken($theme-bg, 4%) !default;
$tab-link: color.adjust($theme-bg, $lightness: -4%) !default;
$badge-bg: rgba($theme-base, 0.1) !default;
// Layout