lupine.web 1.0.16 → 1.0.17

package/src/styles/dark-themes.ts

@@ -1,86 +0,0 @@
-import { sharedThemes } from './shared-themes';
-import { ThemeProps } from '../models';
-
-export const darkThemes: ThemeProps = {
-  ...sharedThemes,
-  '--theme-name': 'dark',
-
-  '--scrollbar-bg': '#1c1c1c',
-  '--scrollbar-thumb-bg': '#373636',
-  '--scrollbar-active-thumb-bg': '#5b5b5b',
-
-  '--primary-color': '#aeaeae',
-  '--primary-color-disabled': '#7d7d7d',
-  '--primary-bg-color': '#000000',
-  '--primary-border-color': '#aeaeae',
-  '--primary-border': '1px solid var(--primary-border-color)',
-  // '--secondary-color': '#b3b3b3',
-  // '--secondary-bg-color': '#151515',
-  // '--secondary-border': '1px solid #303030',
-  '--primary-opacity': '0.5', // used for dark theme
-  '--primary-disabled-opacity': '0.7', // used for dark theme
-  '--primary-accent-color': '#0c3c63', // used for radio and checkbox's background color
-
-  // including menus, tabs
-  '--activatable-color-normal': 'var(--primary-color)',
-  '--activatable-bg-color-normal': 'var(--primary-bg-color)',
-  '--activatable-color-hover': '#e2e2e2',
-  '--activatable-bg-color-hover': '#6d6d6d',
-  '--activatable-color-selected': '#c2c2c2',
-  '--activatable-bg-color-selected': '#5d5d5d',
-  // '--menu-color-hover': '#303030',
-  // '--menu-color': 'var(--primary-color)',  //'#2a2a2a',
-  // '--menu-bg-color': 'var(--primary-bg-color)',  //'#2a2a2a',
-  // '--menu-bg-color-hover': '#a0a0a0',
-  '--menu-font-size': '1rem',
-  '--menubar-color': '#eeeeee',
-  '--menubar-bg-color': '#000000',
-  '--menubar-sub-bg-color': '#f9f9f9',
-  '--sidebar-color': 'var(--primary-color)',
-  '--sidebar-bg-color': '#000000',
-  // '--sidebar-sub-color': 'var(--sidebar-color)',
-  // '--sidebar-sub-bg-color': '#000000',
-  '--sidebar-border': '1px solid #303030',
-  // '--sidebar-hover-color': 'var(--sidebar-color)',
-  // '--sidebar-hover-bg-color': '#000000',
-
-  '--row-1-bg-color': '#212121',
-  '--row-2-bg-color': '#303030',
-  '--row-hover-bg-color': '#383838',
-
-  '--success-color': '#04AA6D',
-  '--info-color': '#2196F3',
-  '--warning-color': '#ff9800',
-  '--error-color': '#f44336',
-  '--success-bg-color': '#10553b',
-  '--info-bg-color': '#1a588a',
-  '--warning-bg-color': '#a36305',
-  '--error-bg-color': '#882c25',
-  '--notice-color-with-bg': '#ececec',
-
-  '--cover-mask-bg-color': '#878a9460',
-  '--cover-bg-color': '#202020',
-  '--cover-box-shadow': '1px 1px 4px #c6c6c6',
-
-  '--input-color': '#bdbdbd',
-  '--input-bg-color': '#000000',
-  '--input-box-shadow': '0px 0px 0px #000000, 1px 1px 0px 0px #50505045',
-  '--input-border-focus': '1px solid #0074d9',
-
-  '--button-color': '#bdbdbd',
-  '--button-bg': '-webkit-linear-gradient(top, #282828 0%, #212223 74%, #1a1a1a 100%)', // darker
-  '--button-bg-hover': '-webkit-linear-gradient(top, #282828 0%, #313233 74%, #252525 100%)', // darker
-  // '--button-bg': '-webkit-linear-gradient(top, #414141 0%, #373e48 74%, #434242 100%)',
-  '--button-border': '1px solid #373e48',
-  '--button-box-shadow': 'unset',
-
-  '--header-color': '#000080',
-  '--header-bg-color': '#000000',
-
-  // '--background-primary': '#353536', //	Primary background
-  // '--color-primary': '#e0e0e0', //	Primary text color
-  // backgroundPrimary: '', //	Primary background
-  // backgroundOnPrimary: '', //	Background for surfaces on top of primary background
-  // backgroundSecondary: '#f5f5f6', //	Secondary background
-  // backgroundOnSecondary: '#e5e5e6', //	Background for surfaces on top of secondary background
-};

