@pdftools/four-heights-pdf-web-viewer 4.3.6

package/scss/themes/default/_mixins.scss

@@ -0,0 +1,129 @@
+/***********************
+ * mixins
+ ***********************/
+// dialog
+
+@mixin dialog {
+  background-color: $dialog__BackgroundColor;
+  color: $dialog__TextColor;
+}
+
+// button
+@mixin button {
+  height: $button__Height;
+  padding: 0 1rem;
+  margin: 0.5rem;
+  color: $button__TextColor;
+  background-color: $button__BackgroundColor;
+  border: $button__Border;
+  border-radius: $button__BorderRadius;
+  transition: all 0.2s;
+}
+
+@mixin button__Hover {
+  color: $button__HoverTextColor;
+  background-color: $button__HoverBackgroundColor;
+  border: $button__HoverBorder;
+}
+
+@mixin button__Active {
+  transform: scale(0.98);
+  color: $button__ActiveTextColor;
+  background-color: $button__ActiveBackgroundColor;
+  border: $button__ActiveBorder;
+}
+
+@mixin button__Focus {
+  color: $button__FocusTextColor;
+  background-color: $button__FocusBackgroundColor;
+  border: $button__FocusBorder;
+}
+
+@mixin button__Disabled {
+  color: $button__DisabledTextColor;
+  background-color: $button__DisabledBackgroundColor;
+  border: $button__DisabledBorder;
+  opacity: 0.25;
+}
+
+@mixin buttonPrimary {
+}
+
+// toolbar
+@mixin toolbar {
+  background-color: $toolbar__BackgroundColor;
+  color: $toolbar__TextColor;
+}
+
+@mixin toolbarItem {
+  position: relative;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: $toolbarItem__Border;
+  border-radius: $toolbarItem__BorderRadius;
+  height: $toolbarItem__height;
+  min-width: $toolbarItem__MinWidth;
+  margin: $toolbarItem__Margin;
+  background-color: $toolbarItem__BackgroundColor;
+  color: $toolbarItem__TextColor;
+  cursor: $toolbarItem__CursorStyle;
+}
+
+@mixin toolbar__Dense {
+}
+
+@mixin toolbarItem__Hover {
+  color: $toolbarItem__HoverTextColor;
+  background-color: $toolbarItem__HoverBackgroundColor;
+  border: $toolbarItem__HoverBorder;
+}
+
+@mixin toolbarItem__Active {
+  color: $toolbarItem__ActiveTextColor;
+  background-color: $toolbarItem__ActiveBackgroundColor;
+  border: $toolbarItem__ActiveBorder;
+  svg,
+  img {
+    transform: scale(0.94);
+  }
+}
+
+@mixin toolbarItem__Focus {
+  color: $toolbarItem__FocusTextColor;
+  background-color: $toolbarItem__FocusBackgroundColor;
+  border: $toolbarItem__FocusBorder;
+}
+
+@mixin toolbarItem__Disabled {
+  color: $toolbarItem__DisabledTextColor;
+  background-color: $toolbarItem__DisabledBackgroundColor;
+  border: $toolbarItem__DisabledBorder;
+  cursor: default;
+}
+
+@mixin toolbarItem__Selected {
+  color: $toolbarItem__SelectedTextColor !important;
+  background-color: $toolbarItem__SelectedBackgroundColor !important;
+  border: $toolbarItem__SelectedBorder !important;
+}
+
+@mixin dropdownItem {
+  min-height: $dropdownItem__Height;
+  background-color: $dropdownItem__BackgroundColor;
+  color: $dropdownItem__TextColor;
+  margin: $dropdownItem__Margin;
+  min-height: $dropdownItem__Height;
+  width: calc(100% - 2 * $dropdownItem__Margin);
+  border: none;
+  border: $dropdownItem__Border;
+  border-radius: $dropdownItem__BorderRadius;
+}
+
+@mixin dropdownItem__Hover {
+  color: $dropdownItem__HoverTextColor;
+  background-color: $dropdownItem__HoverBackgroundColor;
+  border: $dropdownItem__HoverBorder;
+}

package/scss/themes/default/_theme.scss

