@xy-planning-network/trees 0.3.2 → 0.3.3

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 (10) hide show
  1. package/README.md +3 -8
  2. package/config/tailwind.config.js +4 -7
  3. package/config/theme/colors.js +3 -75
  4. package/config/theme/fontFamily.js +1 -1
  5. package/config/theme/index.js +0 -3
  6. package/package.json +3 -1
  7. package/src/index.css +24 -36
  8. package/config/theme/fontSize.js +0 -16
  9. package/config/theme/fontWeight.js +0 -27
  10. package/config/theme/spacing.js +0 -3
package/README.md CHANGED
@@ -83,7 +83,7 @@ import Mitt from "mitt";
83
83
  import Trees from "@xy-planning-network/trees";
84
84
  import HelloWorld from "@/components/HelloWorld.vue";
85
85
 
86
- // import the project's main stylesheet
86
+ // import your project's main stylesheet
87
87
  import "@/main.css";
88
88
 
89
89
  // initialize the app
@@ -115,16 +115,11 @@ app.mount("#vue-app");
115
115
  }
116
116
  ```
117
117
 
118
- **Include Open Sans in html template**
118
+ **Include Inter Var in html template**
119
119
 
120
120
  ```html
121
121
  <head>
122
- <link rel="preconnect" href="https://fonts.googleapis.com" />
123
- <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
124
- <link
125
- href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&display=swap"
126
- rel="stylesheet"
127
- />
122
+ <link href="https://rsms.me/inter/inter.css" rel="stylesheet" />
128
123
  </head>
