beathers 5.7.2 → 5.7.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (32) hide show
  1. package/.prettierrc.js +8 -8
  2. package/CHANGELOG +274 -267
  3. package/css/beathers.min.css +3 -3
  4. package/css/beathers.min.css.map +1 -1
  5. package/docs/colors.md +250 -250
  6. package/docs/grid-system.md +130 -130
  7. package/docs/shaping.md +272 -272
  8. package/docs/typography.md +124 -124
  9. package/package.json +105 -101
  10. package/readme.md +301 -301
  11. package/scripts/cli.js +0 -0
  12. package/scripts/helpers/Merge.d.ts.map +1 -1
  13. package/scripts/helpers/Merge.js +4 -3
  14. package/scss/_variables.scss +106 -106
  15. package/scss/beathers.min.scss +14 -15
  16. package/scss/functions/_colors.scss +230 -230
  17. package/scss/functions/_mediaQueries.scss +136 -136
  18. package/scss/functions/_others.scss +79 -79
  19. package/scss/functions/_typographic.scss +129 -129
  20. package/scss/functions/_validations.scss +251 -251
  21. package/scss/settings/_configs.scss +270 -270
  22. package/scss/settings/_defaults.scss +214 -214
  23. package/scss/settings/_index.scss +90 -90
  24. package/scss/style/_button.scss +101 -101
  25. package/scss/style/_colors.scss +146 -146
  26. package/scss/style/_dialog.scss +146 -146
  27. package/scss/style/_glass.scss +80 -80
  28. package/scss/style/_grid.scss +95 -95
  29. package/scss/style/_loader.scss +62 -62
  30. package/scss/style/_resets.scss +168 -168
  31. package/scss/style/_shaping.scss +439 -432
  32. package/scss/style/_typographic.scss +345 -345
