Nc Style: Add new light theme config in windicss config file (#9322)

* fix(nc-gui): add missing green & base colors in themev3 colors * fix(nc-gui): add lightTheme config * fix(nc-gui): add nc suffix in light theme * fix(nc-gui): update light theme format * fix(nc-gui): remove nested level from light theme
4 months ago · 78292594b6
3 changed files with 232 additions and 2 deletions
--- a/packages/nc-gui/components/workspace/integrations/IntegrationsTab.vue
+++ b/packages/nc-gui/components/workspace/integrations/IntegrationsTab.vue
@ -244,7 +244,8 @@ const handleAddIntegration = (category: IntegrationCategoryType, integration: In
                        <template #title>{{ $t('tooltip.comingSoonIntegration') }}</template>

                        <div
-                          class="source-card"
+                          :tabindex="0"
+                          class="source-card focus-visible:outline-none"
                          :class="{
                            'is-available': integration?.isAvailable,
                          }"
--- a/packages/nc-gui/utils/colorsUtils.ts
+++ b/packages/nc-gui/utils/colorsUtils.ts
@ -71,6 +71,10 @@ export const themeV2Colors = {
 }

 export const themeV3Colors = {
+  base: {
+    white: '#FFFFFF',
+    black: '#000000',
+  },
  brand: {
    50: '#EBF0FF',
    100: '#D6E0FF',
@ -180,6 +184,18 @@ export const themeV3Colors = {
    800: '#690735',
    900: '#42001F',
  },
+  green: {
+    50: '#ECFFF2',
+    100: '#D4F7E0',
+    200: '#A9EFC1',
+    300: '#7DE6A3',
+    400: '#52DE84',
+    500: '#27D665',
+    600: '#1FAB51',
+    700: '#17803D',
+    800: '#105628',
+    900: '#082B14',
+  },
 }

 const isValidHex = (hex: string) => /^#([A-Fa-f0-9]{3,4}){1,2}$/.test(hex)
@ -353,3 +369,211 @@ export function isColorDark(hexColor: string) {
 export function getEnumColorByIndex(i: number, mode: 'light' | 'dark' = 'light') {
  return enumColor[mode][i % enumColor[mode].length]
 }
+
+export const lightTheme = {
+  content: {
+    'nc-grey': {
+      extreme: themeV3Colors.base['black'],
+      emphasis: themeV3Colors.gray[900],
+      DEFAULT: themeV3Colors.gray[800],
+      subtle: themeV3Colors.gray[700],
+      subtle2: themeV3Colors.gray[600],
+      muted: themeV3Colors.gray[500],
+    },
+    'nc-brand': {
+      DEFAULT: themeV3Colors.brand[500],
+      disabled: themeV3Colors.brand[600],
+      hover: themeV3Colors.gray[300],
+    },
+    'nc-inverted-primary': {
+      DEFAULT: themeV3Colors.base['white'],
+      hover: themeV3Colors.base['white'],
+      disabled: themeV3Colors.gray[400],
+    },
+    'nc-inverted-secondary': {
+      DEFAULT: themeV3Colors.gray[700],
+      hover: themeV3Colors.gray[700],
+      disabled: themeV3Colors.gray[400],
+    },
+    'nc-red': {
+      dark: themeV3Colors.red[700],
+      medium: themeV3Colors.red[500],
+      light: themeV3Colors.red[300],
+    },
+    'nc-green': {
+      dark: themeV3Colors.green[700],
+      medium: themeV3Colors.green[500],
+      light: themeV3Colors.green[300],
+    },
+    'nc-yellow': {
+      dark: themeV3Colors.yellow[700],
+      medium: themeV3Colors.yellow[500],
+      light: themeV3Colors.yellow[300],
+    },
+    'nc-blue': {
+      dark: themeV3Colors.blue[700],
+      medium: themeV3Colors.blue[500],
+      light: themeV3Colors.blue[300],
+    },
+    'nc-purple': {
+      dark: themeV3Colors.purple[700],
+      medium: themeV3Colors.purple[500],
+      light: themeV3Colors.purple[300],
+    },
+    'nc-pink': {
+      dark: themeV3Colors.pink[700],
+      medium: themeV3Colors.pink[500],
+      light: themeV3Colors.pink[300],
+    },
+    'nc-orange': {
+      dark: themeV3Colors.orange[700],
+      medium: themeV3Colors.orange[500],
+      light: themeV3Colors.orange[300],
+    },
+    'nc-maroon': {
+      dark: themeV3Colors.maroon[700],
+      medium: themeV3Colors.maroon[500],
+      light: themeV3Colors.maroon[300],
+    },
+  },
+  background: {
+    'nc-default': themeV3Colors.base['white'],
+    'nc-brand': themeV3Colors.brand[50],
+    'nc-gray': {
+      extralight: themeV3Colors.gray[50],
+      light: themeV3Colors.gray[100],
+      medium: themeV3Colors.gray[200],
+      dark: themeV3Colors.gray[300],
+      extradark: themeV3Colors.gray[400],
+    },
+    'nc-red': {
+      light: themeV3Colors.red[50],
+      dark: themeV3Colors.red[100],
+    },
+    'nc-green': {
+      light: themeV3Colors.green[50],
+      dark: themeV3Colors.green[100],
+    },
+    'nc-yellow': {
+      light: themeV3Colors.yellow[50],
+      dark: themeV3Colors.yellow[100],
+    },
+    'nc-blue': {
+      light: themeV3Colors.blue[50],
+      dark: themeV3Colors.blue[100],
+    },
+    'nc-purple': {
+      light: themeV3Colors.purple[50],
+      dark: themeV3Colors.purple[100],
+    },
+    'nc-pink': {
+      light: themeV3Colors.pink[50],
+      dark: themeV3Colors.pink[100],
+    },
+    'nc-orange': {
+      light: themeV3Colors.orange[50],
+      dark: themeV3Colors.orange[100],
+    },
+    'nc-maroon': {
+      light: themeV3Colors.maroon[50],
+      dark: themeV3Colors.maroon[100],
+    },
+  },
+  border: {
+    'nc-brand': themeV3Colors.brand[500],
+    'nc-gray': {
+      extralight: themeV3Colors.gray[50],
+      light: themeV3Colors.gray[100],
+      medium: themeV3Colors.gray[200],
+      dark: themeV3Colors.gray[300],
+      extradark: themeV3Colors.gray[400],
+    },
+    'nc-red': {
+      DEFAULT: themeV3Colors.red[500],
+    },
+    'nc-green': {
+      DEFAULT: themeV3Colors.green[500],
+    },
+    'nc-yellow': {
+      DEFAULT: themeV3Colors.yellow[500],
+    },
+    'nc-blue': {
+      DEFAULT: themeV3Colors.blue[500],
+    },
+    'nc-purple': {
+      DEFAULT: themeV3Colors.purple[500],
+    },
+    'nc-pink': {
+      DEFAULT: themeV3Colors.pink[500],
+    },
+    'nc-orange': {
+      DEFAULT: themeV3Colors.orange[500],
+    },
+    'nc-maroon': {
+      DEFAULT: themeV3Colors.maroon[500],
+    },
+  },
+  fill: {
+    'nc-fill-primary': {
+      DEFAULT: themeV3Colors.brand[500],
+      hover: themeV3Colors.brand[600],
+      disabled: themeV3Colors.gray[300],
+      disabled2: themeV3Colors.brand[200],
+    },
+    'nc-fill-secondary': {
+      DEFAULT: themeV3Colors.base['white'],
+      hover: themeV3Colors.gray[50],
+      disabled: themeV3Colors.base['white'],
+    },
+    'nc-fill-warning': {
+      DEFAULT: themeV3Colors.red[500],
+      hover: themeV3Colors.red[600],
+      disabled: themeV3Colors.gray[50],
+    },
+    'nc-fill-success': {
+      DEFAULT: themeV3Colors.green[500],
+      hover: themeV3Colors.green[600],
+      disabled: themeV3Colors.gray[50],
+    },
+    'nc-fill-red': {
+      dark: themeV3Colors.red[700],
+      medium: themeV3Colors.red[500],
+      light: themeV3Colors.red[300],
+    },
+    'nc-fill-green': {
+      dark: themeV3Colors.green[700],
+      medium: themeV3Colors.green[500],
+      light: themeV3Colors.green[300],
+    },
+    'nc-fill-yellow': {
+      dark: themeV3Colors.yellow[700],
+      medium: themeV3Colors.yellow[500],
+      light: themeV3Colors.yellow[300],
+    },
+    'nc-fill-blue': {
+      dark: themeV3Colors.blue[700],
+      medium: themeV3Colors.blue[500],
+      light: themeV3Colors.blue[300],
+    },
+    'nc-fill-purple': {
+      dark: themeV3Colors.purple[700],
+      medium: themeV3Colors.purple[500],
+      light: themeV3Colors.purple[300],
+    },
+    'nc-fill-pink': {
+      dark: themeV3Colors.pink[700],
+      medium: themeV3Colors.pink[500],
+      light: themeV3Colors.pink[300],
+    },
+    'nc-fill-orange': {
+      dark: themeV3Colors.orange[700],
+      medium: themeV3Colors.orange[500],
+      light: themeV3Colors.orange[300],
+    },
+    'nc-fill-maroon': {
+      dark: themeV3Colors.maroon[700],
+      medium: themeV3Colors.maroon[500],
+      light: themeV3Colors.maroon[300],
+    },
+  },
+}
--- a/packages/nc-gui/windi.config.ts
+++ b/packages/nc-gui/windi.config.ts
@ -11,7 +11,7 @@ import animations from '@windicss/plugin-animations'
 // @ts-expect-error no types for plugin-question-mark
 import questionMark from '@windicss/plugin-question-mark'

-import { theme as colors, themeColors, themeV2Colors, themeV3Colors } from './utils/colorsUtils'
+import { theme as colors, lightTheme, themeColors, themeV2Colors, themeV3Colors } from './utils/colorsUtils'

 const isEE = process.env.EE

@ -99,14 +99,17 @@ export default defineConfig({
      textColor: {
        primary: 'rgba(var(--color-primary), var(--tw-text-opacity))',
        accent: 'rgba(var(--color-accent), var(--tw-text-opacity))',
+        ...lightTheme.content,
      },
      borderColor: {
        primary: 'rgba(51, 102, 255, 1)',
        accent: 'rgba(var(--color-accent), var(--tw-border-opacity))',
+        ...lightTheme.border,
      },
      backgroundColor: {
        primary: 'rgba(var(--color-primary), var(--tw-bg-opacity))',
        accent: 'rgba(var(--color-accent), var(--tw-bg-opacity))',
+        ...lightTheme.background,
      },
      ringColor: {
        primary: 'rgba(var(--color-primary), var(--tw-ring-opacity))',
@ -117,12 +120,14 @@ export default defineConfig({
        hover: '0px 0px 4px 0px rgba(0, 0, 0, 0.24)',
        selected: '0px 0px 0px 2px var(--ant-primary-color-outline)',
        error: '0px 0px 0px 2px var(--ant-error-color-outline)',
+        focus: '0px 0px 0px 2px #fff, 0px 0px 0px 4px #3069fe',
      },
      colors: {
        ...windiColors,
        ...themeColors,
        ...themeV2Colors,
        ...themeV3Colors,
+        ...lightTheme.fill,
        primary: 'rgba(var(--color-primary), var(--tw-bg-opacity))',
        accent: 'rgba(var(--color-accent), var(--tw-bg-opacity))',
        dark: colors.dark,