Make scss appear in spm

merative · May 21, 2024 · dedaab5 · dedaab5
1 parent 230f970
commit dedaab5
Show file tree

Hide file tree

Showing 12 changed files with 21 additions and 60 deletions.
diff --git a/packages/carbon-addons-devenv/src/scss/addon-samples.scss b/packages/carbon-addons-devenv/src/scss/addon-samples.scss
diff --git a/packages/carbon-addons-devenv/src/scss/addons_samples/logo.scss b/packages/carbon-addons-devenv/src/scss/addons_samples/logo.scss
@@ -1,5 +1,5 @@
 .#{$prefix}--logo {
-  box-shadow: inset 0 0 0 2px $layer-01;
+  box-shadow: inset 0 0 0 2px themes.get("layer-01");
   border-radius: $border-radius-round;
   font-weight: 500;
   overflow: hidden;

diff --git a/packages/carbon-addons-devenv/src/scss/addons_samples/personfolio.scss b/packages/carbon-addons-devenv/src/scss/addons_samples/personfolio.scss
@@ -1,25 +1,25 @@
 .#{$prefix}--personfolio {
-  background-color: $layer-01;
-  color: $text-primary;
+  background-color: themes.get("layer-01");
+  color: themes.get("text-primary");
   border-radius: 6px;
   border-width: 1px 1px 1px 1px;
   border-style: solid !important;
-  padding: $spacing-05;
-  margin-top: $spacing-05;
+  padding: themes.get("spacing-05");
+  margin-top: themes.get("spacing-05");
 
   &--child {
-    border-color: $support-error;
+    border-color: themes.get("support-error");
   }
 
   &--youngadult {
-    border-color: $support-success;
+    border-color: themes.get("support-success");
   }
 
   &--adult {
-    border-color: $support-warning;
+    border-color: themes.get("support-warning");
   }
 
   &--senior {
-    border-color: $support-info;
+    border-color: themes.get("support-info");
   }
 }
diff --git a/packages/carbon-addons-devenv/src/scss/app.scss b/packages/carbon-addons-devenv/src/scss/app.scss
diff --git a/packages/carbon-addons-devenv/src/scss/carbon-components.scss b/packages/carbon-addons-devenv/src/scss/carbon-components.scss
diff --git a/packages/carbon-addons-devenv/src/scss/index.scss b/packages/carbon-addons-devenv/src/scss/index.scss
@@ -1,5 +1,9 @@
-@import "./app.scss";
+@use "@carbon/themes/scss/themes" as *;
+@use "@carbon/themes";
 
 .spm-custom-component {
-  @import "./carbon-components.scss";
+  @import "./prefix.scss";
+  @import "./variables.scss";
+  @import "./addons_samples/logo.scss";
+  @import "./addons_samples/personfolio.scss";
 }
diff --git a/packages/carbon-addons-devenv/src/scss/prefix.scss b/packages/carbon-addons-devenv/src/scss/prefix.scss
@@ -0,0 +1 @@
+$prefix: "bx";
diff --git a/packages/carbon-addons-devenv/src/scss/variables.scss b/packages/carbon-addons-devenv/src/scss/variables.scss
@@ -1,6 +1,4 @@
-$prefix: "bx";
 $border-radius-round: 100vw !default;
 $width-logo-large: 120px; // do we need small and medium too
 $width-logo-medium: 80px;
 $width-logo-small: 36px;
-$border-base: 1px solid $background;
diff --git a/packages/custom-carbon-addons/src/scss/addons/index.scss b/packages/custom-carbon-addons/src/scss/addons/index.scss
@@ -0,0 +1 @@
+// Import your custom SCSS files in this file to automatically include them in the build.
diff --git a/packages/custom-carbon-addons/src/scss/addons/readme.txt b/packages/custom-carbon-addons/src/scss/addons/readme.txt
@@ -1 +1 @@
-Add your custom SCSS files to this directory
+Add your custom SCSS files to this directory and import them in index.scss.
diff --git a/packages/custom-carbon-addons/src/scss/index.scss b/packages/custom-carbon-addons/src/scss/index.scss
@@ -1,17 +1,7 @@
-// @import "../../../carbon-addons-devenv/src/scss/app.scss";
+@use "@carbon/themes/scss/themes" as *;
+@use "@carbon/themes";
 
 .spm-custom-component {
-  //-------------------------
-  // Variable overrides
-  //-------------------------
   @import "./variables.scss";
-  //-------------------------
-  // Carbon-Components
-  //-------------------------
-  // @import "../../../carbon-addons-devenv/src/scss/carbon-components.scss";
-  //-------------------------
-  // Custom addons scss here
-  //-------------------------
-  // Sample component addons
-  //@import '../../../carbon-addons-devenv/src/scss/addon-samples.scss';
+  @import "./addons";
 }
diff --git a/packages/custom-carbon-addons/src/scss/index_latest.scss b/packages/custom-carbon-addons/src/scss/index_latest.scss
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		// Import your custom SCSS files in this file to automatically include them in the build.
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		Add your custom SCSS files to this directory
		Add your custom SCSS files to this directory and import them in index.scss.