@uxf/ui 1.0.0-beta.93 → 1.0.0-beta.94

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 (7) hide show
  1. package/css/typography.css +51 -0
  2. package/package.json +1 -1
  3. package/typography/typography.spec.d.ts +1 -0
  4. package/typography/typography.spec.js +21 -0
  5. package/typography/typography.stories.d.ts +7 -0
  6. package/typography/typography.stories.js +28 -0
  7. package/utils/tailwind-config.js +15 -0
package/css/typography.css ADDED
@@ -0,0 +1,51 @@
1
+ .uxf-typo-h1 {
2
+ @apply text-desktopH1 font-bold;
3
+ }
4
+
5
+ .uxf-typo-h2 {
6
+ @apply text-desktopH2 font-bold;
7
+ }
8
+
9
+ .uxf-typo-h3 {
10
+ @apply text-desktopH3 font-bold;
11
+ }
12
+
13
+ .uxf-typo-h4 {
14
+ @apply text-desktopH4 font-bold;
15
+ }
16
+
17
+ .uxf-typo-h5 {
18
+ @apply text-desktopH5 font-bold;
19
+ }
20
+
21
+ .uxf-typo-h6 {
22
+ @apply text-desktopH6 font-bold;
23
+ }
24
+
25
+ .uxf-typo-body {
26
+ @apply text-body;
27
+ }
28
+
29
+ .uxf-typo-body2 {
30
+ @apply text-body2;
31
+ }
32
+
33
+ .uxf-typo-button {
34
+ @apply text-body font-bold;
35
+ }
36
+
37
+ .uxf-typo-caption {
38
+ @apply text-caption;
39
+ }
40
+
41
+ .uxf-typo-medium {
42
+ @apply text-medium font-medium;
43
+ }
44
+
45
+ .uxf-typo-medium2 {
46
+ @apply text-medium2 font-medium;
47
+ }
48
+
49
+ .uxf-typo-overline {
50
+ @apply text-overline font-bold;
51
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@uxf/ui",
3
- "version": "1.0.0-beta.93",
3
+ "version": "1.0.0-beta.94",
4
4
  "description": "",
5
5
  "publishConfig": {
6
6
  "access": "public"
package/typography/typography.spec.d.ts ADDED
@@ -0,0 +1 @@
1
+ export {};
package/typography/typography.spec.js ADDED
@@ -0,0 +1,21 @@
1
+ "use strict";
2
+ var __importDefault = (this && this.__importDefault) || function (mod) {
3
+ return (mod && mod.__esModule) ? mod : { "default": mod };
4
+ };
5
+ Object.defineProperty(exports, "__esModule", { value: true });
6
+ const react_1 = __importDefault(require("react"));
7
+ const snap_test_1 = require("../utils/snap-test");
8
+ (0, snap_test_1.snapTest)("render basic", (react_1.default.createElement(react_1.default.Fragment, null,
9
+ react_1.default.createElement("h1", { className: "uxf-typo-h1" }, ".uxf-typo-h1"),
10
+ react_1.default.createElement("h2", { className: "uxf-typo-h2" }, ".uxf-typo-h2"),
11
+ react_1.default.createElement("h3", { className: "uxf-typo-h3" }, ".uxf-typo-h3"),
12
+ react_1.default.createElement("h4", { className: "uxf-typo-h4" }, ".uxf-typo-h4"),
13
+ react_1.default.createElement("h5", { className: "uxf-typo-h5" }, ".uxf-typo-h5"),
14
+ react_1.default.createElement("h6", { className: "uxf-typo-h6" }, ".uxf.typo-h6"),
15
+ react_1.default.createElement("p", { className: "uxf-typo-body" }, ".uxf-typo-body"),
16
+ react_1.default.createElement("p", { className: "uxf-typo-body2" }, ".uxf-typo-body2"),
17
+ react_1.default.createElement("p", { className: "uxf-typo-button" }, ".uxf-typo-button"),
18
+ react_1.default.createElement("p", { className: "uxf-typo-caption" }, ".uxf-typo-caption"),
19
+ react_1.default.createElement("p", { className: "uxf-typo-medium" }, ".uxf-typo-medium"),
20
+ react_1.default.createElement("p", { className: "uxf-typo-medium2" }, ".uxf-typo-medium2"),
21
+ react_1.default.createElement("p", { className: "uxf-typo-overline" }, ".uxf-typo-overline"))));
package/typography/typography.stories.d.ts ADDED
@@ -0,0 +1,7 @@
1
+ /// <reference types="react" />
2
+ declare const _default: {
3
+ title: string;
4
+ component: null;
5
+ };
6
+ export default _default;
7
+ export declare function Default(): JSX.Element;
package/typography/typography.stories.js ADDED
@@ -0,0 +1,28 @@
1
+ "use strict";
2
+ var __importDefault = (this && this.__importDefault) || function (mod) {
3
+ return (mod && mod.__esModule) ? mod : { "default": mod };
4
+ };
5
+ Object.defineProperty(exports, "__esModule", { value: true });
6
+ exports.Default = void 0;
7
+ const react_1 = __importDefault(require("react"));
8
+ exports.default = {
9
+ title: "UI/Typography",
10
+ component: null,
11
+ };
12
+ function Default() {
13
+ return (react_1.default.createElement("div", { className: "space-y-4" },
14
+ react_1.default.createElement("h1", { className: "uxf-typo-h1" }, ".uxf-typo-h1"),
15
+ react_1.default.createElement("h2", { className: "uxf-typo-h2" }, ".uxf-typo-h2"),
16
+ react_1.default.createElement("h3", { className: "uxf-typo-h3" }, ".uxf-typo-h3"),
17
+ react_1.default.createElement("h4", { className: "uxf-typo-h4" }, ".uxf-typo-h4"),
18
+ react_1.default.createElement("h5", { className: "uxf-typo-h5" }, ".uxf-typo-h5"),
19
+ react_1.default.createElement("h6", { className: "uxf-typo-h6" }, ".uxf.typo-h6"),
20
+ react_1.default.createElement("p", { className: "uxf-typo-body" }, ".uxf-typo-body"),
21
+ react_1.default.createElement("p", { className: "uxf-typo-body2" }, ".uxf-typo-body2"),
22
+ react_1.default.createElement("p", { className: "uxf-typo-button" }, ".uxf-typo-button"),
23
+ react_1.default.createElement("p", { className: "uxf-typo-caption" }, ".uxf-typo-caption"),
24
+ react_1.default.createElement("p", { className: "uxf-typo-medium" }, ".uxf-typo-medium"),
25
+ react_1.default.createElement("p", { className: "uxf-typo-medium2" }, ".uxf-typo-medium2"),
26
+ react_1.default.createElement("p", { className: "uxf-typo-overline" }, ".uxf-typo-overline")));
27
+ }
28
+ exports.Default = Default;
package/utils/tailwind-config.js CHANGED
@@ -99,6 +99,21 @@ module.exports = {
99
99
  boxShadow: {
100
100
  paper: "0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06)",
101
101
  },
102
+ fontSize: {
103
+ desktopH1: [rem(96), 112 / 96],
104
+ desktopH2: [rem(60), 72 / 60],
105
+ desktopH3: [rem(48), 64 / 48],
106
+ desktopH4: [rem(34), 40 / 34],
107
+ desktopH5: [rem(24), 32 / 24],
108
+ desktopH6: [rem(16), 22 / 16],
109
+ body: [rem(16), 24 / 16],
110
+ body2: [rem(14), 20 / 14],
111
+ button: [rem(16), 24 / 16],
112
+ caption: [rem(12), 16 / 12],
113
+ medium: [rem(16), 24 / 16],
114
+ medium2: [rem(14), 20 / 14],
115
+ overline: [rem(10), 16 / 10],
116
+ },
102
117
  spacing: {
103
118
  inherit: "inherit",
104
119
  },