package/src/styles/light-themes.ts

@@ -1,93 +0,0 @@
-import { sharedThemes } from './shared-themes';
-import { ThemeProps } from '../models';
-
-export const lightThemes: ThemeProps = {
-  ...sharedThemes,
-  '--theme-name': 'light',
-
-  // scroll bar
-  '--scrollbar-bg': '#d5d5d5',
-  '--scrollbar-thumb-bg': '#979797',
-  '--scrollbar-active-thumb-bg': '#737373',
-
-  '--primary-color': '#303030',
-  '--primary-color-disabled': '#a0a0a0',
-  '--primary-bg-color': '#ffffff',
-  '--primary-border-color': '#858585',
-  '--primary-border': '1px solid var(--primary-border-color)',
-  // '--secondary-color': '#505050',
-  // '--secondary-bg-color': '#ffffff',
-  // '--secondary-border': '1px solid #858585',
-  '--primary-opacity': 'unset', // used for dark theme
-  '--primary-disabled-opacity': '0.5', // used for dark theme
-  '--primary-accent-color': '#0a74c9', // used for radio and checkbox's background color
-
-  // including menus, tabs, sidebars
-  '--activatable-color-normal': 'var(--primary-color)',
-  '--activatable-bg-color-normal': 'var(--primary-bg-color)',
-  '--activatable-color-hover': '#1d1d1d',
-  '--activatable-bg-color-hover': '#bcbcbc',
-  '--activatable-color-selected': '#2d2d2d',
-  '--activatable-bg-color-selected': '#dcdcdc',
-  // '--menu-color-hover': '#303030',
-  // '--menu-bg-color': '#ffffff',
-  // '--menu-bg-color-hover': '#a0a0a0',
-  '--menu-font-size': '1rem',
-  '--menubar-color': '#eeeeee',
-  '--menubar-bg-color': '#000000',
-  '--menubar-sub-bg-color': '#f9f9f9',
-  '--sidebar-color': 'var(--primary-color)',
-  '--sidebar-bg-color': '#f4f3f4',
-  // '--sidebar-sub-color': 'var(--sidebar-color)',
-  // '--sidebar-sub-bg-color': '#eaeaea',
-  '--sidebar-border': '1px solid #858585',
-  // '--sidebar-hover-color': 'var(--sidebar-color)',
-  // '--sidebar-hover-bg-color': '#e0e0e0',
-
-  '--row-bg-color1': '#ffffff',
-  '--row-bg-color2': '#ffffff',
-
-  '--success-color': '#04AA6D',
-  '--info-color': '#2196F3',
-  '--warning-color': '#ff9800',
-  '--error-color': '#f44336',
-  '--success-bg-color': '#04AA6D',
-  '--info-bg-color': '#2196F3',
-  '--warning-bg-color': '#ff9800',
-  '--error-bg-color': '#f44336',
-  '--notice-color-with-bg': '#ffffff',
-
-  '--cover-mask-bg-color': '#00000060',
-  '--cover-bg-color': '#f5f5f5',
-  '--cover-box-shadow': '3px 3px 8px #767676',
-
-  // for input, checkbox, radio box, select
-  '--input-color': '#4e4e4e',
-  '--input-bg-color': '#ffffff',
-  '--input-box-shadow': '0px 0px 0px #000000, 1px 1px 0px 0px #50505045',
-  '--input-border-focus': '1px solid #0074d9',
-
-  // for button, div
-  '--button-color': '#4e4e4e',
-  '--button-bg': '-webkit-linear-gradient(top, #ffffff 0%, #f6f6f6 74%, #ededed 100%)',
-  '--button-bg-hover': '-webkit-linear-gradient(top, #ffffff 0%, #e6e6e6 74%, #dddddd 100%)',
-  '--button-border': '1px solid #f6f6f6',
-  '--button-box-shadow': '1px 1px 1px #00000085, 0px 1px 0px 2px #0705053b',
-
-  '--header-color': '#000080',
-  '--header-bg-color': '#ffffff',
-
-  // '--po-background': '#e5e5e5', //	Background for surfaces on top of primary background
-  // // backgroundSecondary: '#f5f5f5', //	Secondary background
-  // // backgroundOnSecondary: '#e5e5e5', //	Background for surfaces on top of secondary background
-  // '--background-modifier-hover': '', //	Hovered elements
-  // '--background-modifier-active-hover': '', //	Active hovered elements
-  // '--background-modifier-border': '', //	Border color
-  // '--background-modifier-border-hover': '', //	Border color (hover)
-  // '--background-modifier-border-focus': '', //	Border color (focus)
-  // '--background-modifier-error': '', //	Error background
-  // '--background-modifier-error-hover': '', //	Error background (hover)
-  // '--background-modifier-success': '', //	Success background
-  // '--background-modifier-message': '', //	Messages background
-  // '--background-modifier-form-field': '', //	Form field background
-};

