feat(theme): rename code/kbd variables to match conventions

packages/docs/build/rules.ts

@@ -10,6 +10,11 @@ function addCodeRules (md: MarkdownIt) {
 
     return `<app-markup resource="${token?.attrs?.[0][1] ?? ''}" class="mb-4">${handler(tokens, idx, options, env, self)}</app-markup>`
   }
+  md.renderer.rules.code_inline = function (tokens, idx) {
+    const token = tokens[idx]
+
+    return `<code class="v-code">${md.utils.escapeHtml(token.content)}</code>`
+  }
 }
 
 function addImageRules (md: MarkdownIt) {

packages/docs/src/App.vue

@@ -79,11 +79,6 @@
   a:not(:hover)
     text-decoration: none
 
-  code
-    padding: 0.1em 0.2em
-    border-radius: 4px
-    background: rgba(var(--v-border-color), var(--v-idle-opacity))
-
   p
     margin-bottom: 1rem
 

packages/docs/src/components/api/Section.vue

@@ -115,7 +115,7 @@
     .v-markdown :deep(p)
       margin-bottom: 0
 
-    :deep(.token.operator)
+    .token.operator
       background: none
 
   .name-item

packages/docs/src/pages/en/getting-started/upgrade-guide.md

@@ -17,8 +17,7 @@ Many of these changes can be applied automatically by [eslint-plugin-vuetify](ht
 
 - **Vuetify** class removed, use **createVuetify** function
 
-```js
-// 2.x
+```js { resource="2.x" }
 Vue.use(Vuetify)
 
 const vuetify = new Vuetify({ ... })
@@ -27,29 +26,28 @@ const app = new Vue({
   vuetify,
   ...
 })
-
 ```
 
-```js
-// 3.0
+```js { resource="3.0" }
 const app = createVue()
 
 const vuetify = createVuetify({ ... })
 
 app.use(vuetify)
 ```
 
-`import ... from 'vuetify'` is now a-la-carte, import `'vuetify/dist/vuetify.js'` instead to get the complete bundle (not recommended). `'vuetify/lib'` should no longer be used, change to `'vuetify'`/`'vuetify/components'`/`'vuetify/directives'` as appropriate.
-Only component styles are included, global styles must be imported separately from `'vuetify/styles'`.
+- `import ... from 'vuetify'` is now a-la-carte, import `'vuetify/dist/vuetify.js'` instead to get the complete bundle (not recommended).
+- `'vuetify/lib'` should no longer be used, change to `'vuetify'` / `'vuetify/components'` / `'vuetify/directives'` as appropriate.
+- Only component styles are included, global styles must be imported separately from `'vuetify/styles'`.
 
 ## Features
 
 ### Layout
 
 ### Theme
 
-- Multiple themes are now supported, so `light`/`dark` props have been removed from components. Use `v-theme-provider` to set the theme for a specific component tree.
-- Theme colors set their foreground text color automatically, if you were using `light`/`dark` to get a different text color you probably don't need it anymore.
+- Multiple themes are now supported, so `light` / `dark` props have been removed from components. Use `v-theme-provider` to set the theme for a specific component tree.
+- Theme colors set their foreground text color automatically, if you were using `light` / `dark` to get a different text color you probably don't need it anymore.
 - The variant naming scheme has changed slightly, it is now a single word instead of two. For example, `primary darken-1` is now `primary-darken-1`.
 - Color classes have been renamed:
   - Backgrounds have a `bg-` prefix, for example `.primary` is now `.bg-primary`.
@@ -63,7 +61,7 @@ Only component styles are included, global styles must be imported separately fr
 - `value` prop has been replaced by `model-value` on components that support `v-model` usage.
 - `@input` event has been replaced by **@update:model-value** on components that support `v-model` usage.
 - `left` and `right` have been replaced by `start` and `end` respectively. This applies to utility classes too, for example `.border-r` is now `.border-e`.
-- Size props `small`/`medium`/`large` etc. have been combined into a single `size` prop.
+- Size props `small` / `medium` / `large` etc. have been combined into a single `size` prop.
 - `background-color` prop has been renamed to `bg-color`.
 
 ### Input components
@@ -92,7 +90,11 @@ Only component styles are included, global styles must be imported separately fr
 - `item-text` has been renamed to `item-title`, and now looks up the `title` property on item objects by default. `value` is unchanged.
 - `item-disabled` has been removed, and `disabled`, `header`, `divider`, and `avatar` properties are ignored on item objects.
   - Additional props to pass to `v-list-item` can be specified with the `item-props` prop. `item-props` can be a function that takes the item object and returns an object of props, or set to boolean `true` to spread item objects directly as props.
-- The `item` object in slots is now an InternalItem object, the original item object is available as `item.raw`.
+- The `item` object in slots is now an `InternalItem` object, the original item object is available as `item.raw`.
 - The `item` slot will no longer generate a `v-list-item` component automatically, instead a `props` object is supplied with the required event listeners and props:
-  - `<template #item="{ props }"><v-list-item v-bind="props"></v-list-item>\</template>`
+  - ```html
+    <template #item="{ props }">
+      <v-list-item v-bind="props"></v-list-item>
+    </template>
+    ```
 - The `chip` slot should be used instead of `selection` if the `chips` prop is set, this will provide some default values to the chips automatically.

packages/vuetify/src/components/VCode/VCode.sass

@@ -1,8 +1,10 @@
 @use './variables' as *
 
 .v-code
-  background-color: rgb($code-background-color)
+  background-color: $code-background-color
+  color: $code-color
   border-radius: $code-border-radius
+  line-height: $code-line-height
   font-size: $code-font-size
   font-weight: $code-font-weight
   padding: $code-padding

packages/vuetify/src/components/VCode/_variables.scss

@@ -1,5 +1,7 @@
-$code-background-color: var(--v-code-background-color) !default;
-$code-border-radius: 3px !default;
-$code-font-size: 85% !default;
+$code-background-color: rgb(var(--v-theme-code)) !default;
+$code-color: rgb(var(--v-theme-on-code)) !default;
+$code-border-radius: 4px !default;
+$code-line-height: 1.8 !default;
+$code-font-size: 0.9em !default;
 $code-font-weight: normal !default;
 $code-padding: .2em .4em !default;

packages/vuetify/src/components/VKbd/VKbd.sass

@@ -2,9 +2,9 @@
 @use './variables' as *
 
 .v-kbd
-  background: rgb(var(--v-kbd-background-color))
+  background: rgb(var(--v-theme-kbd))
+  color: rgb(var(--v-theme-on-kbd))
   border-radius: $kbd-border-radius
-  color: rgb(var(--v-kbd-color))
   font-size: $kbd-font-size
   font-weight: $kbd-font-weight
   padding: $kbd-padding

packages/vuetify/src/composables/__tests__/__snapshots__/theme.spec.ts.snap

@@ -53,9 +53,10 @@ exports[`createTheme should create style element 1`] = `
       --v-activated-opacity: 0.12;
       --v-pressed-opacity: 0.12;
       --v-dragged-opacity: 0.08;
-      --v-kbd-background-color: 33, 37, 41;
-      --v-kbd-color: 255, 255, 255;
-      --v-code-background-color: 194, 194, 194;
+      --v-theme-kbd: 33, 37, 41;
+      --v-theme-on-kbd: 255, 255, 255;
+      --v-theme-code: 245, 245, 245;
+      --v-theme-on-code: 0, 0, 0;
     }
     .v-theme--dark {
       color-scheme: dark;
@@ -104,9 +105,10 @@ exports[`createTheme should create style element 1`] = `
       --v-activated-opacity: 0.12;
       --v-pressed-opacity: 0.16;
       --v-dragged-opacity: 0.08;
-      --v-kbd-background-color: 33, 37, 41;
-      --v-kbd-color: 255, 255, 255;
-      --v-code-background-color: 183, 183, 183;
+      --v-theme-kbd: 33, 37, 41;
+      --v-theme-on-kbd: 255, 255, 255;
+      --v-theme-code: 52, 52, 52;
+      --v-theme-on-code: 204, 204, 204;
     }
     .bg-background {
       --v-theme-overlay-multiplier: var(--v-theme-background-overlay-multiplier);

packages/vuetify/src/composables/theme.ts

@@ -139,9 +139,10 @@ const defaultThemeOptions: Exclude<ThemeOptions, false> = {
         'activated-opacity': 0.12,
         'pressed-opacity': 0.12,
         'dragged-opacity': 0.08,
-        'kbd-background-color': '#212529',
-        'kbd-color': '#FFFFFF',
-        'code-background-color': '#C2C2C2',
+        'theme-kbd': '#212529',
+        'theme-on-kbd': '#FFFFFF',
+        'theme-code': '#F5F5F5',
+        'theme-on-code': '#000000',
       },
     },
     dark: {
@@ -173,9 +174,10 @@ const defaultThemeOptions: Exclude<ThemeOptions, false> = {
         'activated-opacity': 0.12,
         'pressed-opacity': 0.16,
         'dragged-opacity': 0.08,
-        'kbd-background-color': '#212529',
-        'kbd-color': '#FFFFFF',
-        'code-background-color': '#B7B7B7',
+        'theme-kbd': '#212529',
+        'theme-on-kbd': '#FFFFFF',
+        'theme-code': '#343434',
+        'theme-on-code': '#CCCCCC',
       },
     },
   },