+ {% include "pgaweb/styleguide/theme_nav_bar.html" %}
+
+
+
+ {% include "pgaweb/styleguide/accordion/sd_theme_accordion.html" %}
+
+
+ {% include "pgaweb/styleguide/accordion/dark_theme_accordion.html" %}
+
+
+ {% include "pgaweb/styleguide/accordion/hc_theme_accordion.html" %}
+
+
+
+
\ No newline at end of file
diff --git a/pgaweb/templates/pgaweb/styleguide/accordion/dark_theme_accordion.html b/pgaweb/templates/pgaweb/styleguide/accordion/dark_theme_accordion.html
new file mode 100644
index 0000000..81e5708
--- /dev/null
+++ b/pgaweb/templates/pgaweb/styleguide/accordion/dark_theme_accordion.html
@@ -0,0 +1,55 @@
+
diff --git a/pgaweb/templates/pgaweb/styleguide/alert/alert.html b/pgaweb/templates/pgaweb/styleguide/alert/alert.html
new file mode 100644
index 0000000..d5d997b
--- /dev/null
+++ b/pgaweb/templates/pgaweb/styleguide/alert/alert.html
@@ -0,0 +1,21 @@
+
+
Alerts
+
+ {% include "pgaweb/styleguide/theme_nav_bar.html" %}
+
+
+
+ {% include "pgaweb/styleguide/alert/sd_theme_alert.html" %}
+
+
+ {% include "pgaweb/styleguide/alert/dark_theme_alert.html" %}
+
+
+ {% include "pgaweb/styleguide/alert/hc_theme_alert.html" %}
+
+
+
+
\ No newline at end of file
diff --git a/pgaweb/templates/pgaweb/styleguide/alert/dark_theme_alert.html b/pgaweb/templates/pgaweb/styleguide/alert/dark_theme_alert.html
new file mode 100644
index 0000000..e95492e
--- /dev/null
+++ b/pgaweb/templates/pgaweb/styleguide/alert/dark_theme_alert.html
@@ -0,0 +1,100 @@
+
diff --git a/pgaweb/templates/pgaweb/styleguide/button/button.html b/pgaweb/templates/pgaweb/styleguide/button/button.html
new file mode 100644
index 0000000..ba3f7a6
--- /dev/null
+++ b/pgaweb/templates/pgaweb/styleguide/button/button.html
@@ -0,0 +1,21 @@
+
+
Buttons
+
+ {% include "pgaweb/styleguide/theme_nav_bar.html" %}
+
+
+
+ {% include "pgaweb/styleguide/button/sd_theme_button.html" %}
+
+
+ {% include "pgaweb/styleguide/button/dark_theme_button.html" %}
+
+
+ {% include "pgaweb/styleguide/button/hc_theme_button.html" %}
+
+
+
+
\ No newline at end of file
diff --git a/pgaweb/templates/pgaweb/styleguide/button/dark_theme_button.html b/pgaweb/templates/pgaweb/styleguide/button/dark_theme_button.html
new file mode 100644
index 0000000..e734ee3
--- /dev/null
+++ b/pgaweb/templates/pgaweb/styleguide/button/dark_theme_button.html
@@ -0,0 +1,284 @@
+{% load static %}
+
+ Handled by bootstrap class
+ .btn-secondary:hover
+
+
+
+
+
+ Pressed
+
+
+
+
+
+
+
+
+
+
+
+ Handled by bootstrap class
+ .btn-secondary:hover
+
+
+
+
+
+ Disabled
+
+
+
+
+
+
+
+
+
+
+
+ Handled by bootstrap attribute
+ disabled
+
+
+
+
+
\ No newline at end of file
diff --git a/pgaweb/templates/pgaweb/styleguide/button/hc_theme_button.html b/pgaweb/templates/pgaweb/styleguide/button/hc_theme_button.html
new file mode 100644
index 0000000..fc4b433
--- /dev/null
+++ b/pgaweb/templates/pgaweb/styleguide/button/hc_theme_button.html
@@ -0,0 +1,284 @@
+{% load static %}
+
+ Handled by bootstrap class
+ .btn-secondary:hover
+
+
+
+
+
+ Pressed
+
+
+
+
+
+
+
+
+
+
+
+ Handled by bootstrap class
+ .btn-secondary:hover
+
+
+
+
+
+ Disabled
+
+
+
+
+
+
+
+
+
+
+
+ Handled by bootstrap attribute
+ disabled
+
+
+
+
+
\ No newline at end of file
diff --git a/pgaweb/templates/pgaweb/styleguide/button/sd_theme_button.html b/pgaweb/templates/pgaweb/styleguide/button/sd_theme_button.html
new file mode 100644
index 0000000..c381369
--- /dev/null
+++ b/pgaweb/templates/pgaweb/styleguide/button/sd_theme_button.html
@@ -0,0 +1,284 @@
+{% load static %}
+
+ Handled by bootstrap class
+ .btn-secondary:hover
+
+
+
+
+
+ Pressed
+
+
+
+
+
+
+
+
+
+
+
+ Handled by bootstrap class
+ .btn-secondary:hover
+
+
+
+
+
+ Disabled
+
+
+
+
+
+
+
+
+
+
+
+ Handled by bootstrap attribute
+ disabled
+
+
+
+
+
\ No newline at end of file
diff --git a/pgaweb/templates/pgaweb/styleguide/checkbox/checkbox.html b/pgaweb/templates/pgaweb/styleguide/checkbox/checkbox.html
new file mode 100644
index 0000000..0d6e18e
--- /dev/null
+++ b/pgaweb/templates/pgaweb/styleguide/checkbox/checkbox.html
@@ -0,0 +1,21 @@
+
+
Checkbox
+
+ {% include "pgaweb/styleguide/theme_nav_bar.html" %}
+
+
+
+ {% include "pgaweb/styleguide/checkbox/sd_theme_checkbox.html" %}
+
+
+ {% include "pgaweb/styleguide/checkbox/dark_theme_checkbox.html" %}
+
+
+ {% include "pgaweb/styleguide/checkbox/hc_theme_checkbox.html" %}
+
+
+
+
\ No newline at end of file
diff --git a/pgaweb/templates/pgaweb/styleguide/checkbox/dark_theme_checkbox.html b/pgaweb/templates/pgaweb/styleguide/checkbox/dark_theme_checkbox.html
new file mode 100644
index 0000000..10086e4
--- /dev/null
+++ b/pgaweb/templates/pgaweb/styleguide/checkbox/dark_theme_checkbox.html
@@ -0,0 +1,123 @@
+{% load static %}
+
+ Handled by Bootstrap class
+ .btn-secondary:hover
+
+
+
+
+
+ Pressed
+
+
+
+
+
+
+
+
+
+
+
+
+ Handled by Bootstrap class
+ .btn-secondary:not(:disabled)
+ :not(.disabled):active
+
+
+
+
+
+ Selected
+
+
+
+
+
+
+
+
+
+
+
+
+ Handled by bootstrap attribute
+ checked
+
+
+
+
+
+ Disabled
+
+
+
+
+
+
+
+
+
+
+
+
+ Handled by bootstrap attribute
+ disabled
+
+
+
+
+
\ No newline at end of file
diff --git a/pgaweb/templates/pgaweb/styleguide/checkbox/hc_theme_checkbox.html b/pgaweb/templates/pgaweb/styleguide/checkbox/hc_theme_checkbox.html
new file mode 100644
index 0000000..9094740
--- /dev/null
+++ b/pgaweb/templates/pgaweb/styleguide/checkbox/hc_theme_checkbox.html
@@ -0,0 +1,100 @@
+{% load static %}
+
+ Handled by Bootstrap class
+ .btn-secondary:hover
+
+
+
+
+
+ Selected
+
+
+
+
+
+
+
+
+
+
+
+
+ Handled by bootstrap attribute
+ checked
+
+
+
+
+
+ Disabled
+
+
+
+
+
+
+
+
+
+
+
+
+ Handled by bootstrap attribute
+ disabled
+
+
+
+
+
\ No newline at end of file
diff --git a/pgaweb/templates/pgaweb/styleguide/checkbox/sd_theme_checkbox.html b/pgaweb/templates/pgaweb/styleguide/checkbox/sd_theme_checkbox.html
new file mode 100644
index 0000000..bc233b2
--- /dev/null
+++ b/pgaweb/templates/pgaweb/styleguide/checkbox/sd_theme_checkbox.html
@@ -0,0 +1,123 @@
+{% load static %}
+
+ Handled by Bootstrap class
+ .btn-secondary:hover
+
+
+
+
+
+ Pressed
+
+
+
+
+
+
+
+
+
+
+
+
+ Handled by Bootstrap class
+ .btn-secondary:not(:disabled)
+ :not(.disabled):active
+
+
+
+
+
+ Selected
+
+
+
+
+
+
+
+
+
+
+
+
+ Handled by bootstrap attribute
+ checked
+
+
+
+
+
+ Disabled
+
+
+
+
+
+
+
+
+
+
+
+
+ Handled by bootstrap attribute
+ disabled
+
+
+
+
+
\ No newline at end of file
diff --git a/pgaweb/templates/pgaweb/styleguide/color_palette/color_palette.html b/pgaweb/templates/pgaweb/styleguide/color_palette/color_palette.html
new file mode 100644
index 0000000..b97cbe4
--- /dev/null
+++ b/pgaweb/templates/pgaweb/styleguide/color_palette/color_palette.html
@@ -0,0 +1,32 @@
+
+
Color Palette
+
+ pgAdmin uses standard sets of colors for consistency and style. We are also
+ committed to complying with AA standard contrast ratios (AAA for the high contrast theme).
+ To do this, choose primary, secondary, and tertiary colors that
+ support usability by ensuring sufficient color contrast between elements
+ so that people with low vision can see and use the interface.
+
+
+ pgAdmin uses the Bootstrap framework for responsive layout and has
+ customised it using CSS based on specific needs.
+
+
+ {% include "pgaweb/styleguide/theme_nav_bar.html" %}
+
+
+
+ {% include "pgaweb/styleguide/color_palette/sd_theme_color_palette.html" %}
+
+
+ {% include "pgaweb/styleguide/color_palette/dark_theme_color_palette.html" %}
+
+
+ {% include "pgaweb/styleguide/color_palette/hc_theme_color_palette.html" %}
+
+
+
+
\ No newline at end of file
diff --git a/pgaweb/templates/pgaweb/styleguide/color_palette/dark_theme_color_palette.html b/pgaweb/templates/pgaweb/styleguide/color_palette/dark_theme_color_palette.html
new file mode 100644
index 0000000..530e1c9
--- /dev/null
+++ b/pgaweb/templates/pgaweb/styleguide/color_palette/dark_theme_color_palette.html
@@ -0,0 +1,189 @@
+
+
Primary Colors
+
These are main colors of tool. Used for header, selections, primary buttons
+ etc.
+
+
+
+
+ primary
+ #234D6E
+
+
+
+ primary-dark
+ #15354F
+
+
+
+ primary-light
+ #536270
+
+
+
+
+
Secondary Colors
+
Alert colors
+
+
+
+
+ success
+ #1A522B
+
+
+
+ success-light
+ #5A7863
+
+
+
+ warning
+ #EEA236
+
+
+
+ warning-light
+ #B18D5A
+
+
+
+ danger
+ #DA6758
+
+
+
+ danger-light
+ #914649
+
+
+
+
+
Severity Status Colors
+
+
+
+
+ explain-sev-2
+ #DED17E
+
+
+
+ explain-sev-3
+ #C2812B
+
+
+
+ explain-sev-4
+ #880000
+
+
+
+
+
Schema Diff Colors.
+
+
+
+
+ diff-row
+ #807A48
+
+
+
+ source-row
+ #402025
+
+
+
+ target-row
+ #6B5438
+
+
+
+
+
Query Editor Colors.
+
+
+
+
+ number
+ #7FCC5C
+
+
+
+ string
+ #E4E487
+
+
+
+ activeline
+ #50B0F0
+
+
+
+ keyword
+ #DB7C74
+
+
+
+ fg
+ #7DC9F1
+
+
+
+ editor-operator
+ #D6AAAA
+
+
+
+ foldmarker
+ #0000FF
+
+
+
+
+
Tertiary Colors
+
Used for text, background, lines, borders, icons.
+
+
+
+
+ gray-dark
+ #212121
+
+
+
+ gray
+ #2E2E2E
+
+
+
+ gray-light
+ #303030
+
+
+
+ gra-lighter
+ #424242
+
+
+
+ border-color
+ #4A4A4A
+
+
+
+ base-color
+ #DDE0E6
+
+
+
+ text-muted
+ #6B6B6B
+
+
+
+ fg
+ #D4D4D4
+
+
\ No newline at end of file
diff --git a/pgaweb/templates/pgaweb/styleguide/color_palette/hc_theme_color_palette.html b/pgaweb/templates/pgaweb/styleguide/color_palette/hc_theme_color_palette.html
new file mode 100644
index 0000000..febf8c9
--- /dev/null
+++ b/pgaweb/templates/pgaweb/styleguide/color_palette/hc_theme_color_palette.html
@@ -0,0 +1,174 @@
+
+
Primary Colors
+
These are main colors of tool. Used for header, selections, primary buttons
+ etc.
+
+
+
+
+ primary
+ #234D6E
+
+
+
+ primary-light
+ #536270
+
+
+
+
+
Secondary Colors
+
Alert colors
+
+
+
+
+ success
+ #1A522B
+
+
+
+ warning
+ #EEA236
+
+
+
+ danger
+ #DA6758
+
+
+
+
+
Severity Status Colors
+
+
+
+
+ explain-sev-2
+ #DED17E
+
+
+
+ explain-sev-3
+ #C2812B
+
+
+
+ explain-sev-4
+ #880000
+
+
+
+
+
Schema Diff Colors.
+
+
+
+
+ diff-row
+ #807A48
+
+
+
+ source-row
+ #402025
+
+
+
+ target-row
+ #6B5438
+
+
+
+
+
Query Editor Colors.
+
+
+
+
+ number
+ #7FCC5C
+
+
+
+ string
+ #E4E487
+
+
+
+ variabe
+ #7DC9F1
+
+
+
+ builtin
+ #B394FC
+
+
+
+ comment
+ #FFAD65
+
+
+
+ bracket
+ #D6AAAA
+
+
+
+ activeline
+ #50B0F0
+
+
+
+ keyword
+ #F8845F
+
+
+
+ foldmarker
+ #FFFFFF
+
+
+
+
+
Tertiary Colors
+
Used for text, background, lines, borders, icons.
+
+
+
+
+ gray-dark
+ #010B15
+
+
+
+ gray
+ #1F2932
+
+
+
+ gray-light
+ #2D3A48
+
+
+
+ gra-lighter
+ #8B9CAD
+
+
+
+ border-color
+ #A6B7C8
+
+
+
+ base-color
+ #C9D0D7
+
+
+
+ white
+ #FFFFFF
+
+
\ No newline at end of file
diff --git a/pgaweb/templates/pgaweb/styleguide/color_palette/sd_theme_color_palette.html b/pgaweb/templates/pgaweb/styleguide/color_palette/sd_theme_color_palette.html
new file mode 100644
index 0000000..8c5d1e0
--- /dev/null
+++ b/pgaweb/templates/pgaweb/styleguide/color_palette/sd_theme_color_palette.html
@@ -0,0 +1,199 @@
+
+
Primary Colors
+
These are main colors of tool. Used for header, selections, primary buttons
+ etc.
+
+
+
+
+ primary
+ #326690
+
+
+
+ primary-dark
+ #295C85
+
+
+
+ primary-light
+ #D6EFFC
+
+
+
+
+
Secondary Colors
+
Alert colors
+
+
+
+
+ success
+ #43A047
+
+
+
+ success-light
+ #ddf1de
+
+
+
+ warning
+ #EEA236
+
+
+
+ warning-light
+ #FCE5C5
+
+
+
+ danger
+ #E53935
+
+
+
+ danger-light
+ #F39999
+
+
+
+ danger-lighter
+ #faecec
+
+
+
+
+
Severity Status Colors
+
+
+
+
+ explain-sev-2
+ #FFEE88
+
+
+
+ explain-sev-3
+ #EE8800
+
+
+
+ explain-sev-4
+ #880000
+
+
+
+
+
Schema Diff Colors.
+
+
+
+
+ diff-row
+ #FFF9C4
+
+
+
+ source-row
+ #FFEBEE
+
+
+
+ target-row
+ #FBE3BF
+
+
+
+
+
Query Editor Colors.
+
+
+
+
+ number
+ #996644
+
+
+
+ string
+ #AA1111
+
+
+
+ variabe
+ #0055AA
+
+
+
+ builtin
+ #3300AA
+
+
+
+ comment
+ #AA5500
+
+
+
+ bracket
+ #999977
+
+
+
+ activeline
+ #50B0F0
+
+
+
+ keyword
+ #990088
+
+
+
+ foldmarker
+ #0000FF
+
+
+
+
+
Tertiary Colors
+
Used for text, background, lines, borders, icons.
+
+
+
+
+ fg
+ #222222
+
+
+
+ ternary
+ #5B6D7C
+
+
+
+ gray-dark
+ #848EA0
+
+
+
+ gray
+ #BAC1CD
+
+
+
+ border-color
+ #DDE0E6
+
+
+
+ gray-light
+ #EBEEF3
+
+
+
+ gra-lighter
+ #F3F5F9
+
+
\ No newline at end of file
diff --git a/pgaweb/templates/pgaweb/styleguide/dropdown/dark_theme_dropdown.html b/pgaweb/templates/pgaweb/styleguide/dropdown/dark_theme_dropdown.html
new file mode 100644
index 0000000..89f4c56
--- /dev/null
+++ b/pgaweb/templates/pgaweb/styleguide/dropdown/dark_theme_dropdown.html
@@ -0,0 +1,88 @@
+
\ No newline at end of file
diff --git a/pgaweb/templates/pgaweb/styleguide/dropdown/dropdown.html b/pgaweb/templates/pgaweb/styleguide/dropdown/dropdown.html
new file mode 100644
index 0000000..0961261
--- /dev/null
+++ b/pgaweb/templates/pgaweb/styleguide/dropdown/dropdown.html
@@ -0,0 +1,21 @@
+
+
Dropdowns
+
+ {% include "pgaweb/styleguide/theme_nav_bar.html" %}
+
+
+
+ {% include "pgaweb/styleguide/dropdown/sd_theme_dropdown.html" %}
+
+
+ {% include "pgaweb/styleguide/dropdown/dark_theme_dropdown.html" %}
+
+
+ {% include "pgaweb/styleguide/dropdown/hc_theme_dropdown.html" %}
+
+
+
+
\ No newline at end of file
diff --git a/pgaweb/templates/pgaweb/styleguide/dropdown/hc_theme_dropdown.html b/pgaweb/templates/pgaweb/styleguide/dropdown/hc_theme_dropdown.html
new file mode 100644
index 0000000..8396a24
--- /dev/null
+++ b/pgaweb/templates/pgaweb/styleguide/dropdown/hc_theme_dropdown.html
@@ -0,0 +1,88 @@
+
\ No newline at end of file
diff --git a/pgaweb/templates/pgaweb/styleguide/dropdown/sd_theme_dropdown.html b/pgaweb/templates/pgaweb/styleguide/dropdown/sd_theme_dropdown.html
new file mode 100644
index 0000000..15b30d1
--- /dev/null
+++ b/pgaweb/templates/pgaweb/styleguide/dropdown/sd_theme_dropdown.html
@@ -0,0 +1,88 @@
+
\ No newline at end of file
diff --git a/pgaweb/templates/pgaweb/styleguide/iconography/dark_theme_iconography.html b/pgaweb/templates/pgaweb/styleguide/iconography/dark_theme_iconography.html
new file mode 100644
index 0000000..8019a9f
--- /dev/null
+++ b/pgaweb/templates/pgaweb/styleguide/iconography/dark_theme_iconography.html
@@ -0,0 +1,904 @@
+
Font Awesome version 5.14.0
+ (14x14px)
+
+
+
+
+ fa-save
+
+
+
+ fa-edit
+
+
+
+ fa-anchor
+
+
+
+ fa-arrow-circle-right
+
+
+
+ fa-arrows-alt-h
+
+
+
+ fa-arrows-alt-v
+
+
+
+ fa-chevron-right
+
+
+
+ fa-chevron-down
+
+
+
+ fa-check-square
+
+
+
+ fa-check
+
+
+
+ fa-unlink
+
+
+
+ fa-caret-right
+
+
+
+ fa-circle
+
+
+
+ fa-paste
+
+
+
+ fa-times
+
+
+
+ fa-cogs
+
+
+
+ fa-copy
+
+
+
+ fa-download
+
+
+
+ fa-indent
+
+
+
+ fa-hourglass-half
+
+
+
+ fa-home
+
+
+
+ fa-hdd
+
+
+
+ fa-hand-pointer
+
+
+
+ fa-globe
+
+
+
+ fa-file
+
+
+
+ fa-external-link-alt
+
+
+
+ fa-exclamation-triangle
+
+
+
+ fa-exclamation-circle
+
+
+
+ fa-exchange-alt
+
+
+
+ fa-info-circle
+
+
+
+ fa-chart-line
+
+
+
+ fa-list-alt
+
+
+
+ fa-lock
+
+
+
+ fa-long-arrow-alt-right
+
+
+
+ fa-magic
+
+
+
+ fa-outdent
+
+
+
+ fa-plus
+
+
+
+ fa-question
+
+
+
+ fa-recycle
+
+
+
+ fa-sync-alt
+
+
+
+ fa-redo-alt
+
+
+
+ fa-search
+
+
+
+ fa-unlock
+
+
+
+ fa-level-up-alt
+
+
+
+ fa-unlock-alt
+
+
+
+ fa-book
+
+
+
+ fa-backward
+
+
+
+ fa-ban
+
+
+
+ fa-caret-down
+
+
+
+ fa-calendar-check
+
+
+
+ fa-bug
+
+
+
+ fa-calendar-alt
+
+
+
+ fa-play
+
+
+
+ fa-upload
+
+
+
+ fa-eraser
+
+
+
+ fa-ellipsis-v
+
+
+
+ fa-filter
+
+
+
+ fa-eye
+
+
+
+ fa-search-plus
+
+
+
+ fa-play-circle
+
+
+
+ fa-forward
+
+
+
+ fa-folder-open
+
+
+
+ fa-user-circle
+
+
+
+ fa-file-code
+
+
+
+ fa-key
+
+
+
+ fa-server
+
+
+
+ fa-wrench
+
+
+
+ fa-users
+
+
+
+ fa-pause-circle
+
+
+
+ fa-pencil-alt
+
+
+
+ fa-info
+
+
+
+ fa-search-minus
+
+
+
+ fa-times-circle
+
+
+
+ fa-th-list
+
+
+
+ fa-table
+
+
+
+ fa-stop-circle
+
+
+
+ fa-shopping-cart
+
+
+
+ fa-stop
+
+
+
+ fa-chart-bar
+
+
+
+ fa-link
+
+
+
+ fa-trash
+
+
+
+ fa-clock
+
+
+
+ fa-file-alt
+
+
+ Note: These are the icons we have used throughout pgAdmin and
+ may be changed or updated from version to version.
+
diff --git a/pgaweb/templates/pgaweb/styleguide/iconography/style_iconography.html b/pgaweb/templates/pgaweb/styleguide/iconography/style_iconography.html
new file mode 100644
index 0000000..5cf8b9f
--- /dev/null
+++ b/pgaweb/templates/pgaweb/styleguide/iconography/style_iconography.html
@@ -0,0 +1,45 @@
+
Iconography
+
+ Icons are visual representations of commands, files or common actions. They
+ should be meaningful, simple and legible. pgAdmin uses custom as well as
+ Font Awesome 5 icons.
+
+
+
+ Guidelines for icon selection:
+
+
+
+
Icons should be suggestive of the associated functionality.
+
Custom icons are used for Tree view and Query explain section.
+ Font Awesome icons are used for all other commands, actions and files.
+
+
Use both filled and outlined icons depending the required context and
+ legibility.
+
+
Clickable icons must have a tooltip attached to let the user know what
+ happens when it is clicked.
+
+
+
+
+
+
+ {% include "pgaweb/styleguide/theme_nav_bar.html" %}
+
+
+
+ {% include "pgaweb/styleguide/iconography/sd_theme_iconography.html" %}
+
+
+ {% include "pgaweb/styleguide/iconography/dark_theme_iconography.html" %}
+
+
+ {% include "pgaweb/styleguide/iconography/hc_theme_iconography.html" %}
+
+
+
+
\ No newline at end of file
diff --git a/pgaweb/templates/pgaweb/styleguide/iconography/style_iconography_theme.html b/pgaweb/templates/pgaweb/styleguide/iconography/style_iconography_theme.html
new file mode 100644
index 0000000..5d2c928
--- /dev/null
+++ b/pgaweb/templates/pgaweb/styleguide/iconography/style_iconography_theme.html
@@ -0,0 +1,16 @@
+
- Welcome to the style guide for UI elements in pgAdmin4 to help the product stay consistent as it grows.
-
-
-
- The style guide is intended for developers and designers to leverage when implementing features in pgAdmin UI.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
pgAdmin styling, colors and usage of colors has been changed since version 4.0 largely to improve the consistency, user experience and ease of development
-
The app uses fixed set of colors throughout to give uniform look and feel across different dialogs, controls and tools.
-
Colors listed on this page are used for specific purpose. Class names starting with
- .bg- or .text- or .border- are defined for quick use, but not to be used out of the theme
- on which pgAdmin is build.
-
- Example:
-
-
-
- To use a background color use the class:
-
-
-
-
bg-primary
-
-
-
-
- To use a border color use the class:
-
-
-
-
border-primary
-
-
-
-
- To use a text color use the class:
-
-
-
-
text-primary
-
-
-
-
Color variables
-
The colors used by pgAdmin are described in this section. pgAdmin majorly uses three colors namely primary, secondary and gray.
- There are few more colors which are used based on the specific context. To make the application more customizable, variables are defined specific to
- modules and takes values from the standard available colors. These variables should be used in the SCSS files and if required new variables can be added
- based on the module requirements, but the values should be taken from the available colors. Please note, all the required colors are defined and there
- is no need to add any new colors.
-
Available colors are:
-
The primary color should be used to call attention to the main part of the app. Use sparingly.
-
-
-
- primary-light
-
- $color-primary-light
-
-
-
- primary
-
- $color-primary
-
-
-
- primary-dark
-
- $color-primary-dark
-
-
-
- primary-fg
-
- $color-primary-fg
-
-
-
Secondary color is used in places like secondary buttons (Cancel, Next, etc.), toolbar buttons apart from the primary use buttons.
-
-
-
- secondary
-
- $color-secondary
-
-
-
Danger color is used to highlight errors and failures
-
-
-
- danger-lighter
-
- $color-danger-lighter
-
-
-
- danger-light
-
- $color-danger-light
-
-
-
- danger
-
- $color-danger
-
-
-
Success colors are used to highlight success and completions
-
-
-
- success-light
-
- $color-success-light
-
-
-
- success
-
- $color-success
-
-
-
Warning colors are used to give informative warnings
-
-
-
- warning-light
-
- $color-warning-light
-
-
-
- warning
-
- $color-warning
-
-
-
Grays
-
Grays should be used for borders, negative/empty spaces, disabled texts only. They are generally used for framing the controls.
-
-
-
- gray-lighter
-
- $color-gray-lighter
-
-
-
- gray-light
-
- $color-gray-light
-
-
-
- gray
-
- $color-gray
-
-
-
- gray-dark
-
- $color-gray-dark
-
-
-
- gray-darker
-
- $color-gray-darker
-
-
-
-
Others
-
Use these variables for foreground and background colors instead of white and black respectively. This will help in switching the colors easily if planned for a dark theme.
-
-
-
- bg-theme
-
- $color-bg-theme
-
-
-
- fg-theme
-
- $color-fg-theme
-
-
-
- border-color
-
- $border-color
-
-
-
-
SQL editor
-
These are the color variables used by SQL editor
-
-
-
- bg
-
- $color-editor-bg
-
-
-
- keyword
-
- $color-editor-keyword
-
-
-
- foldmarker
-
- $color-editor-foldmarker
-
-
-
- activeline
-
- $color-editor-activeline
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Use alerts to provide feedback to the user or call
- attention to important information the user should know.
-
-
-
- Note: Javascript functions exist for displaying most common alerts, avoiding the need to
- manually style them in most cases.
-
Use this to provide feedback that something went wrong:
-
-
Info alert
-
-
-
-
-
-
- This is a neutral message
-
-
-
-
- Use this for non urgent info that users should know.
- Links can also be placed within the banner if needed.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- pgAdmin primarily uses Google Roboto for the overall
- content. The font FontAwesome is used for icons and Source Code Pro
- is used for SQL and other code. Variables are defined for these fonts
- and can be used directly for font-family property of css.
-
+ {% if tab == "typg" %}
+ {% include "pgaweb/styleguide/style_action.html" %}
+ {% elif tab == "thm" %}
+ {% include "pgaweb/styleguide/style_action_theme.html" %}
+ {% elif tab == "ic" %}
+ {% include "pgaweb/styleguide/iconography/style_iconography_theme.html" %}
+ {% endif %}
-
-
-
-
-
-
-
-
-
-
pgAdmin uses SASS/SCSS variables across the application and transpiles
- SCSS code to CSS when bundled. This makes customizing style easier and
- global. These variables must be used wherever applicable when developing
- new style codes.
-
-
All the SCSS variables used in pgAdmin are viewable
- here.
-
\ No newline at end of file
diff --git a/pgaweb/templates/pgaweb/styleguide/input/hc_theme_input.html b/pgaweb/templates/pgaweb/styleguide/input/hc_theme_input.html
new file mode 100644
index 0000000..c6a6dd1
--- /dev/null
+++ b/pgaweb/templates/pgaweb/styleguide/input/hc_theme_input.html
@@ -0,0 +1,102 @@
+
\ No newline at end of file
diff --git a/pgaweb/templates/pgaweb/styleguide/input/input.html b/pgaweb/templates/pgaweb/styleguide/input/input.html
new file mode 100644
index 0000000..f51ccd4
--- /dev/null
+++ b/pgaweb/templates/pgaweb/styleguide/input/input.html
@@ -0,0 +1,21 @@
+
+
Input Field
+
+ {% include "pgaweb/styleguide/theme_nav_bar.html" %}
+
+
+
+ {% include "pgaweb/styleguide/input/sd_theme_input.html" %}
+
+
+ {% include "pgaweb/styleguide/input/dark_theme_input.html" %}
+
+
+ {% include "pgaweb/styleguide/input/hc_theme_input.html" %}
+
+
+
+
\ No newline at end of file
diff --git a/pgaweb/templates/pgaweb/styleguide/input/sd_theme_input.html b/pgaweb/templates/pgaweb/styleguide/input/sd_theme_input.html
new file mode 100644
index 0000000..05a213e
--- /dev/null
+++ b/pgaweb/templates/pgaweb/styleguide/input/sd_theme_input.html
@@ -0,0 +1,101 @@
+
\ No newline at end of file
diff --git a/pgaweb/templates/pgaweb/styleguide/menu/dark_theme_menu.html b/pgaweb/templates/pgaweb/styleguide/menu/dark_theme_menu.html
new file mode 100644
index 0000000..317a07f
--- /dev/null
+++ b/pgaweb/templates/pgaweb/styleguide/menu/dark_theme_menu.html
@@ -0,0 +1,26 @@
+
diff --git a/pgaweb/templates/pgaweb/styleguide/menu/menu.html b/pgaweb/templates/pgaweb/styleguide/menu/menu.html
new file mode 100644
index 0000000..9439df7
--- /dev/null
+++ b/pgaweb/templates/pgaweb/styleguide/menu/menu.html
@@ -0,0 +1,21 @@
+
+
Menu
+
+ {% include "pgaweb/styleguide/theme_nav_bar.html" %}
+
+
+
+ {% include "pgaweb/styleguide/menu/sd_theme_menu.html" %}
+
+
+ {% include "pgaweb/styleguide/menu/dark_theme_menu.html" %}
+
+
+ {% include "pgaweb/styleguide/menu/hc_theme_menu.html" %}
+
+
+
+
\ No newline at end of file
diff --git a/pgaweb/templates/pgaweb/styleguide/menu/sd_theme_menu.html b/pgaweb/templates/pgaweb/styleguide/menu/sd_theme_menu.html
new file mode 100644
index 0000000..709eaa2
--- /dev/null
+++ b/pgaweb/templates/pgaweb/styleguide/menu/sd_theme_menu.html
@@ -0,0 +1,27 @@
+
diff --git a/pgaweb/templates/pgaweb/styleguide/radiobuttons/radiobuttons.html b/pgaweb/templates/pgaweb/styleguide/radiobuttons/radiobuttons.html
new file mode 100644
index 0000000..2545096
--- /dev/null
+++ b/pgaweb/templates/pgaweb/styleguide/radiobuttons/radiobuttons.html
@@ -0,0 +1,21 @@
+
+
Radio Buttons
+
+ {% include "pgaweb/styleguide/theme_nav_bar.html" %}
+
+
+
+ {% include "pgaweb/styleguide/radiobuttons/sd_theme_radiobuttons.html" %}
+
+
+ {% include "pgaweb/styleguide/radiobuttons/dark_theme_radiobuttons.html" %}
+
+
+ {% include "pgaweb/styleguide/radiobuttons/hc_theme_radiobuttons.html" %}
+
+
+
+
\ No newline at end of file
diff --git a/pgaweb/templates/pgaweb/styleguide/radiobuttons/sd_theme_radiobuttons.html b/pgaweb/templates/pgaweb/styleguide/radiobuttons/sd_theme_radiobuttons.html
new file mode 100644
index 0000000..04bcd7a
--- /dev/null
+++ b/pgaweb/templates/pgaweb/styleguide/radiobuttons/sd_theme_radiobuttons.html
@@ -0,0 +1,112 @@
+
\ No newline at end of file
diff --git a/pgaweb/templates/pgaweb/styleguide/style_typography.html b/pgaweb/templates/pgaweb/styleguide/style_typography.html
new file mode 100644
index 0000000..c34aaba
--- /dev/null
+++ b/pgaweb/templates/pgaweb/styleguide/style_typography.html
@@ -0,0 +1,49 @@
+
Typography
+
+ pgAdmin primarily uses Google Roboto for the overall content and Source Code
+ Pro is used for SQL and other code.
+ The arrangement of type involves selecting typefaces, point sizes, line
+ lengths, line-spacing, and letter-spacing,
+ and adjusting the space between pairs of letters.
+
\ No newline at end of file
diff --git a/pgaweb/templates/pgaweb/styleguide/tab_set/dark_theme_tab_set.html b/pgaweb/templates/pgaweb/styleguide/tab_set/dark_theme_tab_set.html
new file mode 100644
index 0000000..8453c26
--- /dev/null
+++ b/pgaweb/templates/pgaweb/styleguide/tab_set/dark_theme_tab_set.html
@@ -0,0 +1,22 @@
+
diff --git a/pgaweb/templates/pgaweb/styleguide/tab_set/tab_set.html b/pgaweb/templates/pgaweb/styleguide/tab_set/tab_set.html
new file mode 100644
index 0000000..6b7a36c
--- /dev/null
+++ b/pgaweb/templates/pgaweb/styleguide/tab_set/tab_set.html
@@ -0,0 +1,21 @@
+
+
Tab Set
+
+ {% include "pgaweb/styleguide/theme_nav_bar.html" %}
+
+
+
+ {% include "pgaweb/styleguide/tab_set/sd_theme_tab_set.html" %}
+
+
+ {% include "pgaweb/styleguide/tab_set/dark_theme_tab_set.html" %}
+
+
+ {% include "pgaweb/styleguide/tab_set/hc_theme_tab_set.html" %}
+
+
+
+
\ No newline at end of file
diff --git a/pgaweb/templates/pgaweb/styleguide/table/dark_theme_table.html b/pgaweb/templates/pgaweb/styleguide/table/dark_theme_table.html
new file mode 100644
index 0000000..8ae6bda
--- /dev/null
+++ b/pgaweb/templates/pgaweb/styleguide/table/dark_theme_table.html
@@ -0,0 +1,133 @@
+
\ No newline at end of file
diff --git a/pgaweb/templates/pgaweb/styleguide/table/hc_theme_table.html b/pgaweb/templates/pgaweb/styleguide/table/hc_theme_table.html
new file mode 100644
index 0000000..13fec91
--- /dev/null
+++ b/pgaweb/templates/pgaweb/styleguide/table/hc_theme_table.html
@@ -0,0 +1,133 @@
+
\ No newline at end of file
diff --git a/pgaweb/templates/pgaweb/styleguide/table/sd_theme_table.html b/pgaweb/templates/pgaweb/styleguide/table/sd_theme_table.html
new file mode 100644
index 0000000..ddb1169
--- /dev/null
+++ b/pgaweb/templates/pgaweb/styleguide/table/sd_theme_table.html
@@ -0,0 +1,131 @@
+
\ No newline at end of file
diff --git a/pgaweb/templates/pgaweb/styleguide/table/table.html b/pgaweb/templates/pgaweb/styleguide/table/table.html
new file mode 100644
index 0000000..a330823
--- /dev/null
+++ b/pgaweb/templates/pgaweb/styleguide/table/table.html
@@ -0,0 +1,21 @@
+
+
Table
+
+ {% include "pgaweb/styleguide/theme_nav_bar.html" %}
+
+
+
+ {% include "pgaweb/styleguide/table/sd_theme_table.html" %}
+
+
+ {% include "pgaweb/styleguide/table/dark_theme_table.html" %}
+
+
+ {% include "pgaweb/styleguide/table/hc_theme_table.html" %}
+
+
+
+
\ No newline at end of file
diff --git a/pgaweb/templates/pgaweb/styleguide/theme_nav_bar.html b/pgaweb/templates/pgaweb/styleguide/theme_nav_bar.html
new file mode 100644
index 0000000..1cf9661
--- /dev/null
+++ b/pgaweb/templates/pgaweb/styleguide/theme_nav_bar.html
@@ -0,0 +1,23 @@
+
\ No newline at end of file
diff --git a/pgaweb/templates/pgaweb/styleguide/togglebutton/dark_theme_togglebutton.html b/pgaweb/templates/pgaweb/styleguide/togglebutton/dark_theme_togglebutton.html
new file mode 100644
index 0000000..f99dc93
--- /dev/null
+++ b/pgaweb/templates/pgaweb/styleguide/togglebutton/dark_theme_togglebutton.html
@@ -0,0 +1,168 @@
+{% load static %}
+
+ Handled by Bootstrap class
+ .btn-secondary:hover
+
+
+
+
+
+ Pressed
+
+
+
+
+
+
+ Handled by Bootstrap class
+ .btn-secondary:not(:disabled)
+ :not(.disabled):active
+
+
+
+
+
+ Disabled
+
+
+
+
+
+
+ Handled by bootstrap attribute
+ disabled
+
+
+
+
+
\ No newline at end of file
diff --git a/pgaweb/templates/pgaweb/styleguide/togglebutton/hc_theme_togglebutton.html b/pgaweb/templates/pgaweb/styleguide/togglebutton/hc_theme_togglebutton.html
new file mode 100644
index 0000000..b5b18fe
--- /dev/null
+++ b/pgaweb/templates/pgaweb/styleguide/togglebutton/hc_theme_togglebutton.html
@@ -0,0 +1,134 @@
+{% load static %}
+
+ Handled by Bootstrap class
+ .btn-secondary:hover
+
+
+
+
+
+ Disabled
+
+
+
+
+
+
+ Handled by bootstrap attribute
+ disabled
+
+
+
+
+
\ No newline at end of file
diff --git a/pgaweb/templates/pgaweb/styleguide/togglebutton/sd_theme_togglebutton.html b/pgaweb/templates/pgaweb/styleguide/togglebutton/sd_theme_togglebutton.html
new file mode 100644
index 0000000..d84d528
--- /dev/null
+++ b/pgaweb/templates/pgaweb/styleguide/togglebutton/sd_theme_togglebutton.html
@@ -0,0 +1,168 @@
+{% load static %}
+
+ Handled by Bootstrap class
+ .btn-secondary:hover
+
+
+
+
+
+ Pressed
+
+
+
+
+
+
+ Handled by Bootstrap class
+ .btn-secondary:not(:disabled)
+ :not(.disabled):active
+
+
+
+
+
+ Disabled
+
+
+
+
+
+
+ Handled by bootstrap attribute
+ disabled
+
+
+
+
+
\ No newline at end of file
diff --git a/pgaweb/templates/pgaweb/styleguide/togglebutton/togglebutton.html b/pgaweb/templates/pgaweb/styleguide/togglebutton/togglebutton.html
new file mode 100644
index 0000000..9ce57d6
--- /dev/null
+++ b/pgaweb/templates/pgaweb/styleguide/togglebutton/togglebutton.html
@@ -0,0 +1,21 @@
+
+
Toggle Buttons
+
+ {% include "pgaweb/styleguide/theme_nav_bar.html" %}
+
+
+
+ {% include "pgaweb/styleguide/togglebutton/sd_theme_togglebutton.html" %}
+
+
+ {% include "pgaweb/styleguide/togglebutton/dark_theme_togglebutton.html" %}
+
+
+ {% include "pgaweb/styleguide/togglebutton/hc_theme_togglebutton.html" %}
+
+