package/docs/typography.md CHANGED
@@ -1,124 +1,124 @@
1
- # Typography Documentation
2
-
3
- > Simple guide to using typography utilities in Beathers CSS framework
4
-
5
- ## Table of Contents
6
-
7
- - [Font Sizes](#font-sizes)
8
- - [Text Transformations](#text-transformations)
9
- - [Text Decorations](#text-decorations)
10
- - [Text Alignment](#text-alignment)
11
- - [Text Truncation](#text-truncation)
12
-
13
- ---
14
-
15
- ## Font Sizes
16
-
17
- ### Normal State
18
-
19
- ```html
20
- <h1 class="h1">Heading 1 (96px)</h1>
21
- <h2 class="h2">Heading 2 (60px)</h2>
22
- <h3 class="h3">Heading 3 (40px)</h3>
23
- <h4 class="h4">Heading 4 (34px)</h4>
24
- <h5 class="h5">Heading 5 (24px)</h5>
25
- <h6 class="h6">Heading 6 (20px)</h6>
26
-
27
- <p class="subtitle1">Subtitle 1 (16px)</p>
28
- <p class="subtitle2">Subtitle 2 (14px)</p>
29
- <p class="body1">Body 1 (16px)</p>
30
- <p class="body2">Body 2 (14px)</p>
31
- <p class="button">Button (14px)</p>
32
- <p class="caption">Caption (12px)</p>
33
- <p class="overline">Overline (10px)</p>
34
- ```
35
-
36
- ### Responsive Sizes
37
-
38
- ```html
39
- <h1 class="h1 md:h2 lg:h3">Responsive heading</h1>
40
- <p class="body1 sm:subtitle1 md:h6">Responsive text</p>
41
- <span class="caption lg:body2">Responsive small text</span>
42
- ```
43
-
44
- ---
45
-
46
- ## Text Transformations
47
-
48
- ### Normal State
49
-
50
- ```html
51
- <p class="uppercase">UPPERCASE TEXT</p>
52
- <p class="lowercase">lowercase text</p>
53
- <p class="capitalize">Capitalize Text</p>
54
- ```
55
-
56
- ### Responsive Transformations
57
-
58
- ```html
59
- <p class="capitalize md:uppercase">Responsive transform</p>
60
- <p class="lowercase lg:capitalize">Mobile lowercase, desktop capitalize</p>
61
- ```
62
-
63
- ---
64
-
65
- ## Text Decorations
66
-
67
- ### Normal State
68
-
69
- ```html
70
- <p class="underline">Underlined text</p>
71
- <p class="line-through">Strikethrough text</p>
72
- <p class="wavy">Wavy decoration</p>
73
- <p class="double">Double decoration</p>
74
- <p class="dotted">Dotted decoration</p>
75
- <p class="dashed">Dashed decoration</p>
76
- ```
77
-
78
- ### Combined Decorations
79
-
80
- ```html
81
- <p class="underline capitalize">Underlined and capitalized</p>
82
- <p class="line-through uppercase">Strikethrough and uppercase</p>
83
- ```
84
-
85
- ---
86
-
87
- ## Text Alignment
88
-
89
- ### Normal State
90
-
91
- ```html
92
- <p class="text-left">Left aligned text</p>
93
- <p class="text-start">Start aligned text</p>
94
- <p class="text-center">Center aligned text</p>
95
- <p class="text-right">Right aligned text</p>
96
- <p class="text-end">End aligned text</p>
97
- <p class="text-justify">Justified text</p>
98
- ```
99
-
100
- ### Responsive Alignment
101
-
102
- ```html
103
- <p class="text-left md:text-center lg:text-right">Responsive alignment</p>
104
- <p class="text-center sm:text-left">Mobile center, desktop left</p>
105
- ```
106
-
107
- ---
108
-
109
- ## Text Truncation
110
-
111
- ### Normal State
112
-
113
- ```html
114
- <p class="text-lines:1">Single line truncation with ellipsis...</p>
115
- <p class="text-lines:2">Two line truncation with ellipsis after second line...</p>
116
- <p class="text-lines:3">Three line truncation with ellipsis after third line...</p>
117
- ```
118
-
119
- ### Responsive Truncation
120
-
121
- ```html
122
- <p class="text-lines:2 md:text-lines:3 lg:text-lines:1">Responsive truncation</p>
123
- <p class="text-lines:1 sm:text-lines:2">Mobile 1 line, desktop 2 lines</p>
124
- ```
1
+ # Typography Documentation
2
+
3
+ > Simple guide to using typography utilities in Beathers CSS framework
4
+
5
+ ## Table of Contents
6
+
7
+ - [Font Sizes](#font-sizes)
8
+ - [Text Transformations](#text-transformations)
9
+ - [Text Decorations](#text-decorations)
10
+ - [Text Alignment](#text-alignment)
11
+ - [Text Truncation](#text-truncation)
12
+
13
+ ---
14
+
15
+ ## Font Sizes
16
+
17
+ ### Normal State
18
+
19
+ ```html
20
+ <h1 class="h1">Heading 1 (96px)</h1>
21
+ <h2 class="h2">Heading 2 (60px)</h2>
22
+ <h3 class="h3">Heading 3 (40px)</h3>
23
+ <h4 class="h4">Heading 4 (34px)</h4>
24
+ <h5 class="h5">Heading 5 (24px)</h5>
25
+ <h6 class="h6">Heading 6 (20px)</h6>
26
+
27
+ <p class="subtitle1">Subtitle 1 (16px)</p>
28
+ <p class="subtitle2">Subtitle 2 (14px)</p>
29
+ <p class="body1">Body 1 (16px)</p>
30
+ <p class="body2">Body 2 (14px)</p>
31
+ <p class="button">Button (14px)</p>
32
+ <p class="caption">Caption (12px)</p>
33
+ <p class="overline">Overline (10px)</p>
34
+ ```
35
+
36
+ ### Responsive Sizes
37
+
38
+ ```html
39
+ <h1 class="h1 md:h2 lg:h3">Responsive heading</h1>
40
+ <p class="body1 sm:subtitle1 md:h6">Responsive text</p>
41
+ <span class="caption lg:body2">Responsive small text</span>
42
+ ```
43
+
44
+ ---
45
+
46
+ ## Text Transformations
47
+
48
+ ### Normal State
49
+
50
+ ```html
51
+ <p class="uppercase">UPPERCASE TEXT</p>
52
+ <p class="lowercase">lowercase text</p>
53
+ <p class="capitalize">Capitalize Text</p>
54
+ ```
55
+
56
+ ### Responsive Transformations
57
+
58
+ ```html
59
+ <p class="capitalize md:uppercase">Responsive transform</p>
60
+ <p class="lowercase lg:capitalize">Mobile lowercase, desktop capitalize</p>
61
+ ```
62
+
63
+ ---
64
+
65
+ ## Text Decorations
66
+
67
+ ### Normal State
68
+
69
+ ```html
70
+ <p class="underline">Underlined text</p>
71
+ <p class="line-through">Strikethrough text</p>
72
+ <p class="wavy">Wavy decoration</p>
73
+ <p class="double">Double decoration</p>
74
+ <p class="dotted">Dotted decoration</p>
75
+ <p class="dashed">Dashed decoration</p>
76
+ ```
77
+
78
+ ### Combined Decorations
79
+
80
+ ```html
81
+ <p class="underline capitalize">Underlined and capitalized</p>
82
+ <p class="line-through uppercase">Strikethrough and uppercase</p>
83
+ ```
84
+
85
+ ---
86
+
87
+ ## Text Alignment
88
+
89
+ ### Normal State
90
+
91
+ ```html
92
+ <p class="text-left">Left aligned text</p>
93
+ <p class="text-start">Start aligned text</p>
94
+ <p class="text-center">Center aligned text</p>
95
+ <p class="text-right">Right aligned text</p>
96
+ <p class="text-end">End aligned text</p>
97
+ <p class="text-justify">Justified text</p>
98
+ ```
99
+
100
+ ### Responsive Alignment
101
+
102
+ ```html
103
+ <p class="text-left md:text-center lg:text-right">Responsive alignment</p>
104
+ <p class="text-center sm:text-left">Mobile center, desktop left</p>
105
+ ```
106
+
107
+ ---
108
+
109
+ ## Text Truncation
110
+
111
+ ### Normal State
112
+
113
+ ```html
114
+ <p class="text-lines:1">Single line truncation with ellipsis...</p>
115
+ <p class="text-lines:2">Two line truncation with ellipsis after second line...</p>
116
+ <p class="text-lines:3">Three line truncation with ellipsis after third line...</p>
117
+ ```
118
+
119
+ ### Responsive Truncation
120
+
121
+ ```html
122
+ <p class="text-lines:2 md:text-lines:3 lg:text-lines:1">Responsive truncation</p>
123
+ <p class="text-lines:1 sm:text-lines:2">Mobile 1 line, desktop 2 lines</p>
124
+ ```
package/package.json CHANGED
@@ -1,101 +1,105 @@
1
- {
2
- "name": "beathers",
3
- "version": "5.7.2",
4
- "type": "module",
5
- "description": "Beather is a lightweight SCSS library that serves as a comprehensive design system for your projects. It offers a structured and consistent approach to manage colors, fonts, and other design related variables, making it easier to maintain a cohesive visual identity across your application.",
6
- "main": "index.js",
7
- "types": "index.d.ts",
8
- "exports": {
9
- ".": {
10
- "import": "./index.js",
11
- "require": "./index.js",
12
- "types": "./index.d.ts"
13
- },
14
- "./css/beathers.min.css": "./css/beathers.min.css",
15
- "./css/beathers-icons.min.css": "./css/beathers-icons.min.css",
16
- "./css/*": "./css/*",
17
- "./scss/*": "./scss/*",
18
- "./package.json": "./package.json"
19
- },
20
- "bin": {
21
- "beathers": "scripts/cli.js"
22
- },
23
- "keywords": [
24
- "design-system",
25
- "scss-library",
26
- "css-framework",
27
- "utility-first",
28
- "responsive-design",
29
- "dark-mode",
30
- "light-mode",
31
- "theming",
32
- "css-variables",
33
- "typography",
34
- "flexbox",
35
- "css-grid",
36
- "media-queries",
37
- "atomic-css",
38
- "modular-css",
39
- "frontend-framework",
40
- "scalable-css",
41
- "customizable-theme",
42
- "component-library",
43
- "ui-framework"
44
- ],
45
- "author": "Bhoenix studio",
46
- "license": "MIT",
47
- "homepage": "https://bhoenixstudio.com/beathers",
48
- "dependencies": {
49
- "fs-extra": "^11.3.0",
50
- "sass": "^1.88.0"
51
- },
52
- "devDependencies": {
53
- "@eslint/js": "^9.26.0",
54
- "@types/fs-extra": "^11.0.4",
55
- "@types/node": "^22.15.21",
56
- "@types/scss-parser": "^1.0.4",
57
- "autoprefixer": "^10.4.21",
58
- "copyfiles": "^2.4.1",
59
- "eslint": "^9.26.0",
60
- "eslint-plugin-css": "^0.11.0",
61
- "eslint-plugin-import": "^2.31.0",
62
- "globals": "^16.1.0",
63
- "nodemon": "^3.1.10",
64
- "npm-run-all": "^4.1.5",
65
- "postcss": "^8.5.3",
66
- "postcss-cli": "^11.0.1",
67
- "postcss-scss": "^4.0.9",
68
- "prettier": "^3.5.3",
69
- "rimraf": "^6.0.1",
70
- "stylelint": "^16.19.1",
71
- "stylelint-config-prettier": "^9.0.5",
72
- "stylelint-config-standard-scss": "^15.0.1",
73
- "stylelint-scss": "^6.12.0",
74
- "tsx": "^4.19.4",
75
- "typescript": "^5.8.3",
76
- "typescript-eslint": "^8.32.1"
77
- },
78
- "files": [
79
- "css/**/*.{css,map}",
80
- "**/*.{js,d.ts,d.ts.map}",
81
- "scss/**/*.scss",
82
- "public/images/logo.png",
83
- "public/fonts/*.{woff,woff2}",
84
- "docs/",
85
- "docs/**/*.md",
86
- "CHANGELOG",
87
- "readme.md"
88
- ],
89
- "scripts": {
90
- "watch": "nodemon --watch src/scss/ --ext scss --exec \"npm run build:dev\"",
91
- "build:dev": "sass --style expanded --source-map --embed-sources --no-error-css src/scss/:css/",
92
- "build:pack": "sass --style compressed --source-map --embed-sources --no-error-css src/scss/:css/",
93
- "build:test": "tsx src/scripts/cli.ts",
94
- "build:clean": "rimraf css scss && rimraf index.js index.d.ts index.d.ts.map && rimraf data scripts",
95
- "build:publish": "npm run build:clean && tsc && copyfiles -u 2 \"src/scss/**/*\" scss/ && npm run build:pack",
96
- "lint": "eslint . && stylelint \"**/*.scss\"",
97
- "lint:fix": "eslint . --fix && stylelint \"**/*.scss\" --fix",
98
- "format:check": "prettier --check --ignore-path .gitignore .",
99
- "format:fix": "prettier --write --ignore-path .gitignore . && npm run lint"
100
- }
101
- }
1
+ {
2
+ "name": "beathers",
3
+ "version": "5.7.6",
4
+ "type": "module",
5
+ "description": "Beather is a lightweight SCSS library that serves as a comprehensive design system for your projects. It offers a structured and consistent approach to manage colors, fonts, and other design related variables, making it easier to maintain a cohesive visual identity across your application.",
6
+ "main": "index.js",
7
+ "types": "index.d.ts",
8
+ "exports": {
9
+ ".": {
10
+ "import": "./index.js",
11
+ "require": "./index.js",
12
+ "types": "./index.d.ts"
13
+ },
14
+ "./css/beathers.min.css": "./css/beathers.min.css",
15
+ "./css/beathers-icons.min.css": "./css/beathers-icons.min.css",
16
+ "./css/*": "./css/*",
17
+ "./scss/*": "./scss/*",
18
+ "./package.json": "./package.json"
19
+ },
20
+ "repository": {
21
+ "type": "git",
22
+ "url": "https://github.com/BhoenixStudio/Beathers.git"
23
+ },
24
+ "bin": {
25
+ "beathers": "scripts/cli.js"
26
+ },
27
+ "scripts": {
28
+ "watch": "nodemon --watch src/scss/ --ext scss --exec \"npm run build:dev\"",
29
+ "build:dev": "sass --style expanded --source-map --embed-sources --no-error-css src/scss/:css/",
30
+ "build:pack": "sass --style compressed --source-map --embed-sources --no-error-css src/scss/:css/",
31
+ "build:test": "tsx src/scripts/cli.ts",
32
+ "build:clean": "rimraf css scss && rimraf index.js index.d.ts index.d.ts.map && rimraf data scripts",
33
+ "build:publish": "npm run build:clean && tsc && copyfiles -u 2 \"src/scss/**/*\" scss/ && npm run build:pack",
34
+ "lint": "eslint . && stylelint \"**/*.scss\"",
35
+ "lint:fix": "eslint . --fix && stylelint \"**/*.scss\" --fix",
36
+ "format:check": "prettier --check --ignore-path .gitignore .",
37
+ "format:fix": "prettier --write --ignore-path .gitignore . && npm run lint"
38
+ },
39
+ "keywords": [
40
+ "design-system",
41
+ "scss-library",
42
+ "css-framework",
43
+ "utility-first",
44
+ "responsive-design",
45
+ "dark-mode",
46
+ "light-mode",
47
+ "theming",
48
+ "css-variables",
49
+ "typography",
50
+ "flexbox",
51
+ "css-grid",
52
+ "media-queries",
53
+ "atomic-css",
54
+ "modular-css",
55
+ "frontend-framework",
56
+ "scalable-css",
57
+ "customizable-theme",
58
+ "component-library",
59
+ "ui-framework"
60
+ ],
61
+ "author": "Bhoenix studio",
62
+ "license": "MIT",
63
+ "homepage": "https://bhoenixstudio.com/beathers",
64
+ "dependencies": {
65
+ "fs-extra": "^11.3.0",
66
+ "sass": "^1.88.0"
67
+ },
68
+ "devDependencies": {
69
+ "@eslint/js": "^9.26.0",
70
+ "@types/fs-extra": "^11.0.4",
71
+ "@types/node": "^22.15.21",
72
+ "@types/scss-parser": "^1.0.4",
73
+ "autoprefixer": "^10.4.21",
74
+ "copyfiles": "^2.4.1",
75
+ "eslint": "^9.26.0",
76
+ "eslint-plugin-css": "^0.11.0",
77
+ "eslint-plugin-import": "^2.31.0",
78
+ "globals": "^16.1.0",
79
+ "nodemon": "^3.1.10",
80
+ "npm-run-all": "^4.1.5",
81
+ "postcss": "^8.5.3",
82
+ "postcss-cli": "^11.0.1",
83
+ "postcss-scss": "^4.0.9",
84
+ "prettier": "^3.5.3",
85
+ "rimraf": "^6.0.1",
86
+ "stylelint": "^16.19.1",
87
+ "stylelint-config-prettier": "^9.0.5",
88
+ "stylelint-config-standard-scss": "^15.0.1",
89
+ "stylelint-scss": "^6.12.0",
90
+ "tsx": "^4.19.4",
91
+ "typescript": "^5.8.3",
92
+ "typescript-eslint": "^8.32.1"
93
+ },
94
+ "files": [
95
+ "css/**/*.{css,map}",
96
+ "**/*.{js,d.ts,d.ts.map}",
97
+ "scss/**/*.scss",
98
+ "public/images/logo.png",
99
+ "public/fonts/*.{woff,woff2}",
100
+ "docs/",
101
+ "docs/**/*.md",
102
+ "CHANGELOG",
103
+ "readme.md"
104
+ ]
105
+ }