Skip to content

DWC Changes for all custom css properties with -bbj to -dwc #193

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Tewil wants to merge 1 commit into
base: master
Choose a base branch
from
Open

DWC Changes for all custom css properties with -bbj to -dwc #193

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
194 changes: 97 additions & 97 deletions css/webkit.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
:root {
--bbj-font-family: 'Lato';
--dwc-font-family: 'Lato';
--tiles-font-color: #333e40 CC;
--menutile-background: rgba(255, 255, 255, 0.6);
--menutile-hover-color: rgba(227, 230, 232, 0.664);
Expand Down Expand Up @@ -58,124 +58,124 @@ iframe {

html[data-app-theme='dark'] {
color-scheme: dark;
--dashboardHeader-background: var(--bbj-color-default);
--loginWidgetPanelStyle-background: var(--bbj-color-default);
--menuTilesBox-background: var(--bbj-color-default);
--portalFrame-background: var(--bbj-window-background);
--inputFieldStyleInputWrapper-background: var(--bbj-color-default-light) --button-background: rgba(255, 255, 255, 0.1);
--dashboardHeader-background: var(--dwc-color-default);
--loginWidgetPanelStyle-background: var(--dwc-color-default);
--menuTilesBox-background: var(--dwc-color-default);
--portalFrame-background: var(--dwc-window-background);
--inputFieldStyleInputWrapper-background: var(--dwc-color-default-light) --button-background: rgba(255, 255, 255, 0.1);
--tiles-font-color: #f1f1f1;
--menutile-background: rgba(255, 255, 255, 0.1);
--drawer-color: var(--bbj-color-default);
--bbj-color-black: #170d0d;
--bbj-color-white: #d9c9c9;
--bbj-focus-ring-lightness: 60%;
--bbj-color-primary-saturation: 75%;
--bbj-color-primary-contrast-threshold: 55;
--bbj-color-success-saturation: 75%;
--bbj-color-success-contrast-threshold: 35;
--bbj-color-info-saturation: 75%;
--bbj-color-info-contrast-threshold: 60;
--bbj-color-warning-saturation: 75%;
--bbj-color-warning-contrast-threshold: 35;
--bbj-color-danger-saturation: 75%;
--bbj-color-danger-contrast-threshold: 55;
--bbj-color-primary-text-dark: var(--bbj-color-primary-65);
--bbj-color-primary-text: var(--bbj-color-primary-70);
--bbj-color-primary-text-light: var(--bbj-color-primary-75);
--bbj-color-success-text-dark: var(--bbj-color-success-65);
--bbj-color-success-text: var(--bbj-color-success-70);
--bbj-color-success-text-light: var(--bbj-color-success-75);
--bbj-color-warning-text-dark: var(--bbj-color-warning-65);
--bbj-color-warning-text: var(--bbj-color-warning-70);
--bbj-color-warning-text-light: var(--bbj-color-warning-75);
--bbj-color-danger-text-dark: var(--bbj-color-danger-65);
--bbj-color-danger-text: var(--bbj-color-danger-70);
--bbj-color-danger-text-light: var(--bbj-color-danger-75);
--bbj-color-info-text-dark: var(--bbj-color-info-65);
--bbj-color-info-text: var(--bbj-color-info-70);
--bbj-color-info-text-light: var(--bbj-color-info-75);
--bbj-color-gray-text-dark: var(--bbj-color-gray-65);
--bbj-color-gray-text: var(--bbj-color-gray-70);
--bbj-color-gray-text-light: var(--bbj-color-gray-75);
--bbj-color-default-dark: var(--bbj-color-default-10);
--bbj-color-on-default-text-dark: var(--bbj-color-default-text-10);
--bbj-color-default-text-dark: var(--bbj-color-default-65);
--bbj-color-default: var(--bbj-color-default-15);
--bbj-color-on-default-text: var(--bbj-color-default-text-15);
--bbj-color-default-text: var(--bbj-color-default-70);
--bbj-color-default-light: var(--bbj-color-default-20);
--bbj-color-on-default-text-light: var(--bbj-color-default-text-20);
--bbj-color-default-text-light: var(--bbj-color-default-75);
--bbj-shadow-xs: 0 0 1px var(--bbj-color-default-5);
--bbj-shadow-s: 0 1px 2px var(--bbj-color-default-10);
--bbj-shadow-m: 0 2px 4px var(--bbj-color-default-10);
--bbj-shadow-l: 0 2px 8px var(--bbj-color-default-10);
--bbj-shadow-xl: 0 4px 16px var(--bbj-color-default-10);
--bbj-shadow-xxl: 0 8px 32px var(--bbj-color-default-10);
--bbj-disabled-opacity: 0.6;
--bbj-input-label-color: var(--bbj-color-white);
--bbj-input-color: var(--bbj-color-default-80);
--bbj-input-placeholder-color: var(--bbj-color-gray-60);
--bbj-input-valid-color: var(--bbj-color-success-text-25);
--bbj-input-valid-background-color: var(--bbj-color-success-25);
--bbj-input-valid-placeholder-color: var(--bbj-color-gray-95);
--bbj-input-invalid-color: var(--bbj-color-danger-text-25);
--bbj-input-invalid-background-color: var(--bbj-color-danger-25);
--bbj-input-invalid-placeholder-color: var(--bbj-color-gray-70);
--bbj-input-spinner-color: var(--bbj-color-default-90);
--bbj-calendar-background: var(--bbj-color-default);
--bbj-calendar-border-color: var(--bbj-color-default-light);
--bbj-calendar-month-foreground: var(--bbj-color-white);
--bbj-button-color-on-default-text-dark: var(--bbj-color-primary-80);
--bbj-button-color-on-default-text: var(--bbj-color-primary-75);
--bbj-button-color-on-default-text-light: var(--bbj-color-primary-70);
--bbj-checkbox-label-color: var(--bbj-input-label-color);
--bbj-radio-label-color: var(--bbj-input-label-color);
--bbj-list-background-color: var(--bbj-color-default);
--bbj-list-item-color: var(--bbj-color-white);
--bbj-list-border-color: var(--bbj-color-default-light);
--bbj-dialog-background: var(--bbj-color-default-light);
--bbj-menubar-shadow: 0 2px 2px var(--bbj-color-gray-20);
--bbj-menubar-right-advancer-background: var(--bbj-color-default);
--bbj-menubar-left-advancer-background: var(--bbj-color-default);
--bbj-menu-background-color: var(--bbj-color-default);
--bbj-menu-border-color: var(--bbj-color-default-light);
--bbj-separator-border-color: var(--bbj-color-default-light);
--bbj-tabs-list-advancer-color: var(--bbj-color-white);
--bbj-tabs-list-right-advancer-background: var(--bbj-color-black);
--bbj-tabs-list-left-advancer-background: var(--bbj-color-black);
--bbj-tabs-list-top-advancer-background: var(--bbj-color-black);
--bbj-tabs-list-bottom-advancer-background: var(--bbj-color-black);
--bbj-tree-icon-background: var(--bbj-color-black);
--bbj-tree-icon-fill: var(--bbj-color-default-70);
--bbj-popover-background: var(--bbj-color-default-light);
--drawer-color: var(--dwc-color-default);
--dwc-color-black: #170d0d;
--dwc-color-white: #d9c9c9;
--dwc-focus-ring-lightness: 60%;
--dwc-color-primary-saturation: 75%;
--dwc-color-primary-contrast-threshold: 55;
--dwc-color-success-saturation: 75%;
--dwc-color-success-contrast-threshold: 35;
--dwc-color-info-saturation: 75%;
--dwc-color-info-contrast-threshold: 60;
--dwc-color-warning-saturation: 75%;
--dwc-color-warning-contrast-threshold: 35;
--dwc-color-danger-saturation: 75%;
--dwc-color-danger-contrast-threshold: 55;
--dwc-color-primary-text-dark: var(--dwc-color-primary-65);
--dwc-color-primary-text: var(--dwc-color-primary-70);
--dwc-color-primary-text-light: var(--dwc-color-primary-75);
--dwc-color-success-text-dark: var(--dwc-color-success-65);
--dwc-color-success-text: var(--dwc-color-success-70);
--dwc-color-success-text-light: var(--dwc-color-success-75);
--dwc-color-warning-text-dark: var(--dwc-color-warning-65);
--dwc-color-warning-text: var(--dwc-color-warning-70);
--dwc-color-warning-text-light: var(--dwc-color-warning-75);
--dwc-color-danger-text-dark: var(--dwc-color-danger-65);
--dwc-color-danger-text: var(--dwc-color-danger-70);
--dwc-color-danger-text-light: var(--dwc-color-danger-75);
--dwc-color-info-text-dark: var(--dwc-color-info-65);
--dwc-color-info-text: var(--dwc-color-info-70);
--dwc-color-info-text-light: var(--dwc-color-info-75);
--dwc-color-gray-text-dark: var(--dwc-color-gray-65);
--dwc-color-gray-text: var(--dwc-color-gray-70);
--dwc-color-gray-text-light: var(--dwc-color-gray-75);
--dwc-color-default-dark: var(--dwc-color-default-10);
--dwc-color-on-default-text-dark: var(--dwc-color-default-text-10);
--dwc-color-default-text-dark: var(--dwc-color-default-65);
--dwc-color-default: var(--dwc-color-default-15);
--dwc-color-on-default-text: var(--dwc-color-default-text-15);
--dwc-color-default-text: var(--dwc-color-default-70);
--dwc-color-default-light: var(--dwc-color-default-20);
--dwc-color-on-default-text-light: var(--dwc-color-default-text-20);
--dwc-color-default-text-light: var(--dwc-color-default-75);
--dwc-shadow-xs: 0 0 1px var(--dwc-color-default-5);
--dwc-shadow-s: 0 1px 2px var(--dwc-color-default-10);
--dwc-shadow-m: 0 2px 4px var(--dwc-color-default-10);
--dwc-shadow-l: 0 2px 8px var(--dwc-color-default-10);
--dwc-shadow-xl: 0 4px 16px var(--dwc-color-default-10);
--dwc-shadow-xxl: 0 8px 32px var(--dwc-color-default-10);
--dwc-disabled-opacity: 0.6;
--dwc-input-label-color: var(--dwc-color-white);
--dwc-input-color: var(--dwc-color-default-80);
--dwc-input-placeholder-color: var(--dwc-color-gray-60);
--dwc-input-valid-color: var(--dwc-color-success-text-25);
--dwc-input-valid-background-color: var(--dwc-color-success-25);
--dwc-input-valid-placeholder-color: var(--dwc-color-gray-95);
--dwc-input-invalid-color: var(--dwc-color-danger-text-25);
--dwc-input-invalid-background-color: var(--dwc-color-danger-25);
--dwc-input-invalid-placeholder-color: var(--dwc-color-gray-70);
--dwc-input-spinner-color: var(--dwc-color-default-90);
--dwc-calendar-background: var(--dwc-color-default);
--dwc-calendar-border-color: var(--dwc-color-default-light);
--dwc-calendar-month-foreground: var(--dwc-color-white);
--dwc-button-color-on-default-text-dark: var(--dwc-color-primary-80);
--dwc-button-color-on-default-text: var(--dwc-color-primary-75);
--dwc-button-color-on-default-text-light: var(--dwc-color-primary-70);
--dwc-checkbox-label-color: var(--dwc-input-label-color);
--dwc-radio-label-color: var(--dwc-input-label-color);
--dwc-listbox-background-color: var(--dwc-color-default);
--dwc-listbox-item-color: var(--dwc-color-white);
--dwc-listbox-border-color: var(--dwc-color-default-light);
--dwc-dialog-background: var(--dwc-color-default-light);
--dwc-menubar-shadow: 0 2px 2px var(--dwc-color-gray-20);
--dwc-menubar-right-advancer-background: var(--dwc-color-default);
--dwc-menubar-left-advancer-background: var(--dwc-color-default);
--dwc-menu-background-color: var(--dwc-color-default);
--dwc-menu-border-color: var(--dwc-color-default-light);
--dwc-separator-border-color: var(--dwc-color-default-light);
--dwc-tabs-list-advancer-color: var(--dwc-color-white);
--dwc-tabs-list-right-advancer-background: var(--dwc-color-black);
--dwc-tabs-list-left-advancer-background: var(--dwc-color-black);
--dwc-tabs-list-top-advancer-background: var(--dwc-color-black);
--dwc-tabs-list-bottom-advancer-background: var(--dwc-color-black);
--dwc-tree-icon-background: var(--dwc-color-black);
--dwc-tree-icon-fill: var(--dwc-color-default-70);
--dwc-popover-background: var(--dwc-color-default-light);
}

html[data-app-theme='dark'] .dropdown__menu::part(control),
html[data-app-theme='dark'] .dropdown__menu::part(control):hover,
html[data-app-theme='dark'] .dropdown__menu::part(control):focus,
html[data-app-theme='dark'] .dropdown__menu::part(control):focus-within {
border-color: var(--bbj-color-default-light);
border-color: var(--dwc-color-default-light);
}

html[data-app-theme='dark'] bbj-slider::part(control) {
border-color: transparent;
}

html[data-app-theme='dark'] bbj-slider::part(noUi-tooltip) {
background: var(--bbj-color-default-light);
background: var(--dwc-color-default-light);
}

html[data-app-theme='dark'] bbj-dialog[theme='default'] header {
background-color: var(--bbj-dialog-background);
color: var(--bbj-color-white);
background-color: var(--dwc-dialog-background);
color: var(--dwc-color-white);
}

html[data-app-theme='dark'] bbj-menubar {
background-color: var(--bbj-color-default);
background-color: var(--dwc-color-default);
}

html[data-app-theme='dark'] body {
background: var(--bbj-color-black);
color: var(--bbj-color-white);
background: var(--dwc-color-black);
color: var(--dwc-color-white);
}
Loading