Merge pull request #946 from Sysvale/refactor/removes-sass-deprecation-warnings

refactor/removes-sass-deprecation-warnings

Author: RafaelGondi

.storybook/main.cjs

@@ -17,9 +17,20 @@ module.exports = {
 		docsPage: "automatic"
 	},
 	async viteFinal(config, { configType }) {
-		// return the customized config
 		return mergeConfig(config, {
-			// customize the Vite config here
+			css: {
+				preprocessorOptions: {
+					scss: {
+						logger: {
+							warn(text, options) {
+								if (text.includes('[legacy-js-api]')) return;
+								console.warn(text);
+							},
+							debug() {}
+						}
+					}
+				}
+			},
 			optimizeDeps: {
 				esbuildOptions: {
 					target: ['es2020', 'safari14', 'chrome87', 'edge88', 'firefox78'],

buildtokens.js

@@ -7,16 +7,16 @@ createFile('dist/@sysvale/tokens.scss', '', function (err) {
 
 concat(
 	[
-		'src/assets/sass/borders.scss',
-		'src/assets/sass/colors.module.scss',
-		'src/assets/sass/elevation.scss',
-		'src/assets/sass/fontWeight.scss',
-		'src/assets/sass/reset.scss',
-		'src/assets/sass/shadows.scss',
-		'src/assets/sass/spacing.scss',
-		'src/assets/sass/transitions.scss',
-		'src/assets/sass/typography.scss',
-		'src/assets/sass/utils.scss',
+		'src/assets/sass/legacy-tokens/borders.scss',
+		'src/assets/sass/legacy-tokens/colors.module.scss',
+		'src/assets/sass/legacy-tokens/elevation.scss',
+		'src/assets/sass/legacy-tokens/fontWeight.scss',
+		'src/assets/sass/legacy-tokens/reset.scss',
+		'src/assets/sass/legacy-tokens/shadows.scss',
+		'src/assets/sass/legacy-tokens/spacing.scss',
+		'src/assets/sass/legacy-tokens/transitions.scss',
+		'src/assets/sass/legacy-tokens/typography.scss',
+		'src/assets/sass/legacy-tokens/utils.scss',
 	],
 	'dist/@sysvale/tokens.scss'
 );

package-lock.json

@@ -22,7 +22,7 @@
 	"scripts": {
 		"build": "vue-tsc --noEmit && vite build && node buildtokens.js",
 		"preview": "vite preview",
-		"storybook": "start-storybook --docs --no-manager-cache",
+		"storybook": "SASS_SILENCE_DEPRECATION_WARNING=1 start-storybook --docs --no-manager-cache",
 		"build-storybook": "build-storybook -s public --docs",
 		"test": "vitest",
 		"test:ui": "vitest --ui",
@@ -69,7 +69,7 @@
 		"eslint": "^8.31.0",
 		"eslint-plugin-vue": "^9.9.0",
 		"jsdom": "^20.0.0",
-		"sass": "^1.55.0",
+		"sass": "^1.89.1",
 		"typescript": "^4.6.4",
 		"vite": "^5.4.10",
 		"vitest": "^3.0.2",

package.json

@@ -0,0 +1,11 @@
+@use './legacy-tokens/tokens/index' as *;
+@import "./legacy-tokens/borders.scss";
+@import "./legacy-tokens/colors.module.scss";
+@import "./legacy-tokens/elevation.scss";
+@import "./legacy-tokens/fontWeight.scss";
+@import "./legacy-tokens/reset.scss";
+@import "./legacy-tokens/shadows.scss";
+@import "./legacy-tokens/spacing.scss";
+@import "./legacy-tokens/transitions.scss";
+@import "./legacy-tokens/typography.scss";
+@import "./legacy-tokens/utils.scss";

src/assets/sass/legacy-tokens.scss

@@ -0,0 +1,72 @@
+%input {
+	display: flex;
+	justify-content: space-between;
+	outline: 1px solid $n-50;
+	border-radius: $border-radius-extra-small;
+	width: 266px;
+	background: $n-0;
+}
+
+%placeholder {
+	color: $n-400;
+}
+
+%focused {
+	outline: 1px solid $bn-300;
+	transition: box-shadow ease-in-out 150ms, outline ease-in-out 100ms;
+	box-shadow: 0 0 0 0.1rem rgba($bn-300, 1);
+}
+
+%valid {
+	outline: 1px solid $gp-500;
+	transition: box-shadow ease-in-out 150ms, outline ease-in-out 100ms;
+}
+
+%invalid {
+	outline: 1px solid $rc-500;
+	transition: box-shadow ease-in-out 150ms, outline ease-in-out 100ms;
+}
+
+%focused-valid {
+	transition: box-shadow ease-in-out 150ms, outline ease-in-out 100ms;
+	box-shadow: 0 0 0 0.1rem rgba($gp-500, 1);
+}
+
+%focused-invalid {
+	transition: box-shadow ease-in-out 150ms, outline ease-in-out 100ms;
+	box-shadow: 0 0 0 0.1rem rgba($rc-500, 1);
+}
+
+%disabled {
+	background-color: hsl(214 25% 98% / 1);
+	border: none;
+	cursor: not-allowed !important;
+}
+
+%custom-ol, %custom-ul {
+	margin-block-start: 0;
+	margin-block-end: 0;
+	margin-inline-start: 0px;
+	margin-inline-end: 0px;
+	padding-inline-start: 4px;
+}
+
+%custom-li {
+	list-style: none;
+	display: flex;
+	line-height: 1.3;
+	margin: 0;
+	padding: 0;
+}
+
+%custom-li::before {
+	content: '•';
+	margin-right: 8px;
+}
+
+%user-select-none {
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}