[SOLVED] How can I add a new border radius definition?

How can I add a new border radius definition?

The rounded classes are generated based on following SASS variables (I think)

$rounded: (
  0: 0,
  'sm': $border-radius-root / 2,
  null: $border-radius-root,
  'lg': $border-radius-root * 2,
  'xl': $border-radius-root * 6,
  'pill': 9999px,
  'circle': 50%
);

I'd like to update the above definition by doing something like this

// Keep the originals and change only what I need to change
$rounded: (
  'xl': $border-radius-root * 4, // Updated
  'xxl': $border-radius-root * 6 // Added
);

Do you know how I can achieve this result?

Solution

create new file

src/styles/main.scss

$border-radius-root: 4px; // default

@use 'vuetify' with (
  $rounded: (
    'xl': $border-radius-root * 4, // Updated
    'xxl': $border-radius-root * 6, // Added
  )
);

Then where you define the vuetify plugin, usually src/plugins/vuetify.ts, add the file you just created and remove vuetify/styles

// Styles
import '@/styles/main.scss' // Added
// import 'vuetify/styles' <-- comment this out