variables.less
Petal uses global variables for key properties that affect the look of the common UI elements. All global variables are defined in the variables.less file. Change the value of the variables such as @primary-accent-color, and it will affect all classes where it refers to the variable.
However when editing, we recommend that you do not directly alter the values in the stock variables.less file, but instead use a different file to override the existing values. This is to prevent builds from failing in case new variables have been added or existing ones have been changed in newer versions. Because stock variables.less file is always pulled alongside other files, it will be kept up to date when you update Petal. In the similar sense, it's generally a good idea to not make direct edits to Petal's source code so that you don't have to manually keep track of any changes you made to the files before upgrading to future versions.
Use the included custom-variables.less file instead to insert any variables you want to override, or just create a new file in your project folder containing the override variables, and import the file when compiling.
@include-dark: true;
@use-webcomponents: false; // output :host-context(.dark) instead of plain .dark class
// layout
@container-width: 980px;
@container-max-width: @container-width;
@container-padding: 15px;
@col-method: flex; // flex or float (legacy)
@col-padding: 15px;
// typography
@base-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
@base-font-size: 16px;
@base-font-color: #333;
@base-line-height: 1.2;
@monospace-font: "SF Mono", "Menlo", "Monaco", "Consolas", "Courier New";
@header-uppercase: true;
@header-letter-spacing: 0.1em;
@header-font-weight: 900;
@paragraph-line-height: 1.5;
// colors
@background-color-light: @white; // background color for dark-on-light theme
@foreground-color-light: @black; // foreground color for dark-on-light theme
@background-color-dark: @black; // background color for light-on-dark theme
@foreground-color-dark: @white; // background color for light-on-dark theme
@primary-accent-color: @blue;
@okay-color: @green;
@warning-color: @gold;
@danger-color: @red;
@link-text-color: @red;
@preset-colors: red, green, blue;
// buttons
@include-btn-dropdown: true;
@include-btn-split: true;
@btn-disable-colored-dropdown: false;
@btn-border-width: 2px;
@btn-border-radius: 0;
@btn-font-size: 0.9em;
@btn-font-weight: 900;
@btn-letter-spacing: 2px;
@btn-line-height: 1.2;
@btn-dropdown-menu-item-font-size: 0.9em;
@gray-disabled-btn: false;
@btn-disable-transition: false;
@btn-disable-shadows: false;
@btn-spinner-animation-duration: 0.4s;
@btn-text-color-contrast-threshold: 60%;
@btn-colors: red, green, blue;
// forms
@input-border-width: 2px;
@input-border-color: @gray;
@input-border-radius: 0;
@input-bg-color-light: @background-color-light;
@input-bg-color-dark: @background-color-dark;
@input-font-size: 0.9em;
@input-textarea-font-size: 0.8em;
@input-line-height: 1.2;
@form-label-uppercase: true;
@form-label-font-size: 0.8em;
@form-label-font-weight: 900;
@form-label-letter-spacing: 0.1em;
@form-caption-font-size: 0.8em;
@form-caption-color: fadeout(@gray,30%);
@input-spinner-color: @primary-accent-color;
@input-spinner-animation-duration: 0.4s;
@input-html5-validation-styles: true;
// checkboxes & radioboxes
@checkbox-size: 20px;
@checkbox-border-width: @input-border-width; //2px
@checkbox-check-thickness: @input-border-width; //2px
@checkbox-border-color: @gray;
@checkbox-border-radius: 100%;
@radiobox-border-radius: 100%;
@checkbox-color: @primary-accent-color;
@checkbox-bg-color-light: @background-color-light;
@checkbox-bg-color-dark: lighten(@background-color-dark,10%);
@checkbox-disable-transition: false;
// switch toggle
@chk-switch-size: 24px;
@chk-switch-border-width: @input-border-width; //2px
@chk-switch-border-color: @input-border-color;
@chk-switch-border-radius: @checkbox-size;
@chk-switch-color: @primary-accent-color;
@chk-switch-disable-transition: false;
@chk-switch-disable-shadows: false;
// selectbox
@selectbox-border-width: @input-border-width; //2px
@selectbox-border-color: @input-border-color;
@selectbox-border-radius: @input-border-radius;
@selectbox-color: @primary-accent-color;
@selectbox-bg-color-light: @background-color-light;
@selectbox-bg-color-dark: @background-color-dark;
@selectbox-menu-bg-color-light: @background-color-light;
@selectbox-menu-bg-color-dark: lighten(@background-color-dark,13%);
@selectbox-disable-shadows: false;
@include-selecter: true;
// tables
@table-border-color: @gray;
@table-bg-color-light: @background-color-light;
@table-bg-color-dark: lighten(@background-color-dark,10%);
@table-row-highlight-bg-color-light: darken(@table-bg-color-light,5%);
@table-row-highlight-bg-color-dark: lighten(@table-bg-color-dark,5%);
// progress
@spinner-color: @primary-accent-color;
@spinner-base-color: fadeout(@gray-d2,80%);
// panels
@panel-bg-color-light: @background-color-light;
@panel-bg-color-dark: @gray-d4;
@panel-border-radius: 0;
@label-border-radius: 0;
@label-badge-bg-color: @gray;
@badge-border-radius: 10em;
// tabs
@tab-color: @primary-accent-color;
@tab-style-01: enabled; // enabled or disabled
@tab-style-02: enabled; // enabled or disabled
// alerts
@alert-color: @gray;
@alert-accent-color: @primary-accent-color;
@alert-okay-color: @okay-color;
@alert-warning-color: @warning-color;
@alert-danger-color: @danger-color;
// petalicons
@petalicon-file-path: '../assets';
Accepted values for the variables depend on the property it's inserted in; generally the variable name implies the CSS property name it's referring to, so it should be pretty straightforward.
Some that have the true or false values are used for switches of toggling some features on and off, like transitions or shadows. As with other variables, try testing out with different values and see how they actually affect the appearance.
Some color variables have their default values referring to another variable (@primary-accent-color) - this is to keep every color consistent by using a single brand color. You can set colors for different elements separately if you wish to.