@lucca-front/scss 17.3.8 → 17.3.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lucca-front/scss",
-  "version": "17.3.8",
+  "version": "17.3.9",
   "description": "A Sass framework for Lucca products.",
   "main": "src/main.scss",
   "scripts": {},
@@ -23,6 +23,6 @@
     "normalize.css": "^8.0.0"
   },
   "peerDependencies": {
-    "@lucca-front/icons": "v17.3.8"
+    "@lucca-front/icons": "v17.3.9"
   }
 }

package/src/components/_sample/component.scss

@@ -0,0 +1,15 @@
+// This file contains only the component mixin, this structure never changes.
+// It does not contain its selector, which is present in the index.
+// Any sub-components are placed in the `@at-root`.
+// The `@at-root` eliminates this selector by default, and its parameter can be used to restore it.
+
+@mixin component($atRoot: 'without: rule') {
+	property: value;
+	property: var(--components-sample-property1);
+
+	@at-root ($atRoot) {
+		.sample-subComponent {
+			property: var(--components-sample-property2);
+		}
+	}
+}

package/src/components/_sample/exports.scss

@@ -0,0 +1,8 @@
+// All component mixins are exported to this file.
+// This file is always present and is never modified.
+// Calling only this file generates no additional CSS weight.
+
+@forward 'vars';
+@forward 'mods';
+@forward 'states';
+@forward 'component';

package/src/components/_sample/index.scss

@@ -0,0 +1,19 @@
+// This file contains all the connections required to make the component functional.
+// The component’s mixins are requested, then assigned to classes.
+// To add the component to the list of all existing components, call it from `components/index` with `@forward 'sample';`.
+// Modifiers and states are optional and must be prefixed by `.mod-` and `.is-`.
+
+@use 'exports' as *;
+
+.sample {
+	@include vars;
+	@include component;
+
+	&.mod-sampleModifierA {
+		@include sampleModifierA;
+	}
+
+	&.is-sampleStateA {
+		@include sampleStateA;
+	}
+}

package/src/components/_sample/mods.scss

@@ -0,0 +1,7 @@
+// All component modifiers are defined in this file through various mixins.
+// The file may be empty but must be present.
+// All property values modified by a modifier are modified through a CSS variable.
+
+@mixin sampleModifierA {
+	--components-sample-property1: otherValue;
+}

package/src/components/_sample/states.scss

@@ -0,0 +1,9 @@
+// All component states are defined in this file through various mixins.
+// The file may be empty but must be present.
+// All property values modified by a state are modified through a CSS variable.
+
+@mixin sampleStateA {
+	.sample-subComponent {
+		--components-sample-property2: otherValue;
+	}
+}

package/src/components/_sample/vars.scss

@@ -0,0 +1,8 @@
+// All component CSS variables are defined in this file, which contains one mixin.
+// The mixin can be empty, but not the file.
+// CSS variables begin with `--components-componentName-`.
+
+@mixin vars {
+	--components-sample-property1: value;
+	--components-sample-property2: value;
+}