@opentiny/vue-theme 3.1.0-alpha.1 → 3.5.0-alpha.0

package/theme/devui-theme-map.js

@@ -0,0 +1,164 @@
+/**
+* Copyright (c) 2022 - present TinyVue Authors.
+* Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
+*
+* Use of this source code is governed by an MIT-style license.
+*
+* THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+* BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+*
+*/
+
+// 全量 DevUI 主题变量对应的 Tiny 主题变量
+export const DEVUI_THEME_MAP = {
+  'devui-global-bg': '#f3f6f8',
+  'devui-glass-morphism-bg': 'rgba(243,246,248,0.9)',
+  'devui-global-bg-normal': '#ffffff',
+  'devui-base-bg': '#ffffff',
+  'devui-base-bg-dark': '#333854',
+  'devui-brand': 'ti-base-color-brand-6',
+  'devui-brand-foil': '#859bff',
+  'devui-brand-hover': '#7693f5',
+  'devui-brand-active': '#526ecc',
+  'devui-brand-active-focus': '#344899',
+  'devui-contrast': '#c7000b',
+  'devui-text': 'ti-base-color-common-7',
+  'devui-text-weak': '#575d6c',
+  'devui-aide-text': '#8a8e99',
+  'devui-aide-text-hover': '#252b3a',
+  'devui-aide-text-stress': '#575d6c',
+  'devui-placeholder': '#8a8e99',
+  'devui-light-text': '#ffffff',
+  'devui-dark-text': '#252b3a',
+  'devui-link': '#526ecc',
+  'devui-link-active': '#344899',
+  'devui-link-light': '#96adfa',
+  'devui-link-light-active': '#beccfa',
+  'devui-line': '#adb0b8',
+  'devui-dividing-line': 'ti-common-color-line-dividing',
+  'devui-block': '#ffffff',
+  'devui-area': '#f8f8f8',
+  'devui-danger': '#f66f6a',
+  'devui-warning': '#fac20a',
+  'devui-waiting': '#9faad7',
+  'devui-success': '#50d4ab',
+  'devui-info': '#5e7ce0',
+  'devui-initial': '#e9edfa',
+  'devui-unavailable': '#f5f5f6',
+  'devui-shadow': 'rgba(37, 43, 58, 0.2)',
+  'devui-light-shadow': 'rgba(37, 43, 58, 0.1)',
+  'devui-connected-overlay-shadow': 'rgba(37, 43, 58, 0.12)',
+  'devui-feedback-overlay-shadow': 'rgba(37, 43, 58, 0.16)',
+  'devui-icon-text': '#252b3a',
+  'devui-icon-bg': '#ffffff',
+  'devui-icon-fill': '#252b3a',
+  'devui-icon-fill-weak': '#babbc0',
+  'devui-icon-fill-hover': '#5e7ce0',
+  'devui-icon-fill-active': '#5e7ce0',
+  'devui-icon-fill-active-hover': 'ti-grid-icon-fill-hover-bg-color',
+  'devui-shape-icon-fill': '#d7d8da',
+  'devui-shape-icon-fill-active': '#babbc0',
+  'devui-shape-icon-fill-hover': '#babbc0',
+  'devui-shape-icon-fill-disabled': '#f5f5f5',
+  'devui-form-control-line': '#adb0b8',
+  'devui-form-control-bg': '#ffffff',
+  'devui-form-control-line-hover': '#575d6c',
+  'devui-form-control-line-active': '#5e7ce0',
+  'devui-form-control-line-active-hover': '#344899',
+  'devui-list-item-active-bg': '#5e7ce0',
+  'devui-list-item-active-text': '#ffffff',
+  'devui-list-item-active-hover-bg': '#526ecc',
+  'devui-list-item-hover-bg': '#f2f5fc',
+  'devui-list-item-hover-text': '#526ecc',
+  'devui-list-item-selected-bg': '#e9edfa',
+  'devui-list-item-strip-bg': '#f2f5fc',
+  'devui-disabled-bg': 'ti-common-color-bg-disabled',
+  'devui-disabled-line': '#dfe1e6',
+  'devui-disabled-text': '#adb0b8',
+  'devui-primary-disabled': '#beccfa',
+  'devui-icon-fill-active-disabled': '#beccfa',
+  'devui-label-bg': '#eef0f5',
+  'devui-connected-overlay-bg': '#ffffff',
+  'devui-connected-overlay-line': '#526ecc',
+  'devui-fullscreen-overlay-bg': '#ffffff',
+  'devui-feedback-overlay-bg': '#464d6e',
+  'devui-feedback-overlay-text': '#dfe1e6',
+  'devui-embed-search-bg': '#f2f5fc',
+  'devui-embed-search-bg-hover': '#eef0f5',
+  'devui-float-block-shadow': 'rgba(94, 124, 224, 0.3)',
+  'devui-highlight-overlay': 'rgba(255, 255, 255, 0.8)',
+  'devui-range-item-hover-bg': '#e9edfa',
+  'devui-primary': 'ti-base-color-brand-6',
+  'devui-primary-hover': '#7693f5',
+  'devui-primary-active': '#344899',
+  'devui-contrast-hover': '#d64a52',
+  'devui-contrast-active': '#b12220',
+  'devui-danger-line': '#f66f6a',
+  'devui-danger-bg': '#ffeeed',
+  'devui-warning-line': '#fa9841',
+  'devui-warning-bg': '#fff3e8',
+  'devui-info-line': '#5e7ce0',
+  'devui-info-bg': '#f2f5fc',
+  'devui-success-line': '#50d4ab',
+  'devui-success-bg': '#edfff9',
+  'devui-primary-line': '#5e7ce0',
+  'devui-primary-bg': '#f2f5fc',
+  'devui-default-line': '#5e7ce0',
+  'devui-default-bg': '#f3f6f8',
+  'devui-shadow-length-base': '0 1px 4px 0',
+  'devui-shadow-length-slide-left': '-2px 0 8px 0',
+  'devui-shadow-length-slide-right': '2px 0 8px 0',
+  'devui-shadow-length-connected-overlay': '0 4px 8px 0',
+  'devui-shadow-length-hover': '0 8px 16px 0',
+  'devui-shadow-length-feedback-overlay': '0 8px 16px 0',
+  'devui-shadow-length-fullscreen-overlay': '0 12px 24px 0',
+  'devui-border-radius': '2px',
+  'devui-border-radius-feedback': '4px',
+  'devui-border-radius-card': '6px',
+  'devui-border-radius-full': '100px',
+  'devui-font-size': '12px',
+  'devui-font-size-card-title': '14px',
+  'devui-font-size-page-title': '16px',
+  'devui-font-size-modal-title': '18px',
+  'devui-font-size-price': '20px',
+  'devui-font-size-data-overview': '24px',
+  'devui-font-size-icon': '16px',
+  'devui-font-size-sm': '12px',
+  'devui-font-size-md': '12px',
+  'devui-font-size-lg': '14px',
+  'devui-font-title-weight': 'bold',
+  'devui-font-content-weight': 'normal',
+  'devui-line-height-base': '1.5',
+  'devui-animation-ease-in-smooth': 'cubic-bezier(0.645, 0.045, 0.355, 1)',
+  'devui-animation-duration-slow': '300ms',
+  'devui-animation-duration-base': '200ms',
+  'devui-animation-duration-fast': '100ms',
+  'devui-animation-ease-in': 'cubic-bezier(0.5, 0, 0.84, 0.25)',
+  'devui-animation-ease-out': 'cubic-bezier(0.16, 0.75, 0.5, 1)',
+  'devui-animation-ease-in-out': 'cubic-bezier(0.5, 0.05, 0.5, 0.95)',
+  'devui-animation-ease-in-out-smooth': 'cubic-bezier(0.645, 0.045, 0.355, 1)',
+  'devui-animation-linear': 'cubic-bezier(0, 0, 1, 1)',
+  'devui-z-index-full-page-overlay': '1080',
+  'devui-z-index-pop-up': '1060',
+  'devui-z-index-dropdown': '1052',
+  'devui-z-index-modal': '1050',
+  'devui-z-index-drawer': '1040',
+  'devui-z-index-framework': '1000',
+  'devui-icon-active-color': '#ffffff',
+
+  'devui-btn-sm-padding': '0 12px',
+  'devui-btn-padding': '0 16px',
+  'devui-btn-lg-padding': '0 20px',
+  'devui-btn-common-bg': 'ti-button-normal-background-color',
+  'devui-btn-common-border-color': 'transparent',
+  'devui-btn-common-bg-hover': '#d1d1d1',
+  'devui-btn-common-color-hover': '#252b3a',
+  'devui-btn-common-border-color-hover': 'transparent',
+  'devui-btn-common-bg-active': '#BDBDBD',
+  'devui-btn-common-color-active': '#252b3a',
+  'devui-btn-common-border-color-active': 'transparent',
+  'devui-btn-common-border-disabled': 'transparent',
+  'devui-icon-hover-bg': '#ebebeb',
+  'devui-icon-active-bg': '#d1d1d1'
+}

