How to use theme's _variables.less file in my custom code module?

Question

I have written a custom module that is located in the /app/code folder. My less file is located in /app/code/<Vendor>/<Module>/view/frontend/web/css/source/_module.less. How do I include the theme's _variables.less file so I can pre-style my content to match the theme's colours? I'm only after the header and button colours (example code below):

.mydiv {
    border-top: 1px solid @top-header;
    border-bottom: 1px solid @top-header;
}
input[type="button"] {
    background-color: @button_primary;
    color: @button-primary__hover__color;
}

I've tried to use the @import commands but this does not work:

@import 'source/_variables.less';
@import 'source/_theme.less';

Answer 1

I think you need to create a custom variables file and import it in a _module.less.

Please follow the step for that.

Step 1: add _module.less file.

Path : /app/code/VendorName/ModuleName/view/frontend/web/css/source/_module.less

Add the bello code in your _module.less

//
//  Variables
//  _____________________________________________

@baseDir: "../"; // Base directory path

@import 'variables/_custom-variables.less';

.test {
    color: @color-black_dark;
}

Step 2: create _custom-variables.less on the following path.

Path : /app/code/VendorName/ModuleName/view/frontend/web/css/source/variables/_custom-variables.less

@color-blue-dodger: #008bdb;
@color-black_dark: #333333;

@color-white: #fff;
@color-black: #000;

Answer 2

@Richard Parnaby-King did you actually find a way to correctly do this without duplicating LESS variables? I'm stumbling on this because I'm getting undefined variables errors while running static content deployment and was wondering if there was any way to import the variables onto my custom .less files on my module folder. Couldn't find any conclusive info on it.

The Magento logs do not state anything regarding this. https://developer.adobe.com/commerce/frontend-core/guide/css/preprocess/#import-directive