@fastwork/xosmoz-css 0.0.2
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.
- package/README.md +74 -0
- package/dist/index.css +14 -0
- package/dist/index.d.mts +13 -0
- package/dist/index.d.ts +13 -0
- package/dist/index.js +8 -0
- package/dist/index.js.map +1 -0
- package/dist/index.mjs +6 -0
- package/dist/index.mjs.map +1 -0
- package/dist/radius.css +40 -0
- package/dist/typography.css +148 -0
- package/package.json +49 -0
package/README.md
ADDED
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
# @fastwork/xosmoz-css
|
|
2
|
+
|
|
3
|
+
CSS utility classes for the Xosmoz design system.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install @fastwork/xosmoz-css @fastwork/xosmoz-theme
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Usage
|
|
12
|
+
|
|
13
|
+
Import the utilities along with the theme:
|
|
14
|
+
|
|
15
|
+
```javascript
|
|
16
|
+
// Import theme tokens first
|
|
17
|
+
import '@fastwork/xosmoz-theme/base.css';
|
|
18
|
+
import '@fastwork/xosmoz-theme/themes.css';
|
|
19
|
+
|
|
20
|
+
// Import utility classes
|
|
21
|
+
import '@fastwork/xosmoz-css';
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
Or import specific utility categories:
|
|
25
|
+
|
|
26
|
+
```javascript
|
|
27
|
+
import '@fastwork/xosmoz-css/typography.css';
|
|
28
|
+
import '@fastwork/xosmoz-css/radius.css';
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
### Typography Classes
|
|
32
|
+
|
|
33
|
+
Use complete typography styles with a single class:
|
|
34
|
+
|
|
35
|
+
```html
|
|
36
|
+
<h1 class="font-h1">Main Heading</h1>
|
|
37
|
+
<h2 class="font-h2">Section Heading</h2>
|
|
38
|
+
<p class="font-body-1">Body text</p>
|
|
39
|
+
<span class="font-subtitle-1-bold">Subtitle</span>
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
**Available classes**:
|
|
43
|
+
- Headings: `.font-h1` to `.font-h6`
|
|
44
|
+
- Titles: `.font-title-1` to `.font-title-4`
|
|
45
|
+
- Subtitles: `.font-subtitle-1-bold`, `.font-subtitle-1-regular`, etc.
|
|
46
|
+
- Body: `.font-body-1` to `.font-body-4`
|
|
47
|
+
|
|
48
|
+
**Responsive**: All typography classes automatically adapt between desktop and mobile sizes.
|
|
49
|
+
|
|
50
|
+
### Border Radius Classes
|
|
51
|
+
|
|
52
|
+
```html
|
|
53
|
+
<div class="rounded-md">Medium rounded corners</div>
|
|
54
|
+
<button class="rounded-full">Pill button</button>
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
**Available classes**: `.rounded-none`, `.rounded-sm`, `.rounded-base`, `.rounded-md`, `.rounded-lg`, `.rounded-xl`, `.rounded-2xl`, `.rounded-3xl`, `.rounded-full`
|
|
58
|
+
|
|
59
|
+
## Development
|
|
60
|
+
|
|
61
|
+
```bash
|
|
62
|
+
# Build the package
|
|
63
|
+
yarn build
|
|
64
|
+
|
|
65
|
+
# Watch mode
|
|
66
|
+
yarn dev
|
|
67
|
+
|
|
68
|
+
# Lint
|
|
69
|
+
yarn lint
|
|
70
|
+
```
|
|
71
|
+
|
|
72
|
+
## License
|
|
73
|
+
|
|
74
|
+
MIT
|
package/dist/index.css
ADDED
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Xosmoz CSS Utilities
|
|
3
|
+
*
|
|
4
|
+
* Pre-built CSS utility classes using Xosmoz design tokens
|
|
5
|
+
* Requires @fastwork/xosmoz-theme to be imported first
|
|
6
|
+
*
|
|
7
|
+
* Usage:
|
|
8
|
+
* import '@fastwork/xosmoz-theme/base.css';
|
|
9
|
+
* import '@fastwork/xosmoz-theme/themes.css';
|
|
10
|
+
* import '@fastwork/xosmoz-css';
|
|
11
|
+
*/
|
|
12
|
+
|
|
13
|
+
@import './typography.css';
|
|
14
|
+
@import './radius.css';
|
package/dist/index.d.mts
ADDED
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @fastwork/xosmoz-css
|
|
3
|
+
*
|
|
4
|
+
* CSS utility classes for Xosmoz design system
|
|
5
|
+
*
|
|
6
|
+
* Import CSS files directly:
|
|
7
|
+
* import '@fastwork/xosmoz-css/typography.css'
|
|
8
|
+
* import '@fastwork/xosmoz-css/radius.css'
|
|
9
|
+
* import '@fastwork/xosmoz-css' // All utilities
|
|
10
|
+
*/
|
|
11
|
+
declare const version = "0.0.1";
|
|
12
|
+
|
|
13
|
+
export { version };
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @fastwork/xosmoz-css
|
|
3
|
+
*
|
|
4
|
+
* CSS utility classes for Xosmoz design system
|
|
5
|
+
*
|
|
6
|
+
* Import CSS files directly:
|
|
7
|
+
* import '@fastwork/xosmoz-css/typography.css'
|
|
8
|
+
* import '@fastwork/xosmoz-css/radius.css'
|
|
9
|
+
* import '@fastwork/xosmoz-css' // All utilities
|
|
10
|
+
*/
|
|
11
|
+
declare const version = "0.0.1";
|
|
12
|
+
|
|
13
|
+
export { version };
|
package/dist/index.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/index.ts"],"names":["version"],"mappings":";;;AAWO,IAAMA,OAAAA,GAAU","file":"index.js","sourcesContent":["/**\n * @fastwork/xosmoz-css\n *\n * CSS utility classes for Xosmoz design system\n *\n * Import CSS files directly:\n * import '@fastwork/xosmoz-css/typography.css'\n * import '@fastwork/xosmoz-css/radius.css'\n * import '@fastwork/xosmoz-css' // All utilities\n */\n\nexport const version = '0.0.1';\n"]}
|
package/dist/index.mjs
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/index.ts"],"names":["version"],"mappings":";AAWO,IAAMA,OAAAA,GAAU","file":"index.mjs","sourcesContent":["/**\n * @fastwork/xosmoz-css\n *\n * CSS utility classes for Xosmoz design system\n *\n * Import CSS files directly:\n * import '@fastwork/xosmoz-css/typography.css'\n * import '@fastwork/xosmoz-css/radius.css'\n * import '@fastwork/xosmoz-css' // All utilities\n */\n\nexport const version = '0.0.1';\n"]}
|
package/dist/radius.css
ADDED
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Border Radius Utility Classes
|
|
3
|
+
* Generated from @fastwork/xosmoz-theme
|
|
4
|
+
*/
|
|
5
|
+
|
|
6
|
+
.rounded-none {
|
|
7
|
+
border-radius: var(--xz-radius-none);
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
.rounded-sm {
|
|
11
|
+
border-radius: var(--xz-radius-sm);
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
.rounded-base {
|
|
15
|
+
border-radius: var(--xz-radius-base);
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
.rounded-md {
|
|
19
|
+
border-radius: var(--xz-radius-md);
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
.rounded-lg {
|
|
23
|
+
border-radius: var(--xz-radius-lg);
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.rounded-xl {
|
|
27
|
+
border-radius: var(--xz-radius-xl);
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
.rounded-2xl {
|
|
31
|
+
border-radius: var(--xz-radius-2xl);
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.rounded-3xl {
|
|
35
|
+
border-radius: var(--xz-radius-3xl);
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
.rounded-full {
|
|
39
|
+
border-radius: var(--xz-radius-full);
|
|
40
|
+
}
|
|
@@ -0,0 +1,148 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Typography Utility Classes
|
|
3
|
+
* Generated from @fastwork/xosmoz-theme
|
|
4
|
+
*/
|
|
5
|
+
|
|
6
|
+
/* Headings */
|
|
7
|
+
.font-h1 {
|
|
8
|
+
font-family: var(--xz-heading-h1-font-family);
|
|
9
|
+
font-size: var(--xz-heading-h1-font-size);
|
|
10
|
+
font-weight: var(--xz-heading-h1-font-weight);
|
|
11
|
+
line-height: var(--xz-line-height-125pct);
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
.font-h2 {
|
|
15
|
+
font-family: var(--xz-heading-h2-font-family);
|
|
16
|
+
font-size: var(--xz-heading-h2-font-size);
|
|
17
|
+
font-weight: var(--xz-heading-h2-font-weight);
|
|
18
|
+
line-height: var(--xz-line-height-125pct);
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
.font-h3 {
|
|
22
|
+
font-family: var(--xz-heading-h3-font-family);
|
|
23
|
+
font-size: var(--xz-heading-h3-font-size);
|
|
24
|
+
font-weight: var(--xz-heading-h3-font-weight);
|
|
25
|
+
line-height: var(--xz-line-height-125pct);
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.font-h4 {
|
|
29
|
+
font-family: var(--xz-heading-h4-font-family);
|
|
30
|
+
font-size: var(--xz-heading-h4-font-size);
|
|
31
|
+
font-weight: var(--xz-heading-h4-font-weight);
|
|
32
|
+
line-height: var(--xz-line-height-125pct);
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
.font-h5 {
|
|
36
|
+
font-family: var(--xz-heading-h5-font-family);
|
|
37
|
+
font-size: var(--xz-heading-h5-font-size);
|
|
38
|
+
font-weight: var(--xz-heading-h5-font-weight);
|
|
39
|
+
line-height: var(--xz-line-height-125pct);
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
.font-h6 {
|
|
43
|
+
font-family: var(--xz-heading-h6-font-family);
|
|
44
|
+
font-size: var(--xz-heading-h6-font-size);
|
|
45
|
+
font-weight: var(--xz-heading-h6-font-weight);
|
|
46
|
+
line-height: var(--xz-line-height-125pct);
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
/* Titles */
|
|
50
|
+
.font-title-1 {
|
|
51
|
+
font-family: var(--xz-title-title1-font-family);
|
|
52
|
+
font-size: var(--xz-title-title1-font-size);
|
|
53
|
+
font-weight: var(--xz-title-title1-font-weight);
|
|
54
|
+
line-height: var(--xz-line-height-135pct);
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
.font-title-2 {
|
|
58
|
+
font-family: var(--xz-title-title2-font-family);
|
|
59
|
+
font-size: var(--xz-title-title2-font-size);
|
|
60
|
+
font-weight: var(--xz-title-title2-font-weight);
|
|
61
|
+
line-height: var(--xz-line-height-135pct);
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
.font-title-3 {
|
|
65
|
+
font-family: var(--xz-title-title3-font-family);
|
|
66
|
+
font-size: var(--xz-title-title3-font-size);
|
|
67
|
+
font-weight: var(--xz-title-title3-font-weight);
|
|
68
|
+
line-height: var(--xz-line-height-135pct);
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
.font-title-4 {
|
|
72
|
+
font-family: var(--xz-title-title4-font-family);
|
|
73
|
+
font-size: var(--xz-title-title4-font-size);
|
|
74
|
+
font-weight: var(--xz-title-title4-font-weight);
|
|
75
|
+
line-height: var(--xz-line-height-135pct);
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
/* Subtitles */
|
|
79
|
+
.font-subtitle-1-bold {
|
|
80
|
+
font-family: var(--xz-subtitle-subtitle1Bold-font-family);
|
|
81
|
+
font-size: var(--xz-subtitle-subtitle1Bold-font-size);
|
|
82
|
+
font-weight: var(--xz-subtitle-subtitle1Bold-font-weight);
|
|
83
|
+
line-height: var(--xz-line-height-150pct);
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
.font-subtitle-1-regular {
|
|
87
|
+
font-family: var(--xz-subtitle-subtitle1Regular-font-family);
|
|
88
|
+
font-size: var(--xz-subtitle-subtitle1Regular-font-size);
|
|
89
|
+
font-weight: var(--xz-subtitle-subtitle1Regular-font-weight);
|
|
90
|
+
line-height: var(--xz-line-height-150pct);
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
.font-subtitle-2-bold {
|
|
94
|
+
font-family: var(--xz-subtitle-subtitle2Bold-font-family);
|
|
95
|
+
font-size: var(--xz-subtitle-subtitle2Bold-font-size);
|
|
96
|
+
font-weight: var(--xz-subtitle-subtitle2Bold-font-weight);
|
|
97
|
+
line-height: var(--xz-line-height-150pct);
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
.font-subtitle-2-regular {
|
|
101
|
+
font-family: var(--xz-subtitle-subtitle2Regular-font-family);
|
|
102
|
+
font-size: var(--xz-subtitle-subtitle2Regular-font-size);
|
|
103
|
+
font-weight: var(--xz-subtitle-subtitle2Regular-font-weight);
|
|
104
|
+
line-height: var(--xz-line-height-150pct);
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
.font-subtitle-3-bold {
|
|
108
|
+
font-family: var(--xz-subtitle-subtitle3Bold-font-family);
|
|
109
|
+
font-size: var(--xz-subtitle-subtitle3Bold-font-size);
|
|
110
|
+
font-weight: var(--xz-subtitle-subtitle3Bold-font-weight);
|
|
111
|
+
line-height: var(--xz-line-height-150pct);
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
.font-subtitle-3-regular {
|
|
115
|
+
font-family: var(--xz-subtitle-subtitle3Regular-font-family);
|
|
116
|
+
font-size: var(--xz-subtitle-subtitle3Regular-font-size);
|
|
117
|
+
font-weight: var(--xz-subtitle-subtitle3Regular-font-weight);
|
|
118
|
+
line-height: var(--xz-line-height-150pct);
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
/* Body */
|
|
122
|
+
.font-body-1 {
|
|
123
|
+
font-family: var(--xz-body-body1-font-family);
|
|
124
|
+
font-size: var(--xz-body-body1-font-size);
|
|
125
|
+
font-weight: var(--xz-body-body1-font-weight);
|
|
126
|
+
line-height: var(--xz-line-height-150pct);
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
.font-body-2 {
|
|
130
|
+
font-family: var(--xz-body-body2-font-family);
|
|
131
|
+
font-size: var(--xz-body-body2-font-size);
|
|
132
|
+
font-weight: var(--xz-body-body2-font-weight);
|
|
133
|
+
line-height: var(--xz-line-height-150pct);
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
.font-body-3 {
|
|
137
|
+
font-family: var(--xz-body-body3-font-family);
|
|
138
|
+
font-size: var(--xz-body-body3-font-size);
|
|
139
|
+
font-weight: var(--xz-body-body3-font-weight);
|
|
140
|
+
line-height: var(--xz-line-height-150pct);
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
.font-body-4 {
|
|
144
|
+
font-family: var(--xz-body-body4-font-family);
|
|
145
|
+
font-size: var(--xz-body-body4-font-size);
|
|
146
|
+
font-weight: var(--xz-body-body4-font-weight);
|
|
147
|
+
line-height: var(--xz-line-height-150pct);
|
|
148
|
+
}
|
package/package.json
ADDED
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@fastwork/xosmoz-css",
|
|
3
|
+
"version": "0.0.2",
|
|
4
|
+
"description": "CSS utility classes for Xosmoz design system",
|
|
5
|
+
"main": "./dist/index.js",
|
|
6
|
+
"module": "./dist/index.mjs",
|
|
7
|
+
"types": "./dist/index.d.ts",
|
|
8
|
+
"exports": {
|
|
9
|
+
".": {
|
|
10
|
+
"types": "./dist/index.d.ts",
|
|
11
|
+
"import": "./dist/index.mjs",
|
|
12
|
+
"require": "./dist/index.js"
|
|
13
|
+
},
|
|
14
|
+
"./typography.css": "./dist/typography.css",
|
|
15
|
+
"./radius.css": "./dist/radius.css",
|
|
16
|
+
"./index.css": "./dist/index.css"
|
|
17
|
+
},
|
|
18
|
+
"files": [
|
|
19
|
+
"dist"
|
|
20
|
+
],
|
|
21
|
+
"scripts": {
|
|
22
|
+
"build": "yarn build:utilities && yarn build:ts",
|
|
23
|
+
"build:utilities": "node scripts/generate-utilities.mjs",
|
|
24
|
+
"build:ts": "tsup",
|
|
25
|
+
"dev": "tsup --watch",
|
|
26
|
+
"lint": "eslint src/**/*.ts",
|
|
27
|
+
"clean": "rm -rf dist"
|
|
28
|
+
},
|
|
29
|
+
"dependencies": {
|
|
30
|
+
"@fastwork/xosmoz-theme": "workspace:*"
|
|
31
|
+
},
|
|
32
|
+
"devDependencies": {
|
|
33
|
+
"@types/node": "^20.11.0",
|
|
34
|
+
"tsup": "^8.0.0",
|
|
35
|
+
"typescript": "^5.4.0"
|
|
36
|
+
},
|
|
37
|
+
"publishConfig": {
|
|
38
|
+
"access": "public"
|
|
39
|
+
},
|
|
40
|
+
"keywords": [
|
|
41
|
+
"design-system",
|
|
42
|
+
"css",
|
|
43
|
+
"utility-classes",
|
|
44
|
+
"xosmoz",
|
|
45
|
+
"ui"
|
|
46
|
+
],
|
|
47
|
+
"author": "",
|
|
48
|
+
"license": "MIT"
|
|
49
|
+
}
|