package/theme/galaxy-theme/index.js

@@ -0,0 +1,24 @@
+/**
+* Copyright (c) 2022 - present TinyVue Authors.
+* Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
+*
+* Use of this source code is governed by an MIT-style license.
+*
+* THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+* BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+*
+*/
+
+export const galaxyTheme = {
+  'ti-base-color-bg-1': '#1A1A1C',
+  'ti-base-color-common-7': '#CED1DB',
+  'ti-button-normal-background-color': '#393a3e',
+  'ti-button-normal-hover-background-color': '#4e5057',
+  'ti-base-color-border': '#353638',
+  'ti-base-color-light': '#292A2E',
+  'ti-base-color-info-normal': 'var(--ti-base-color-common-7)',
+  'ti-base-color-hover-background': '#393A3E',
+  'ti-base-color-selected-background': '#393A3E',
+  'ti-button-primary-text-color': '#ffffff'
+}

package/theme/generate-theme.js

@@ -0,0 +1,51 @@
+/**
+* Copyright (c) 2022 - present TinyVue Authors.
+* Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
+*
+* Use of this source code is governed by an MIT-style license.
+*
+* THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+* BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+*
+*/
+
+const fs = require('fs')
+require('esbuild-register')
+
+const { DEVUI_THEME_MAP } = require('./devui-theme-map')
+const themes = ['impression-theme', 'infinity-theme', 'deep-theme', 'galaxy-theme']
+
+function generateTheme(themeName) {
+  const themeData = {}
+
+  for (let mapItemKey of Object.keys(DEVUI_THEME_MAP)) {
+    const mapItemValue = DEVUI_THEME_MAP[mapItemKey]
+    if (mapItemValue.indexOf('ti-') !== -1) {
+      const themeJson = require(`./${themeName}/devui.json`)
+      for (let themeItemKey in themeJson) {
+        if (themeItemKey === mapItemKey) {
+          themeData[mapItemValue] = themeJson[themeItemKey]
+        }
+      }
+    }
+  }
+
+  fs.writeFile(
+    `./${themeName}/index.json`,
+    JSON.stringify(themeData, null, '  '),
+    (err) => {
+      if (err) {
+        throw new Error('写入文件出错！')
+      }
+    }
+  )
+}
+
+function main() {
+  for (let theme of themes) {
+    generateTheme(theme)
+  }
+}
+
+main()

