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

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,
                           }"

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],
+    },
+  },
+}

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,