@wix/react-component-schema 1.7.0 → 1.9.0

package/src/index.test.ts

@@ -17,4 +17,14 @@ describe('react-component-schema dist', () => {
     const content = readFileSync(resolve(__dirname, '../dist/editor-react-types.d.ts'), 'utf-8')
     expect(content).toMatchSnapshot()
   })
+
+  it('dist/theme-variables.scss matches snapshot', () => {
+    const content = readFileSync(resolve(__dirname, '../dist/theme-variables.scss'), 'utf-8')
+    expect(content).toMatchSnapshot()
+  })
+
+  it('dist/theme-variables.module.css matches snapshot', () => {
+    const content = readFileSync(resolve(__dirname, '../dist/theme-variables.module.css'), 'utf-8')
+    expect(content).toMatchSnapshot()
+  })
 })

package/src/index.ts

@@ -107,3 +107,18 @@ export type EditorElement = RawEditorElement &
   RequiredFields<RawEditorElement, 'selector' | 'displayName'> & {
     presets?: Record<string, PresetItem>
   }
+
+export {
+  /** General site palette: backgrounds, system states, accent, and base colors. Subset of {@link WixThemeVariableNames}. */
+  ColorVariableNames,
+  /** All box/container variables: borders, radius, shadow, padding, and colors. */
+  BoxVariableNames,
+  /** All button variables: font, layout, borders, and colors. */
+  ButtonVariableNames,
+  /** All line/divider variables: width and color. */
+  LineVariableNames,
+  /** All text variables: font shorthand and color. */
+  TextVariableNames,
+  /** Union of all Wix site theme variable names across all element types. */
+  WixThemeVariableNames,
+} from '@wix/wix-site-theme-variables'

package/vite.config.ts

@@ -65,10 +65,34 @@ function wrapEditorReactTypesDeclarationPlugin(): Plugin {
   }
 }
 
+function generateThemeVariableStylesPlugin(): Plugin {
+  return {
+    name: 'generate-theme-variable-styles',
+    async closeBundle() {
+      const { WixThemeVariableNames } = await import('@wix/wix-site-theme-variables')
+      const variableNames = Object.keys(WixThemeVariableNames)
+
+      const scssContent = `${[
+        '// Auto-generated — do not edit. Source: WixThemeVariableNames.',
+        ...variableNames.map((variableName) => `$${variableName}: var(--${variableName});`),
+      ].join('\n')}\n`
+
+      const cssModuleContent = `${[
+        '/* Auto-generated — do not edit. Source: WixThemeVariableNames. */',
+        ...variableNames.map((variableName) => `@value ${variableName}: --${variableName};`),
+      ].join('\n')}\n`
+
+      writeFileSync(resolve(__dirname, 'dist/theme-variables.scss'), scssContent)
+      writeFileSync(resolve(__dirname, 'dist/theme-variables.module.css'), cssModuleContent)
+    },
+  }
+}
+
 export default defineConfig({
   plugins: [
     pureEnumAnnotationsPlugin(),
     wrapEditorReactTypesDeclarationPlugin(),
+    generateThemeVariableStylesPlugin(),
     dts({
       include: ['src/**/*.ts'],
       exclude: ['**/*.test.ts'],
@@ -78,6 +102,7 @@ export default defineConfig({
         '@wix/ambassador-devcenter-v1-component-type-data',
         '@wix/ambassador-devcenter-components-overrides-v1-components-override',
         '@wix/editor-react-types',
+        '@wix/wix-site-theme-variables',
       ],
     }),
   ],