package/theme/impression-theme/index.js

@@ -0,0 +1,14 @@
+/**
+* Copyright (c) 2022 - present TinyVue Authors.
+* Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
+*
+* Use of this source code is governed by an MIT-style license.
+*
+* THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+* BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+*
+*/
+
+export const impressionTheme = {
+}

package/theme/index.js

@@ -0,0 +1,44 @@
+/**
+* Copyright (c) 2022 - present TinyVue Authors.
+* Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
+*
+* Use of this source code is governed by an MIT-style license.
+*
+* THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+* BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+*
+*/
+
+import { impressionTheme } from './impression-theme'
+import { infinityTheme } from './infinity-theme'
+import { deepTheme } from './deep-theme'
+import { galaxyTheme } from './galaxy-theme'
+
+export const tinyImpressionTheme = {
+  id: 'tiny-impression-theme',
+  name: 'Impression',
+  cnName: '印象',
+  data: impressionTheme
+}
+
+export const tinyInfinityTheme = {
+  id: 'tiny-infinity-theme',
+  name: 'Infinity',
+  cnName: '无限',
+  data: infinityTheme
+}
+
+export const tinyDeepTheme = {
+  id: 'tiny-deep-theme',
+  name: 'Deep',
+  cnName: '深邃夜空',
+  data: deepTheme
+}
+
+export const tinyGalaxyTheme = {
+  id: 'tiny-galaxy-theme',
+  name: 'Galaxy',
+  cnName: '追光',
+  data: galaxyTheme
+}