@@ -0,0 +1,161 @@
+$toolbar-bg: var(--pwv-ui-color-100);
+$toolbar-hoverBg: var(--pwv-ui-color-200);
+
+/***********************
+ * viewer
+ ***********************/
+$viewer__BackgroundColor: var(--pwv-ui-color-200);
+$viewer__TextColor: var(--pwv-text-color);
+$viewer__FontSize: inherit;
+$viewer__FontFamily: inherit;
+
+$viewer__DocumentBackgroundColor: var(--pwv-ui-color-200);
+$viewer__DocumentBusyIndicatorColor: var(--pwv-brand-color-500);
+
+/***********************
+ * dialog
+ ***********************/
+$modal__BackgroundColor: var(--pwv-brand-color-500);
+
+$dialog__BackgroundColor: var(--pwv-brand-color-500);
+$dialog__TextColor: var(--pwv-text-contrast-color);
+
+$dialog__FormFieldBackgroundColor: var(--pwv-text-contrast-color);
+$dialog__FormFieldTextColor: var(--pwv-text-color);
+$dialog__FormFieldErrorColor: red;
+$dialog__FormFieldErrorBackgroundColor: var(--pwv-ui-color-200);
+
+$dialog__Border: dashed 2px var(--pwv-brand-color-400);
+$dialog__DragOverBorder: dashed 2px var(--pwv-brand-color-200);
+$dialog__BorderRadius: 20px;
+
+/***********************
+* button
+***********************/
+
+$button__TextColor: $dialog__TextColor;
+$button__BackgroundColor: transparent;
+$button__Border: 1px solid var(--pwv-brand-color-400);
+$button__BorderRadius: 8px;
+$button__Height: 42px;
+
+// hover state
+$button__HoverTextColor: $dialog__TextColor;
+$button__HoverBackgroundColor: transparent;
+$button__HoverBorder: 1px solid var(--pwv-brand-color-100);
+
+// active state
+$button__ActiveTextColor: $dialog__TextColor;
+$button__ActiveBackgroundColor: transparent;
+$button__ActiveBorder: 1px solid var(--pwv-brand-color-100);
+
+// focus state
+$button__FocusTextColor: $dialog__TextColor;
+$button__FocusBackgroundColor: transparent;
+$button__FocusBorder: 1px solid var(--pwv-brand-color-100);
+
+// disabled state
+$button__DisabledTextColor: $dialog__TextColor;
+$button__DisabledBackgroundColor: transparent;
+$button__DisabledBorder: solid 1px var(--pwv-brand-color-100);
+
+/***********************
+* popup
+***********************/
+
+$popup__BackgroundColor: var(--pwv-ui-color-200);
+$popup__TextColor: var(--pwv-text-color);
+$popup__DropShadow: var(--pwv-drop-shadow-3);
+$popup__FormFieldBackgroundColor: var(--pwv-text-contrast-color);
+$popup__FormFieldTextColor: var(--pwv-text-color);
+$popup__FormFieldBorder: none;
+
+/***********************
+ * toolbar
+ ***********************/
+$toolbar__BackgroundColor: $toolbar-bg;
+$toolbar__TextColor: var(--pwv-text-color);
+$toolbar__TextMutedColor: var(--pwv-text-muted-color);
+
+// default state
+$toolbarItem__height: 42px;
+$toolbarItem__MinWidth: 42px;
+$toolbarItem__Margin: 4px;
+$toolbarItem__TextColor: var(--pwv-text-color);
+$toolbarItem__BackgroundColor: $toolbar-bg;
+$toolbarItem__Border: solid 1px transparent;
+$toolbarItem__BorderRadius: 0.5rem;
+$toolbarItem__IconSize: 1rem;
+$toolbarItem__CursorStyle: default;
+
+// hover state
+$toolbarItem__HoverTextColor: var(--pwv-text-color);
+$toolbarItem__HoverBackgroundColor: $toolbar-hoverBg;
+$toolbarItem__HoverBorder: solid 1px transparent;
+
+// active state
+$toolbarItem__ActiveTextColor: var(--pwv-brand-color-700);
+$toolbarItem__ActiveBackgroundColor: $toolbar-hoverBg;
+$toolbarItem__ActiveBorder: solid 1px transparent;
+
+// focus state
+$toolbarItem__FocusTextColor: var(--pwv-text-color);
+$toolbarItem__FocusBackgroundColor: $toolbar-hoverBg;
+$toolbarItem__FocusBorder: solid 1px transparent;
+
+// selected state
+$toolbarItem__SelectedTextColor: var(--pwv-brand-color-500);
+$toolbarItem__SelectedBackgroundColor: $toolbar-hoverBg;
+$toolbarItem__SelectedBorder: solid 1px transparent;
+
+// disabled state
+$toolbarItem__DisabledTextColor: var(--pwv-text-muted-color) !important;
+$toolbarItem__DisabledBackgroundColor: $toolbar-bg;
+$toolbarItem__DisabledBorder: solid 1px transparent;
+
+/***********************
+ * dropdown
+ ***********************/
+
+$dropdownPanel__BackgroundColor: $toolbar-bg;
+
+$dropdownItem__BackgroundColor: $toolbar-bg;
+$dropdownItem__TextColor: var(--pwv-text-color);
+$dropdownItem__Height: 42px;
+$dropdownItem__Margin: 4px;
+$dropdownItem__Border: solid 1px transparent;
+$dropdownItem__BorderRadius: 0.5rem;
+$dropdownItem__IconSize: 1rem;
+
+// hover state
+$dropdownItem__HoverTextColor: var(--pwv-brand-color-600);
+$dropdownItem__HoverBackgroundColor: var(--pwv-ui-color-200);
+$dropdownItem__HoverBorder: solid 1px transparent;
+
+/***********************
+ * scrollbar
+ ***********************/
+
+$scrollBar__Size: 4px;
+$scrollBar__ExpandedSize: 15px;
+$scrollBar__BackgroundColor: var(--pwv-ui-color-300);
+$scrollHandle__BackgroundColor: var(--pwv-ui-color-400);
+$scrollHandle__ActiveBackgroundColor: var(--pwv-brand-color-500);
+
+/***********************
+ * acroForms
+ ***********************/
+$acroForms__BackgroundColor: var(--pwv-text-contrast-color);
+$acroForms__Border: dotted 2px var(--pwv-selection-color);
+
+/***********************
+ * loader
+ ***********************/
+$loader-color-1: var(--pwv-ui-color-300);
+$loader-color-2: var(--pwv-ui-color-400);
+
+@import './mixins';
+@import '../../common/index';
+@import '../../modules/index';
+@import '../../pdf-viewer-canvas/index';
+@import '../../pdf-web-viewer/index';

package/scss/themes/pdf-web-viewer.scss

@@ -0,0 +1 @@
+@import './default/light';