feat(Typography): improve <code> styles

removed pink colour, added better padding and proper dark theme
vuetifyjs · Oct 29, 2020 · 7877bef · 7877bef
1 parent 7a03376
commit 7877bef
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 14 deletions.
diff --git a/packages/docs/src/styles/overrides.sass b/packages/docs/src/styles/overrides.sass
@@ -57,6 +57,3 @@ ul, ol
     &.theme--dark
       border-bottom-color: #FFFFFF1F !important
 
-.v-application.theme--dark code
-  background: #1f1f1f
-  color: #d16f72
diff --git a/packages/vuetify/src/styles/elements/_code.sass b/packages/vuetify/src/styles/elements/_code.sass
@@ -1,15 +1,23 @@
+@import '../styles.sass'
+
 .v-application
   code, kbd
     border-radius: $code-kbd-border-radius
     font-size: $code-kbd-font-size
     font-weight: $code-kbd-font-weight
 
   code
-    background-color: $code-background-color
-    color: $code-color
     padding: $code-padding
 
   kbd
-    background: $kbd-background-color
-    color: $kbd-color
     padding: $kbd-padding
+    +elevation(2)
+
++theme(v-application) using ($material)
+  code
+    background-color: map-deep-get($material, 'code', 'background')
+    color: map-deep-get($material, 'code', 'color')
+
+  kbd
+    background: map-deep-get($material, 'kbd', 'background')
+    color: map-deep-get($material, 'kbd', 'color')
diff --git a/packages/vuetify/src/styles/settings/_dark.scss b/packages/vuetify/src/styles/settings/_dark.scss
@@ -42,6 +42,14 @@ $material-dark: map-deep-merge(
       ),
     'cards': map-get($material-dark-elevation-colors, '1'),
     'chips': #555,
+    'code': (
+      'background': rgba(map-get($shades, 'white'), 0.1),
+      'color': currentColor
+    ),
+    'kbd': (
+      'background': #212529,
+      'color': map-get($shades, 'white')
+    ),
     'dividers': rgba(map-get($shades, 'white'), 0.12),
     'text': (
       'theme': map-get($shades, 'white'),

diff --git a/packages/vuetify/src/styles/settings/_light.scss b/packages/vuetify/src/styles/settings/_light.scss
@@ -23,6 +23,14 @@ $material-light: map-deep-merge(
     ),
     'cards': map-get($shades, 'white'),
     'chips': #e0e0e0,
+    'code': (
+      'background': rgba(map-get($shades, 'black'), 0.05),
+      'color': currentColor
+    ),
+    'kbd': (
+      'background': #212529,
+      'color': map-get($shades, 'white')
+    ),
     'dividers': rgba(map-get($shades, 'black'), 0.12),
     'text': (
       'theme': map-get($shades, 'white'),

diff --git a/packages/vuetify/src/styles/settings/_variables.scss b/packages/vuetify/src/styles/settings/_variables.scss
@@ -255,14 +255,10 @@ $ripple-animation-visible-opacity: 0.15 !default;
 $bootable-transition: 0.2s map-get($transition, 'fast-out-slow-in') !default;
 $blockquote-font-size: 18px !default;
 $blockquote-font-weight: 300 !default;
-$code-background-color: #FBE5E1 !default;
-$code-color: #C0341D !default;
 $code-kbd-border-radius: 3px !default;
 $code-kbd-font-size: 85% !default;
-$code-kbd-font-weight: 900 !default;
-$code-padding: 0 .4rem !default;
-$kbd-color: #FFFFFF !default;
-$kbd-padding: .2rem .4rem !default;
-$kbd-background-color: #212529 !default;
+$code-kbd-font-weight: normal !default;
+$code-padding: .2em .4em !default;
+$kbd-padding: .2em .4rem !default;
 $input-top-spacing: 16px !default;
 $text-field-active-label-height: 12px !default;