@bethinkpl/design-system 21.0.2 → 22.0.1

package/lib/styles/components/_items-list-item.scss

@@ -1,5 +1,7 @@
 @import '../../styles/settings/spacings';
 
+// This component isn't exported. It's only used in Storybook => no need to prefix class names.
+/* stylelint-disable selector-class-pattern */
 .itemsListItem {
 	width: 100%;
 
@@ -54,3 +56,4 @@
 		width: 50%;
 	}
 }
+/* stylelint-enable */

package/lib/styles/design-system.scss

@@ -20,12 +20,8 @@
 // Components
 @import 'components/buttons';
 @import 'components/icons';
-@import 'components/links';
 
 // Modifiers
-@import 'modifiers/layout';
-@import 'modifiers/media-queries';
-@import 'modifiers/shadows';
 @import 'modifiers/typography';
 @import 'settings/colors/tokens';
 @import 'settings/colors/tokens-wnl';
@@ -49,7 +45,7 @@ textarea {
 	font-family: $font-family;
 }
 
-html.thick-scrollbar {
+html.-ds-thick-scrollbar {
 	@media #{breakpoint-m()} {
 		@include scrollbar(15px, var(--raw-gray-100));
 	}

package/lib/styles/modifiers/_typography.scss

@@ -1,3 +1,4 @@
+/* stylelint-disable selector-class-pattern */
 .-textLight-DEPRECATED {
 	font-weight: 300;
 }
@@ -46,66 +47,51 @@
 	@include textS-DEPRECATED;
 }
 
-.-textM {
+.-textM-DEPRECATED {
 	@include textM-DEPRECATED;
 }
 
-.-textL {
+.-textL-DEPRECATED {
 	@include textL-DEPRECATED;
 }
 
-.-textXL {
+.-textXL-DEPRECATED {
 	@include textXL-DEPRECATED;
 }
 
-.-headlineXXS {
+.-headlineXXS-DEPRECATED {
 	@include headlineXXS-DEPRECATED;
 }
 
-.-headlineXS {
+.-headlineXS-DEPRECATED {
 	@include headlineXS-DEPRECATED;
 }
 
-.-headlineS {
+.-headlineS-DEPRECATED {
 	@include headlineS-DEPRECATED;
 }
 
-.-headlineM {
+.-headlineM-DEPRECATED {
 	@include headlineM-DEPRECATED;
 }
 
-.-headlineL {
+.-headlineL-DEPRECATED {
 	@include headlineL-DEPRECATED;
 }
 
-.-headlineXL {
+.-headlineXL-DEPRECATED {
 	@include headlineXL-DEPRECATED;
 }
 
-.-titleS {
+.-titleS-DEPRECATED {
 	@include titleS-DEPRECATED;
 }
 
-.-titleM {
+.-titleM-DEPRECATED {
 	@include titleM-DEPRECATED;
 }
 
-.-titleL {
+.-titleL-DEPRECATED {
 	@include titleL-DEPRECATED;
 }
-
-.-buttonXS {
-	@include buttonXS-DEPRECATED;
-}
-
-.-buttonS {
-	@include buttonS-DEPRECATED;
-}
-
-.-buttonM {
-	@include buttonM-DEPRECATED;
-}
-
-.-buttonL {
-	@include buttonL-DEPRECATED;
-}
+/* stylelint-enable */

package/lib/styles/settings/_icons.scss

@@ -84,7 +84,7 @@ $icon-colors: (
 
 @mixin coloredIcon($state: 'default') {
 	@each $color-name, $color-map in $icon-colors {
-		&.-#{$color-name} {
+		&.-ds-#{$color-name} {
 			color: map-get($color-map, $state);
 		}
 	}

package/lib/styles/settings/colors/_raw-bodywork.scss

@@ -1,4 +1,4 @@
-.theme-bodywork {
+.-ds-theme-bodywork {
 	--raw-white: #fff;
 	--raw-white-rgb: 255, 255, 255;
 	--theme-50: #ecf2f5;

package/lib/styles/settings/colors/_raw-wnl.scss

@@ -1,4 +1,4 @@
-.theme-wnl {
+.-ds-theme-wnl {
 	--raw-white: #fff;
 	--raw-white-rgb: 255, 255, 255;
 	--theme-50: #e8f6f6;

package/lib/styles/settings/colors/_tokens-bodywork-variables.scss

@@ -1,4 +1,4 @@
-.theme-bodywork {
+.-ds-theme-bodywork {
 	--color-primary-text: var(--theme-700);
 	--color-primary-text-hovered: var(--theme-900);
 	--color-primary-text-focused: var(--theme-900);

package/lib/styles/settings/colors/_tokens-wnl-variables.scss

@@ -1,4 +1,4 @@
-.theme-wnl {
+.-ds-theme-wnl {
 	--color-primary-text: var(--theme-600);
 	--color-primary-text-hovered: var(--theme-800);
 	--color-primary-text-focused: var(--theme-800);

package/lib/styles/storybook.scss

@@ -11,7 +11,7 @@
 
 $fontFamily: 'BlinkMacSystemFont', -apple-system, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
 	'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
-
+/* stylelint-disable selector-class-pattern */
 html,
 body {
 	font-family: 'Lato', sans-serif;
@@ -69,3 +69,4 @@ html {
 .modalHeader {
 	@include displayHeading-xs-default-regular;
 }
+/* stylelint-enable */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bethinkpl/design-system",
-  "version": "21.0.2",
+  "version": "22.0.1",
   "description": "Bethink universe design-system",
   "repository": "git@github.com:bethinkpl/design-system.git",
   "author": "nerdy@bethink.pl",

package/stylelint.config.js

@@ -43,6 +43,7 @@ module.exports = {
 			},
 		],
 		'order/properties-alphabetical-order': true,
+		'selector-class-pattern': '-?ds-[a-z][a-zA-Z_]*',
 	},
 	ignoreFiles: ['lib/styles/settings/typography/_tokens.scss'],
 };

package/tools/importers/SynchronizeColorsTokens.ts

@@ -4,11 +4,11 @@ import { cssFileFirstLine } from './helpers/modifiers';
 import { makeHexShortcut } from './helpers/colorsModifiers';
 import { arrayToFile, jsonToFile } from './helpers/fileWriter';
 import {
-	Dict,
-	ITokenJsonObject,
-	IResultJsonObject,
 	ColorsBinFiles,
 	ColorsConfigFileBin,
+	Dict,
+	IResultJsonObject,
+	ITokenJsonObject,
 } from './helpers/structures';
 
 const ImportColorsRaw = (
@@ -121,7 +121,7 @@ const ImportSingleTokenFile = (
 	let resultVariables: Array<string> = [];
 
 	if (isTheme) {
-		resultVariables.push('.theme-' + themeName + ' {');
+		resultVariables.push('.-ds-theme-' + themeName + ' {');
 	} else {
 		resultVariables.push(':root {');
 	}

package/tools/importers/helpers/modifiers.ts

@@ -34,7 +34,7 @@ export const kebabize = (str) => {
 };
 
 export const cssFileFirstLine = (isTheme: boolean, themeName: string | undefined) => {
-	return isTheme ? '.theme-' + themeName + ' {' : cssFileRootFirstLine();
+	return isTheme ? '.-ds-theme-' + themeName + ' {' : cssFileRootFirstLine();
 };
 
 export const cssFileRootFirstLine = () => {