Add CSS layer histoire

histoire-dev · Jul 28, 2024 · ea79ca2 · ea79ca2
1 parent 3814da9
commit ea79ca2
Show file tree

Hide file tree

Showing 3 changed files with 8,437 additions and 6,318 deletions.
diff --git a/packages/histoire-app/src/app/style/main.pcss b/packages/histoire-app/src/app/style/main.pcss
@@ -1,9 +1,9 @@
 @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Display&display=swap');
-@import 'floating-vue/dist/style.css';
-@import '@histoire/controls/dist/style.css';
+@import 'floating-vue/dist/style.css' layer(histoire);
+@import '@histoire/controls/dist/style.css' layer(histoire);
 
-@import 'floating.pcss';
-@import 'transitions.pcss';
+@import 'floating.pcss' layer(histoire);
+@import 'transitions.pcss' layer(histoire);
 
 *,
 ::before,

diff --git a/packages/histoire-app/src/app/style/sandbox.css b/packages/histoire-app/src/app/style/sandbox.css
@@ -1,24 +1,26 @@
-@import '@histoire/controls/dist/style.css';
+@import '@histoire/controls/dist/style.css' layer(histoire);
 
-html,
-body {
-  background: transparent !important;
-}
+@layer histoire {
+  html,
+  body {
+    background: transparent !important;
+  }
 
-body {
-  margin: 0;
-}
+  body {
+    margin: 0;
+  }
 
-html {
-  font-size: 1rem;
-  font-family: 'Noto Sans Display', system-ui, sans-serif;
-}
+  html {
+    font-size: 1rem;
+    font-family: 'Noto Sans Display', system-ui, sans-serif;
+  }
 
-.htw-sandbox-hidden {
-  display: none;
-}
+  .htw-sandbox-hidden {
+    display: none;
+  }
 
-.__histoire-render-story:not(.__histoire-render-custom-controls) {
-  overflow: auto;
-  min-height: 100%;
+  .__histoire-render-story:not(.__histoire-render-custom-controls) {
+    overflow: auto;
+    min-height: 100%;
+  }
 }