129
124
  ```
130
125
 
package/config/tailwind.config.js CHANGED
@@ -15,6 +15,7 @@ module.exports = {
15
15
  plugins: [
16
16
  require("@tailwindcss/aspect-ratio"),
17
17
  require("@tailwindcss/forms"),
18
+ require("@tailwindcss/line-clamp"),
18
19
  require("@tailwindcss/typography")({
19
20
  modifiers: ["sm", "lg", "xl"],
20
21
  }),
@@ -32,28 +33,24 @@ module.exports = {
32
33
  ...treesTheme.colors,
33
34
  },
34
35
  fontFamily: treesTheme.fontFamily,
35
- fontSize: treesTheme.fontSize,
36
- spacing: treesTheme.spacing,
37
36
  typography: (theme) => {
38
- // TODO: expand on the typography, especially for headings
39
37
  return {
40
38
  DEFAULT: {
41
39
  css: {
42
40
  color: theme("colors.gray.900"),
43
41
  a: {
44
- color: theme("colors.xblue.500"),
42
+ color: theme("colors.xy-blue"),
45
43
  "&:hover": {
46
- color: theme("colors.blue.600"),
44
+ color: theme("colors.blue.700"),
47
45
  },
48
46
  },
49
47
  "h2, h3, h4": {
50
- color: theme("colors.gray.900"), // TODO: confirm the heading colors
48
+ color: theme("colors.gray.900"),
51
49
  },
52
50
  },
53
51
  },
54
52
  };
55
53
  },
56
54
  },
57
- fontWeight: treesTheme.fontWeight,
58
55
  },
59
56
  };
package/config/theme/colors.js CHANGED
@@ -1,89 +1,17 @@
1
1
  module.exports = {
2
- blue: {
3
- 50: "#D1DAE6",
4
- 100: "#BDCDE8",
5
- 200: "#95B5EB",
6
- 300: "#4785F1",
7
- 400: "#4785F1",
8
- 500: "#1F6DF4", // Brand Blue
9
- 600: "#0F58D7",
10
- 700: "#1553BE",
11
- 800: "#1541BE",
12
- 900: "#143671",
13
- },
14
- green: {
15
- 50: "#D7DFD6",
16
- 100: "#C7D8C6",
17
- 200: "#9AC596",
18
- 300: "#8DBF88",
19
- 400: "#6FB368",
20
- 500: "#51A749", // Brand Green
21
- 600: "#348C2C",
22
- 700: "#297322",
23
- 800: "#196312",
24
- 900: "#095702",
25
- },
26
- red: {
27
- 50: "#E7CECE",
28
- 100: "#EAB7B7",
29
- 200: "#EF8989",
30
- 300: "#F55C5C",
31
- 400: "#FA2E2E",
32
- 500: "#FF0000",
33
- 600: "#CA0101",
34
- 700: "#B00000",
35
- 800: "#950000",
36
- 900: "#750000",
37
- },
38
- gray: {
39
- 50: "#FFFFFF",
40
- 100: "#EFEFEF",
41
- 200: "#E2E2E2",
42
- 300: "#E0E0E0",
43
- 400: "#C5C5C5",
44
- 500: "#A6A6A6",
45
- 600: "#878787",
46
- 700: "#686868",
47
- 800: "#2E2E2E",
48
- 900: "#000000",
49
- },
50
- indigo: {
51
- 800: "#26547C", // NOT NAVY
52
- },
53
- sky: {
54
- 100: "#D1FAFF", // DEWY DAWN
55
- },
56
- lime: {
57
- 100: "#DEEFB7", // LIME ON VACATION
58
- },
59
2
  "xy-blue": {
60
3
  DEFAULT: "#1F6DF4",
61
4
  },
62
5
  "xy-green": {
63
6
  DEFAULT: "#51A749",
64
7
  },
65
- "brand-blue": {
66
- DEFAULT: "#1F6DF4",
67
- },
68
- "brand-green": {
69
- DEFAULT: "#51A749",
70
- },
71
- "not-navy": {
8
+ "xy-navy": {
72
9
  DEFAULT: "#26547C",
73
10
  },
74
- "dewy-dawn": {
11
+ "xy-dawn": {
75
12
  DEFAULT: "#D1FAFF",
76
13
  },
77
- "lime-vacay": {
14
+ "xy-lime": {
78
15
  DEFAULT: "#DEEFB7",
79
16
  },
80
- success: {
81
- DEFAULT: "#51A749",
82
- },
83
- error: {
84
- DEFAULT: "#B00000",
85
- },
86
- info: {
87
- DEFAULT: "#1F6DF4",
88
- },
89
17
  };
package/config/theme/fontFamily.js CHANGED
@@ -1,4 +1,4 @@
1
1
  const defaultTheme = require("tailwindcss/defaultTheme");
2
2
  module.exports = {
3
- sans: ["Open Sans", ...defaultTheme.fontFamily.sans],
3
+ sans: ["Inter var", ...defaultTheme.fontFamily.sans],
4
4
  };
package/config/theme/index.js CHANGED
@@ -2,7 +2,4 @@ module.exports = {
2
2
  animation: require("./animation"),
3
3
  colors: require("./colors"),
4
4
  fontFamily: require("./fontFamily"),
5
- fontSize: require("./fontSize"),
6
- fontWeight: require("./fontWeight"),
7
- spacing: require("./spacing"),
8
5
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@xy-planning-network/trees",
3
- "version": "0.3.2",
3
+ "version": "0.3.3",
4
4
  "description": "",
5
5
  "license": "MIT",
6
6
  "repository": "github:xy-planning-network/trees",
@@ -47,6 +47,7 @@
47
47
  "@rollup/plugin-replace": "^2.3.4",
48
48
  "@tailwindcss/aspect-ratio": "^0.2.0",
49
49
  "@tailwindcss/forms": "^0.3.2",
50
+ "@tailwindcss/line-clamp": "^0.2.2",
50
51
  "@tailwindcss/typography": "^0.4.0",
51
52
  "@typescript-eslint/eslint-plugin": "^4.22.0",
52
53
  "@typescript-eslint/parser": "^4.22.0",
@@ -79,6 +80,7 @@
79
80
  "peerDependencies": {
80
81
  "@tailwindcss/aspect-ratio": "0.x",
81
82
  "@tailwindcss/forms": "0.x",
83
+ "@tailwindcss/line-clamp": "^0.2.2",
82
84
  "@tailwindcss/typography": "0.x",
83
85
  "autoprefixer": "10.x",
84
86
  "postcss": "8.x",
package/src/index.css CHANGED
@@ -9,38 +9,32 @@
9
9
 
10
10
  /* general body copy */
11
11
  body {
12
- @apply text-base text-gray-900;
12
+ @apply text-base leading-normal text-gray-900;
13
13
  }
14
14
 
15
15
  /* Headers */
16
- h1,
17
- .h1 {
18
- @apply text-3xl font-semibold text-gray-900;
16
+ h1 {
17
+ @apply text-3xl leading-9 font-semibold;
19
18
  }
20
19
 
21
- h2,
22
- .h2 {
23
- @apply text-2xl font-semibold text-gray-900;
20
+ h2 {
21
+ @apply text-2xl leading-7 font-semibold;
24
22
  }
25
23
 
26
- h3,
27
- .h3 {
28
- @apply text-lg font-semibold text-gray-900;
24
+ h3 {
25
+ @apply text-lg leading-6 font-semibold;
29
26
  }
30
27
 
31
- h4,
32
- .h4 {
33
- @apply text-base font-semibold text-gray-900;
28
+ h4 {
29
+ @apply text-base leading-5 font-semibold;
34
30
  }
35
31
 
36
- h5,
37
- .h5 {
38
- @apply text-sm font-semibold text-gray-900;
32
+ h5 {
33
+ @apply text-sm leading-5 font-semibold;
39
34
  }
40
35
 
41
- h6,
42
- .h6 {
43
- @apply text-xxs font-semibold text-gray-900;
36
+ h6 {
37
+ @apply text-xs leading-4 font-semibold;
44
38
  }
45
39
 
46
40
  /* Forms: here for backward compatibility. Use <BaseInput> instead. */
@@ -53,11 +47,6 @@
53
47
  textarea {
54
48
  @apply mt-1 shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-600 rounded-md;
55
49
  }
56
-
57
- /* Paragraphs -- TODO: think about removing this in favor of .prose */
58
- p {
59
- @apply text-sm text-gray-900;
60
- }
61
50
  }
62
51
 
63
52
  @layer components {
@@ -97,49 +86,48 @@
97
86
 
98
87
  /* Header classes */
99
88
  .h1 {
100
- @apply text-3xl font-semibold text-gray-900;
89
+ @apply text-3xl leading-9 font-semibold;
101
90
  }
102
91
 
103
92
  .h2 {
104
- @apply text-2xl font-semibold text-gray-900;
93
+ @apply text-2xl leading-7 font-semibold;
105
94
  }
106
95
 
107
96
  .h3 {
108
- @apply text-lg font-semibold text-gray-900;
97
+ @apply text-lg leading-6 font-semibold;
109
98
  }
110
99
 
111
100
  .h4 {
112
- @apply text-base font-semibold text-gray-900;
101
+ @apply text-base leading-5 font-semibold;
113
102
  }
114
103
 
115
104
  .h5 {
116
- @apply text-sm font-semibold text-gray-900;
105
+ @apply text-sm leading-5 font-semibold;
117
106
  }
118
107
 
119
108
  .h6 {
120
- @apply text-xxs font-semibold text-gray-900;
109
+ @apply text-xs leading-4 font-semibold;
121
110
  }
122
111
 
123
112
  .xy-h1-extra-flair {
124
- @apply text-3xl font-bold text-gray-900 leading-9 tracking-tight sm:text-4xl sm:leading-10;
113
+ @apply text-3xl font-bold leading-9 tracking-tight sm:text-4xl sm:leading-10;
125
114
  }
126
115
 
127
116
  .xy-h1-responsive {
128
- @apply text-2xl font-semibold lg:text-3xl;
117
+ @apply text-2xl leading-7 font-semibold lg:text-3xl lg:leading-9;
129
118
  }
130
119
 
131
120
  .xy-h2-responsive {
132
- @apply text-lg font-semibold lg:text-2xl;
121
+ @apply text-lg leading-6 font-semibold lg:text-2xl lg:leading-7;
133
122
  }
134
123
 
135
124
  .xy-h3-responsive {
136
- @apply text-base font-semibold lg:text-lg;
125
+ @apply text-base leading-5 font-semibold lg:text-lg lg:leading-6;
137
126
  }
138
127
 
139
128
  /* Link classes */
140
129
  .xy-link {
141
- /* TODO: determine a visited state and implement in .prose */
142
- @apply font-semibold underline text-blue-500 hover:text-blue-600;
130
+ @apply font-semibold underline text-xy-blue hover:text-blue-700;
143
131
  }
144
132
  }
145
133
 
package/config/theme/fontSize.js DELETED
@@ -1,16 +0,0 @@
1
- module.exports = {
2
- xxs: ["0.625rem", "1.4"],
3
- xs: ["0.75rem", "1.333333"],
4
- sm: ["0.875rem", "1.28571429"],
5
- base: ["1rem", "1.5"],
6
- lg: ["1.125rem", "1.55555556"],
7
- xl: ["1.25rem", "1.4"],
8
- "2xl": ["1.5rem", "1.33333333"],
9
- "3xl": ["1.875rem", "1.2"],
10
- "4xl": ["2.25rem", "1.11111111"],
11
- "5xl": ["3rem", "1"],
12
- "6xl": ["3.75rem", "1"],
13
- "7xl": ["4.5rem", "1"],
14
- "8xl": ["6rem", "1"],
15
- "9xl": ["8rem", "1"],
16
- };
package/config/theme/fontWeight.js DELETED
@@ -1,27 +0,0 @@
1
- // NOTE: medium and extrabold are here for back compatibility
2
- let mediumWarn = false;
3
- let extraBoldWarn = false;
4
-
5
- module.exports = {
6
- normal: 400,
7
- get medium() {
8
- if (!mediumWarn) {
9
- mediumWarn = true;
10
- console.log(
11
- "warn - `font-medium` does not exist in the design library. The font weight will resolve to `600`. Please replace instances of `font-medium` with `font-semibold`."
12
- );
13
- }
14
- return 600;
15
- },
16
- semibold: 600,
17
- bold: 700,
18
- get extrabold() {
19
- if (!extraBoldWarn) {
20
- extraBoldWarn = true;
21
- console.log(
22
- "warn - `font-extrabold` does not exist in the design library. The font weight will resolve to `700`. Please replace instances of `font-extrabold` with `font-bold`."
23
- );
24
- }
25
- return 700;
26
- },
27
- };
package/config/theme/spacing.js DELETED
@@ -1,3 +0,0 @@
1
- module.exports = {
2
- 144: "36rem",
3
- };