package/src/styles/media-query.ts

@@ -1,93 +0,0 @@
-// export enum MediaQuery {
-//   ExtraSmall = "@media only screen and (max-width: 480px)",
-//   Mobile = "@media only screen and (min-width: 481px) and (max-width: 767px)",
-//   Tablet = "@media only screen and (min-width: 768px) and (max-width: 991px)",
-//   Desktop = "@media only screen and (min-width: 992px) and (max-width: 1399px)",
-//   ExtraLarge = "@media only screen and (min-width: 1400px)",
-// }
-
-/*
---> Bootstrap – 576px, 768px, 992px, 1200px, 1400px
-Tailwind - 640px, 768px, 1024px, 1280px, 1536px
-Foundation: <640px, ≥640px, ≥1200px
-Bulma: <769px, ≥769px, ≥1024px, ≥1216px, and ≥1408px
-Semantic UI: <768px, ≥768px, ≥992px, ≥1400px, ≥1920px
-Primer: <544px, ≥544px, ≥768px, ≥1012px, ≥1280px
-UIKit: <479px, ≥480px, ≥768px, ≥960px, ≥1200px
-*/
-
-export class MediaQueryMaxWidth {
-  private static _ExtraSmall = '480px';
-  private static _Mobile = '767px'; // Grid: col-1, 12
-  private static _Tablet = '991px'; // Grid: col-1-md, 12-md
-  private static _Desktop = '1399px'; // Grid: col-1-lg, 12-lg
-  public static get ExtraSmallMax() {
-    return MediaQueryMaxWidth._ExtraSmall;
-  }
-  public static get MobileMax() {
-    return MediaQueryMaxWidth._Mobile;
-  }
-  public static get TabletMax() {
-    return MediaQueryMaxWidth._Tablet;
-  }
-  public static get DesktopMax() {
-    return MediaQueryMaxWidth._Desktop;
-  }
-
-  public static set ExtraSmallMax(value: string) {
-    MediaQueryMaxWidth._ExtraSmall = value;
-  }
-  public static set MobileMax(value: string) {
-    MediaQueryMaxWidth._Mobile = value;
-  }
-  public static set TabletMax(value: string) {
-    MediaQueryMaxWidth._Tablet = value;
-  }
-  public static set DesktopMax(value: string) {
-    MediaQueryMaxWidth._Desktop = value;
-  }
-}
-export class MediaQueryRange {
-  public static get ExtraSmallBelow() {
-    return `@media only screen and (max-width: ${MediaQueryMaxWidth.ExtraSmallMax})`;
-  }
-  public static get ExtraSmallAbove() {
-    return `@media only screen and (min-width: ${MediaQueryMaxWidth.ExtraSmallMax})`;
-  }
-  public static get MobileBelow() {
-    return `@media only screen and (max-width: ${MediaQueryMaxWidth.MobileMax})`;
-  }
-  public static get MobileAbove() {
-    return `@media only screen and (min-width: ${MediaQueryMaxWidth.MobileMax})`;
-  }
-  public static get TabletBelow() {
-    return `@media only screen and (max-width: ${MediaQueryMaxWidth.TabletMax})`;
-  }
-  public static get TabletAbove() {
-    return `@media only screen and (min-width: ${MediaQueryMaxWidth.TabletMax})`;
-  }
-  public static get DesktopBelow() {
-    return `@media only screen and (max-width: ${MediaQueryMaxWidth.DesktopMax})`;
-  }
-  public static get DesktopAbove() {
-    return `@media only screen and (min-width: ${MediaQueryMaxWidth.DesktopMax})`;
-  }
-}
-
-export enum MediaQueryDirection {
-  Below,
-  Above,
-}
-export function adjustedMediaQueryRange(
-  direction: MediaQueryDirection,
-  mediaQueryWidth: string,
-  adjustWidth: number
-): string {
-  const adjustedWidth = Number.parseInt(mediaQueryWidth) + adjustWidth;
-  if (direction === MediaQueryDirection.Below) {
-    return `@media only screen and (max-width: ${adjustedWidth}px)`;
-  } else {
-    // if (direction === MediaQueryRangeDirection.Above) {
-    return `@media only screen and (min-width: ${adjustedWidth}px)`;
-  }
-}

