chore(theme): update css variable names

2026-03-13 10:22:08 +08:00 · 2017-12-28 16:28:34 -06:00
parent a6ede9d101
commit 66f1e1958e
5 changed files with 148 additions and 96 deletions
--- a/packages/core/scripts/theme-builder/src/components/css-text/css-text.css
+++ b/packages/core/scripts/theme-builder/src/components/css-text/css-text.css
@@ -8,7 +8,7 @@ h1 {
 textarea {
  margin: 12px 0 0 0;
  min-width: 300px;
-  height: 640px;
+  height: 680px;
  font-family: Courier New, Courier, monospace;
 }

--- a/packages/core/scripts/theme-builder/src/components/theme-selector/theme-selector.tsx
+++ b/packages/core/scripts/theme-builder/src/components/theme-selector/theme-selector.tsx
@@ -54,7 +54,7 @@ export class ThemeSelector {
    const computed = window.getComputedStyle(document.body);

    this.themeVariables = THEME_VARIABLES.map(themeVariable => {
-      const value = (computed.getPropertyValue(themeVariable.property) || '#eeeeee').trim().toLowerCase();
+      const value = (computed.getPropertyValue(themeVariable.property) || PLACEHOLDER_COLOR).trim().toLowerCase();
      return {
        property: themeVariable.property.trim(),
        value: value,
@@ -120,3 +120,5 @@ export class ThemeSelector {
    ];
  }
 }
+
+const PLACEHOLDER_COLOR = `#ff00ff`;
--- a/packages/core/scripts/theme-builder/src/theme-variables.ts
+++ b/packages/core/scripts/theme-builder/src/theme-variables.ts
@@ -2,118 +2,118 @@
 export const THEME_VARIABLES = [

  {
-    property: '--primary'
+    property: '--color-primary'
  },
  {
-    property: '--primary-contrast'
+    property: '--color-primary-contrast'
  },
  {
-    property: '--primary-tint'
+    property: '--color-primary-tint'
  },
  {
-    property: '--primary-shade'
+    property: '--color-primary-shade'
  },
  {
-    property: '--secondary'
+    property: '--color-secondary'
  },
  {
-    property: '--secondary-contrast'
+    property: '--color-secondary-contrast'
  },
  {
-    property: '--secondary-tint'
+    property: '--color-secondary-tint'
  },
  {
-    property: '--secondary-shade'
+    property: '--color-secondary-shade'
  },
  {
-    property: '--tertiary'
+    property: '--color-tertiary'
  },
  {
-    property: '--tertiary-contrast'
+    property: '--color-tertiary-contrast'
  },
  {
-    property: '--tertiary-tint'
+    property: '--color-tertiary-tint'
  },
  {
-    property: '--tertiary-shade'
+    property: '--color-tertiary-shade'
  },
  {
-    property: '--success'
+    property: '--color-success'
  },
  {
-    property: '--success-contrast'
+    property: '--color-success-contrast'
  },
  {
-    property: '--success-tint'
+    property: '--color-success-tint'
  },
  {
-    property: '--success-shade'
+    property: '--color-success-shade'
  },
  {
-    property: '--warning'
+    property: '--color-warning'
  },
  {
-    property: '--warning-contrast'
+    property: '--color-warning-contrast'
  },
  {
-    property: '--warning-tint'
+    property: '--color-warning-tint'
  },
  {
-    property: '--warning-shade'
+    property: '--color-warning-shade'
  },
  {
-    property: '--danger'
+    property: '--color-danger'
  },
  {
-    property: '--danger-contrast'
+    property: '--color-danger-contrast'
  },
  {
-    property: '--danger-tint'
+    property: '--color-danger-tint'
  },
  {
-    property: '--danger-shade'
+    property: '--color-danger-shade'
  },
  {
-    property: '--light'
+    property: '--color-light'
  },
  {
-    property: '--light-contrast'
+    property: '--color-light-contrast'
  },
  {
-    property: '--light-tint'
+    property: '--color-light-tint'
  },
  {
-    property: '--light-shade'
+    property: '--color-light-shade'
  },
  {
-    property: '--medium'
+    property: '--color-medium'
  },
  {
-    property: '--medium-contrast'
+    property: '--color-medium-contrast'
  },
  {
-    property: '--medium-tint'
+    property: '--color-medium-tint'
  },
  {
-    property: '--medium-shade'
+    property: '--color-medium-shade'
  },
  {
-    property: '--dark'
+    property: '--color-dark'
  },
  {
-    property: '--dark-contrast'
+    property: '--color-dark-contrast'
  },
  {
-    property: '--dark-tint'
+    property: '--color-dark-tint'
  },
  {
-    property: '--dark-shade'
+    property: '--color-dark-shade'
  },
  {
    property: '--text-color'
  },
  {
-    property: '--text-sub-color'
+    property: '--text-color-alt'
  },
  {
    property: '--background-color'
@@ -122,10 +122,16 @@ export const THEME_VARIABLES = [
    property: '--background-color-alt'
  },
  {
-    property: '--toolbar-background'
+    property: '--toolbar-background-color'
  },
  {
-    property: '--tabbar-background'
+    property: '--tabbar-background-color'
+  },
+  {
+    property: '--tabbar-text-color'
+  },
+  {
+    property: '--tabbar-text-color-active'
  },
  {
    property: '--item-background-color'
@@ -137,10 +143,10 @@ export const THEME_VARIABLES = [
    property: '--border-color'
  },
  {
-    property: '--box-shadow'
+    property: '--backdrop-color'
  },
  {
-    property: '--backdrop'
+    property: '--box-shadow'
  },

 ];
--- a/packages/core/src/themes/css/default.css
+++ b/packages/core/src/themes/css/default.css
@@ -2,31 +2,53 @@


 :root {
-  --primary: #3880ff;
-  --primary-contrast: #ffffff;
-  --secondary: #0CD1E8;
-  --secondary-contrast: #ffffff;
-  --tertiary: #7044FF;
-  --tertiary-contrast: #ffffff;
-  --success: #10DC60;
-  --success-contrast: #ffffff;
-  --warning: #FFCE00;
-  --warning-contrast: #ffffff;
-  --danger: #f04141;
-  --danger-contrast: #ffffff;
-  --light: #f4f5f8;
-  --light-contrast: #000000;
-  --medium: #898B93;
-  --medium-contrast: #000000;
-  --dark: #222428;
-  --dark-contrast: #ffffff;
-  --content-color: #000000;
-  --content-sub-color: #898b93;
-  --content-background: #ffffff;
-  --content-sub-background: #f4f5f8;
-  --toolbar-background: #f4f5f8;
-  --tabbar-background: #f4f5f8;
-  --item-background: #fffff;
-  --item-sub-background: #898b93;
+  --color-primary: #3880ff;
+  --color-primary-contrast: #ffffff;
+  --color-primary-tint: #ff00ff;
+  --color-primary-shade: #ff00ff;
+  --color-secondary: #0cd1e8;
+  --color-secondary-contrast: #ffffff;
+  --color-secondary-tint: #ff00ff;
+  --color-secondary-shade: #ff00ff;
+  --color-tertiary: #7044ff;
+  --color-tertiary-contrast: #ffffff;
+  --color-tertiary-tint: #ff00ff;
+  --color-tertiary-shade: #ff00ff;
+  --color-success: #10dc60;
+  --color-success-contrast: #ffffff;
+  --color-success-tint: #ff00ff;
+  --color-success-shade: #ff00ff;
+  --color-warning: #ffce00;
+  --color-warning-contrast: #ffffff;
+  --color-warning-tint: #ff00ff;
+  --color-warning-shade: #ff00ff;
+  --color-danger: #f04141;
+  --color-danger-contrast: #ffffff;
+  --color-danger-tint: #ff00ff;
+  --color-danger-shade: #ff00ff;
+  --color-light: #f4f5f8;
+  --color-light-contrast: #000000;
+  --color-light-tint: #ff00ff;
+  --color-light-shade: #ff00ff;
+  --color-medium: #898b93;
+  --color-medium-contrast: #000000;
+  --color-medium-tint: #ff00ff;
+  --color-medium-shade: #ff00ff;
+  --color-dark: #222428;
+  --color-dark-contrast: #ffffff;
+  --color-dark-tint: #ff00ff;
+  --color-dark-shade: #ff00ff;
+  --text-color: #000000;
+  --text-color-alt: #898b93;
+  --background-color: #ffffff;
+  --background-color-alt: #f4f5f8;
+  --toolbar-background-color: #f4f5f8;
+  --tabbar-background-color: #f4f5f8;
+  --tabbar-text-color: #ff00ff;
+  --tabbar-text-color-active: #ff00ff;
+  --item-background-color: #ffffff;
+  --item-background-color-alt: #898b93;
  --border-color: #c4c6ca;
+  --backdrop-color: #000000;
+  --box-shadow: #ff00ff;
 }
--- a/packages/core/src/themes/css/oceanic.css
+++ b/packages/core/src/themes/css/oceanic.css
@@ -2,31 +2,53 @@


 :root {
-  --primary: #549EE7;
-  --primary-contrast: #ffffff;
-  --secondary: #5FB3B3;
-  --secondary-contrast: #ffffff;
-  --tertiary: #FAC863;
-  --tertiary-contrast: #ffffff;
-  --success: #90d089;
-  --success-contrast: #ffffff;
-  --warning: #F99157;
-  --warning-contrast: #ffffff;
-  --danger: #EC5f67;
-  --danger-contrast: #ffffff;
-  --light: #D8DEE9;
-  --light-contrast: #1b2b34;
-  --medium: #65737E;
-  --medium-contrast: #d8dee9;
-  --dark: #1B2B34;
-  --dark-contrast: #D8DEE9;
-  --content-color: #ffffff;
-  --content-sub-color: #a7adba;
-  --content-background: #1B2B34;
-  --content-sub-background: #343D46;
-  --toolbar-background: #343D46;
-  --tabbar-background: #343D46;
-  --item-background: #343D46;
-  --item-sub-background: #65737E;
-  --border-color: #1B2B34;
+  --color-primary: #549ee7;
+  --color-primary-contrast: #ffffff;
+  --color-primary-tint: #ff00ff;
+  --color-primary-shade: #ff00ff;
+  --color-secondary: #5fb3b3;
+  --color-secondary-contrast: #ffffff;
+  --color-secondary-tint: #ff00ff;
+  --color-secondary-shade: #ff00ff;
+  --color-tertiary: #fac863;
+  --color-tertiary-contrast: #ffffff;
+  --color-tertiary-tint: #ff00ff;
+  --color-tertiary-shade: #ff00ff;
+  --color-success: #90d089;
+  --color-success-contrast: #ffffff;
+  --color-success-tint: #ff00ff;
+  --color-success-shade: #ff00ff;
+  --color-warning: #f99157;
+  --color-warning-contrast: #ffffff;
+  --color-warning-tint: #ff00ff;
+  --color-warning-shade: #ff00ff;
+  --color-danger: #ec5f67;
+  --color-danger-contrast: #ffffff;
+  --color-danger-tint: #ff00ff;
+  --color-danger-shade: #ff00ff;
+  --color-light: #d8dee9;
+  --color-light-contrast: #1b2b34;
+  --color-light-tint: #ff00ff;
+  --color-light-shade: #ff00ff;
+  --color-medium: #65737e;
+  --color-medium-contrast: #d8dee9;
+  --color-medium-tint: #ff00ff;
+  --color-medium-shade: #ff00ff;
+  --color-dark: #1b2b34;
+  --color-dark-contrast: #d8dee9;
+  --color-dark-tint: #ff00ff;
+  --color-dark-shade: #ff00ff;
+  --text-color: #ffffff;
+  --text-color-alt: #a7adba;
+  --background-color: #1b2b34;
+  --background-color-alt: #343d46;
+  --toolbar-background-color: #343d46;
+  --tabbar-background-color: #343d46;
+  --tabbar-text-color: #ff00ff;
+  --tabbar-text-color-active: #ff00ff;
+  --item-background-color: #343d46;
+  --item-background-color-alt: #65737e;
+  --border-color: #1b2b34;
+  --backdrop-color: #ff00ff;
+  --box-shadow: #ff00ff;
 }