fix: Updates to parent class while theming (#174)

denali-design · Apr 14, 2021 · 6754e3f · 6754e3f
1 parent 5308bb3
commit 6754e3f
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 8 deletions.
diff --git a/.storybook/preview.js b/.storybook/preview.js
@@ -15,7 +15,7 @@ export const parameters = {
   options: {
     storySort: {
       method: 'alphabetical',
-      order: ['Get Started', ['Installation', 'Theme', 'Variables'], 'Layouts', ['Breakpoints', 'Containers', 'Rows', 'Columns'], 'Components', 'Helpers'],
+      order: ['Get Started', ['Installation', 'Theming', 'Variables'], 'Layouts', ['Breakpoints', 'Containers', 'Rows', 'Columns'], 'Components', 'Helpers'],
     },
   },
 };

diff --git a/css/denali-dark-theme.css b/css/denali-dark-theme.css
@@ -4,7 +4,7 @@ html {
   -webkit-font-smoothing: antialiased;
 }
 
-.denali-dark-theme body {
+.denali-dark-theme {
   font-size: 1.4rem;
   background: #12191F;
   color: #ffffff;

diff --git a/scss/resets/denali-reset.scss b/scss/resets/denali-reset.scss
@@ -40,12 +40,10 @@ html {
 }
 
 @mixin reset-theme {
-  body {
-    font-size: $body-font-size;
-    background: $body-bg-color;
-    color: $body-text-color;
-    font-family: $font-family-sans-serif;
-  }
+  font-size: $body-font-size;
+  background: $body-bg-color;
+  color: $body-text-color;
+  font-family: $font-family-sans-serif;
 
   hr {
     background-color: $hr-bg-color;

diff --git a/stories/guides/Variables.stories.mdx b/stories/guides/Variables.stories.mdx
@@ -8,6 +8,41 @@ Listed below are all the SCSS variables for each component.
 
 ---
 
+## Globals
+
+|Variable|Value|
+|---|-----|
+|$font-family-sans-serif| Helvetica,"Arial",sans-serif !default|
+|$font-family-monospace| "SFMono-Regular",monospace !default|
+|$border-radius-sm| 4px !default|
+|$border-radius-md| 6px !default|
+|$border-radius-lg| 8px !default|
+|$border-radius-circle| 100% !default|
+|$border-radius-pill| 9999px !default|
+|$shadow-1| 0 50px 20px -50px rgba(0, 0, 0, 0.10), 0 8px 20px 0 rgba(0, 0, 0, 0.10) !default|
+|$shadow-2| 0 50px 30px -50px rgba(0, 0, 0, 0.10), 0 10px 30px 0 rgba(0, 0, 0, 0.10) !default|
+|$shadow-3| 0 50px 40px -50px rgba(0, 0, 0, 0.10), 0 15px 40px 0 rgba(0, 0, 0, 0.10) !default|
+|$shadow-4| 0 50px 50px -50px rgba(0, 0, 0, 0.10), 0 20px 50px 0 rgba(0, 0, 0, 0.10) !default|
+|$shadow-5| 0 50px 60px -50px rgba(0, 0, 0, 0.10), 0 25px 60px 0 rgba(0, 0, 0, 0.10) !default|
+|$elevation-fixed|              100 !default|
+|$elevation-sticky|             200 !default|
+|$elevation-menu|               300 !default| 
+|$elevation-modal-background|   400 !default|
+|$elevation-modal|              500 !default| 
+
+---
+
+## Reset
+
+|Variable|Value|
+|---|-----|
+|$body-bg-color| map-get($denali-grey-colors,"100") !default|
+|$body-text-color| map-get($denali-grey-colors,"800") !default|
+|$body-font-size| 1.4rem !default|
+|$hr-bg-color| map-get($denali-grey-colors,"500") !default|
+
+---
+
 ## Alert
 
 |Variable|Value|