package/src/styles/shared-themes.ts

@@ -1,52 +0,0 @@
-import { ThemeProps } from "../models";
-
-export const sharedThemes: ThemeProps = {
-  // z-index
-  '--layer-cover': '10',
-  '--layer-sidebar': '100',
-  '--layer-sidebar-sub': '110',
-  '--layer-float-window': '200',
-  '--layer-modal': '300',
-  '--layer-modal-over': '310',
-  '--layer-menu': '400', // popup menu
-  '--layer-menu-sub': '410',
-  '--layer-notice': '500',
-  '--layer-tooltip': '510',
-  '--layer-dragged-item': '600',
-
-  '--font-size-base': '16px',
-  '--font-weight-base': '', //'400',
-  '--font-family-base': 'SimSun, "Microsoft YaHei", Helvetica, Arial, sans-serif',
-  '--line-height-base': '1.1',
-
-  '--font-size-h1-l': '2.5rem', //40px
-  '--font-size-h1': '2rem', //32px
-  '--font-size-h2': '1.5rem', //24px
-  '--font-size-h3': '1.17rem', //18.72px
-  '--font-size-h3-5': '1.08rem', //17.28px
-  '--font-size-h4': '1rem', //16px
-  '--font-size-h4-5': '.91rem', //14.56px
-  '--font-size-h5': '.83rem', //13.28px
-  '--font-size-h6': '.67rem', //10.72px
-  '--font-size-h6-s': '.55rem', //9.28px
-  '--font-size-title': 'var(--font-size-h2)',
-  '--font-size-subtitle': 'var(--font-size-h3-5)',
-  '--font-size-paragraph': 'var(--font-size-h4)',
-  '--font-size-paragraph-s': 'var(--font-size-h5)',
-
-  '--input-height': '2.2rem',
-  '--input-padding': '.3rem .6rem',
-  '--button-height': '2.1rem',
-  '--button-padding': '.3rem .9rem',
-
-  // space for margin, padding
-  '--space-ss': '.15rem',
-  '--space-s': '.25rem',
-  '--space-m': '.5rem',
-  '--space-l': '1rem',
-  '--space-ll': '2rem',
-
-  '--border-radius-s': '2px',
-  '--border-radius-m': '4px',
-  '--border-radius-l': '8px',
-};