@tx-angular-design-system/ui-kit 0.1.1 → 0.1.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 +2 -6
- package/package.json +1 -9
- package/schematics/ng-add/schema.json +0 -15
- package/styles/themes/cobalt.css +0 -17
- package/styles/themes/ember.css +0 -17
package/README.md
CHANGED
|
@@ -10,8 +10,8 @@ npm install @tx-angular-design-system/ui-kit
|
|
|
10
10
|
ng add @tx-angular-design-system/ui-kit
|
|
11
11
|
```
|
|
12
12
|
|
|
13
|
-
`ng add` installs Tailwind v4 and the CDK/Aria peers,
|
|
14
|
-
|
|
13
|
+
`ng add` installs Tailwind v4 and the CDK/Aria peers, writes a PostCSS config,
|
|
14
|
+
wires the theme into your global stylesheet and links the fonts. It is
|
|
15
15
|
idempotent and will not clobber an existing Tailwind setup.
|
|
16
16
|
|
|
17
17
|
Your global stylesheet ends up with:
|
|
@@ -67,10 +67,6 @@ re-colours every component that uses `--color-tx-primary` with no code change.
|
|
|
67
67
|
`success`, `danger`, `warning` and `info` are independent families and do not
|
|
68
68
|
follow `brand`.
|
|
69
69
|
|
|
70
|
-
The published theme entry points are `styles/ui-kit.css` (TraXtion),
|
|
71
|
-
`styles/themes/cobalt.css`, and `styles/themes/ember.css`. Select one through
|
|
72
|
-
`ng add @tx-angular-design-system/ui-kit --theme=<default|cobalt|ember>`.
|
|
73
|
-
|
|
74
70
|
## Components
|
|
75
71
|
|
|
76
72
|
Button · input · textarea · checkbox · radio group · switch · select ·
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tx-angular-design-system/ui-kit",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.2",
|
|
4
4
|
"description": "TraXtion Angular design system — a headless-primitive component library styled entirely through Tailwind CSS v4 design tokens.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"angular",
|
|
@@ -46,14 +46,6 @@
|
|
|
46
46
|
"style": "./styles/ui-kit.css",
|
|
47
47
|
"default": "./styles/ui-kit.css"
|
|
48
48
|
},
|
|
49
|
-
"./styles/themes/cobalt.css": {
|
|
50
|
-
"style": "./styles/themes/cobalt.css",
|
|
51
|
-
"default": "./styles/themes/cobalt.css"
|
|
52
|
-
},
|
|
53
|
-
"./styles/themes/ember.css": {
|
|
54
|
-
"style": "./styles/themes/ember.css",
|
|
55
|
-
"default": "./styles/themes/ember.css"
|
|
56
|
-
},
|
|
57
49
|
"./package.json": {
|
|
58
50
|
"default": "./package.json"
|
|
59
51
|
},
|
|
@@ -11,21 +11,6 @@
|
|
|
11
11
|
"$source": "projectName"
|
|
12
12
|
}
|
|
13
13
|
},
|
|
14
|
-
"theme": {
|
|
15
|
-
"type": "string",
|
|
16
|
-
"enum": ["default", "cobalt", "ember"],
|
|
17
|
-
"default": "default",
|
|
18
|
-
"description": "The UI Kit colour theme to use.",
|
|
19
|
-
"x-prompt": {
|
|
20
|
-
"message": "Which color theme do you want to use?",
|
|
21
|
-
"type": "list",
|
|
22
|
-
"items": [
|
|
23
|
-
{ "value": "default", "label": "TraXtion (default)" },
|
|
24
|
-
{ "value": "cobalt", "label": "Cobalt" },
|
|
25
|
-
{ "value": "ember", "label": "Ember" }
|
|
26
|
-
]
|
|
27
|
-
}
|
|
28
|
-
},
|
|
29
14
|
"fonts": {
|
|
30
15
|
"type": "boolean",
|
|
31
16
|
"default": true,
|
package/styles/themes/cobalt.css
DELETED
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
/* Cobalt is the UI Kit's blue brand palette. The base token and component
|
|
2
|
-
layers remain the same as TraXtion; only the existing brand palette changes. */
|
|
3
|
-
@import '../ui-kit.css';
|
|
4
|
-
|
|
5
|
-
:root {
|
|
6
|
-
--color-tx-brand-50: #e8f1fb;
|
|
7
|
-
--color-tx-brand-100: #d2e4f7;
|
|
8
|
-
--color-tx-brand-200: #b6d3f2;
|
|
9
|
-
--color-tx-brand-300: #7fb0e5;
|
|
10
|
-
--color-tx-brand-400: #458cd8;
|
|
11
|
-
--color-tx-brand-500: #1f6fd0;
|
|
12
|
-
--color-tx-brand-600: #1b60b5;
|
|
13
|
-
--color-tx-brand-700: #17529b;
|
|
14
|
-
--color-tx-brand-800: #123f77;
|
|
15
|
-
--color-tx-brand-900: #0e3159;
|
|
16
|
-
--color-tx-brand-950: #08203d;
|
|
17
|
-
}
|
package/styles/themes/ember.css
DELETED
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
/* Ember is the UI Kit's warm brand palette. The base token and component
|
|
2
|
-
layers remain the same as TraXtion; only the existing brand palette changes. */
|
|
3
|
-
@import '../ui-kit.css';
|
|
4
|
-
|
|
5
|
-
:root {
|
|
6
|
-
--color-tx-brand-50: #fdf0e7;
|
|
7
|
-
--color-tx-brand-100: #fbdfcd;
|
|
8
|
-
--color-tx-brand-200: #f6c5a5;
|
|
9
|
-
--color-tx-brand-300: #ef9f6c;
|
|
10
|
-
--color-tx-brand-400: #e87b3c;
|
|
11
|
-
--color-tx-brand-500: #d95f17;
|
|
12
|
-
--color-tx-brand-600: #bd5113;
|
|
13
|
-
--color-tx-brand-700: #9a410f;
|
|
14
|
-
--color-tx-brand-800: #78330c;
|
|
15
|
-
--color-tx-brand-900: #5c2709;
|
|
16
|
-
--color-tx-brand-950: #331504;
|
|
17
|
-
}
|