@esri/calcite-tailwind-preset 0.1.0

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 (6) hide show
  1. package/LICENSE.md +13 -0
  2. package/README.md +46 -0
  3. package/THIRD-PARTY-LICENSES.md +3 -0
  4. package/dist/index.d.ts +252 -0
  5. package/dist/index.js +14 -0
  6. package/package.json +32 -0
package/LICENSE.md ADDED
@@ -0,0 +1,13 @@
1
+ # Licensing
2
+
3
+ COPYRIGHT © 2025 Esri
4
+
5
+ All rights reserved under the copyright laws of the United States and applicable international laws, treaties, and conventions.
6
+
7
+ This material is licensed for use under the Esri Master License Agreement (MLA), and is bound by the terms of that agreement. You may redistribute and use this code without modification, provided you adhere to the terms of the MLA and include this copyright notice.
8
+
9
+ See use restrictions at <http://www.esri.com/legal/pdfs/mla_e204_e300/english>
10
+
11
+ For additional information, contact: Environmental Systems Research Institute, Inc. Attn: Contracts and Legal Services Department 380 New York Street Redlands, California, USA 92373 USA
12
+
13
+ email: <contracts@esri.com>
package/README.md ADDED
@@ -0,0 +1,46 @@
1
+ # Calcite Tailwind Preset
2
+
3
+ This package provides a Tailwind CSS preset for Calcite Design System, enabling consistent styling across your applications.
4
+
5
+ ## Usage
6
+
7
+ Install the Calcite Tailwind preset:
8
+
9
+ ```bash
10
+ npm install @esri/calcite-tailwind-preset
11
+ ```
12
+
13
+ Then import it in your Tailwind CSS configuration file:
14
+
15
+ ```ts
16
+ import calcitePreset from "@esri/calcite-tailwind-preset";
17
+
18
+ export default {
19
+ presets: [calcitePreset],
20
+ content: [
21
+ /* ... */
22
+ ],
23
+ };
24
+ ```
25
+
26
+ ## Note
27
+
28
+ This package is updated as needed. If you require any critical updates, please reach out to the Calcite Design System team.
29
+
30
+ ## License
31
+
32
+ COPYRIGHT © 2025 Esri
33
+
34
+ All rights reserved under the copyright laws of the United States and applicable international laws, treaties, and conventions.
35
+
36
+ This material is licensed for use under the Esri Master License Agreement (MLA), and is bound by the terms of that agreement. You may redistribute and use this code without modification, provided you adhere to the terms of the MLA and include this copyright notice.
37
+
38
+ See use restrictions at <http://www.esri.com/legal/pdfs/mla_e204_e300/english>
39
+
40
+ For additional information, contact: Environmental Systems Research Institute, Inc. Attn: Contracts and Legal Services Department 380 New York Street Redlands, California, USA 92373 USA
41
+
42
+ email: <contracts@esri.com>
43
+
44
+ ## Third-party licenses
45
+
46
+ See [THIRD-PARTY-LICENSES.md](./THIRD-PARTY-LICENSES.md).
package/THIRD-PARTY-LICENSES.md ADDED
@@ -0,0 +1,3 @@
1
+ ## Third Party Licenses
2
+
3
+ This packages does not have any third-party dependencies.
package/dist/index.d.ts ADDED
@@ -0,0 +1,252 @@
1
+ import { Config } from 'tailwindcss/types/config';
2
+ import { PluginCreator } from 'tailwindcss/types/config';
3
+
4
+ declare const _default: {
5
+ theme: {
6
+ borderColor: ({ theme }: {
7
+ theme: any;
8
+ }) => object;
9
+ colors: {
10
+ current: string;
11
+ brand: string;
12
+ "brand-hover": string;
13
+ "brand-press": string;
14
+ info: string;
15
+ success: string;
16
+ warning: string;
17
+ danger: string;
18
+ "danger-hover": string;
19
+ "danger-press": string;
20
+ background: {
21
+ background: string;
22
+ foreground: {
23
+ 1: string;
24
+ 2: string;
25
+ 3: string;
26
+ };
27
+ };
28
+ color: {
29
+ 1: string;
30
+ 2: string;
31
+ 3: string;
32
+ inverse: string;
33
+ link: string;
34
+ icon: string;
35
+ };
36
+ transparent: string;
37
+ };
38
+ fontFamily: {
39
+ sans: string;
40
+ mono: string;
41
+ inherit: string;
42
+ };
43
+ fontSize: {
44
+ n3: string;
45
+ n2: string;
46
+ n1: string;
47
+ 0: string;
48
+ 1: string;
49
+ 2: string;
50
+ 3: string;
51
+ 4: string;
52
+ 5: string;
53
+ 6: string;
54
+ 7: string;
55
+ 8: string;
56
+ n3h: (string | {
57
+ lineHeight: string;
58
+ })[];
59
+ n2h: (string | {
60
+ lineHeight: string;
61
+ })[];
62
+ n1h: (string | {
63
+ lineHeight: string;
64
+ })[];
65
+ "0h": (string | {
66
+ lineHeight: string;
67
+ })[];
68
+ "1h": (string | {
69
+ lineHeight: string;
70
+ })[];
71
+ "2h": (string | {
72
+ lineHeight: string;
73
+ })[];
74
+ "3h": (string | {
75
+ lineHeight: string;
76
+ })[];
77
+ "4h": (string | {
78
+ lineHeight: string;
79
+ })[];
80
+ "5h": (string | {
81
+ lineHeight: string;
82
+ })[];
83
+ "6h": (string | {
84
+ lineHeight: string;
85
+ })[];
86
+ "7h": (string | {
87
+ lineHeight: string;
88
+ })[];
89
+ "8h": (string | {
90
+ lineHeight: string;
91
+ })[];
92
+ "n3-wrap": (string | {
93
+ lineHeight: string;
94
+ })[];
95
+ "n2-wrap": (string | {
96
+ lineHeight: string;
97
+ })[];
98
+ "n1-wrap": (string | {
99
+ lineHeight: string;
100
+ })[];
101
+ "0-wrap": (string | {
102
+ lineHeight: string;
103
+ })[];
104
+ "1-wrap": (string | {
105
+ lineHeight: string;
106
+ })[];
107
+ "2-wrap": (string | {
108
+ lineHeight: string;
109
+ })[];
110
+ "3-wrap": (string | {
111
+ lineHeight: string;
112
+ })[];
113
+ "4-wrap": (string | {
114
+ lineHeight: string;
115
+ })[];
116
+ "5-wrap": (string | {
117
+ lineHeight: string;
118
+ })[];
119
+ "6-wrap": (string | {
120
+ lineHeight: string;
121
+ })[];
122
+ "7-wrap": (string | {
123
+ lineHeight: string;
124
+ })[];
125
+ "8-wrap": (string | {
126
+ lineHeight: string;
127
+ })[];
128
+ };
129
+ fontWeight: {
130
+ light: string;
131
+ normal: string;
132
+ medium: string;
133
+ bold: string;
134
+ };
135
+ screens: {
136
+ s: string;
137
+ m: string;
138
+ l: string;
139
+ xl: string;
140
+ };
141
+ backgroundColor: ({ theme }: {
142
+ theme: any;
143
+ }) => object;
144
+ extend: {
145
+ animation: {
146
+ in: string;
147
+ "in-down": string;
148
+ "in-up": string;
149
+ "in-scale": string;
150
+ };
151
+ borderRadius: {
152
+ half: string;
153
+ };
154
+ boxShadow: {
155
+ 0: string;
156
+ 1: string;
157
+ "1-lg": string;
158
+ "1-sm": string;
159
+ 2: string;
160
+ "2-lg": string;
161
+ "2-sm": string;
162
+ "border-bottom": string;
163
+ "border-top": string;
164
+ "outline-active": string;
165
+ none: string;
166
+ xs: string;
167
+ outline: string;
168
+ };
169
+ keyframes: {
170
+ in: {
171
+ "0%": {
172
+ opacity: number;
173
+ };
174
+ "100%": {
175
+ opacity: number;
176
+ };
177
+ };
178
+ "in-down": {
179
+ "0%": {
180
+ opacity: number;
181
+ transform: string;
182
+ };
183
+ "100%": {
184
+ opacity: number;
185
+ transform: string;
186
+ };
187
+ };
188
+ "in-up": {
189
+ "0%": {
190
+ opacity: number;
191
+ transform: string;
192
+ };
193
+ "100%": {
194
+ opacity: number;
195
+ transform: string;
196
+ };
197
+ };
198
+ "in-scale": {
199
+ "0%": {
200
+ opacity: number;
201
+ transform: string;
202
+ };
203
+ "100%": {
204
+ opacity: number;
205
+ transform: string;
206
+ };
207
+ };
208
+ };
209
+ opacity: {
210
+ disabled: string;
211
+ };
212
+ spacing: {
213
+ 0.5: string;
214
+ 2.5: string;
215
+ 3.5: string;
216
+ 4.5: string;
217
+ 9: string;
218
+ 11: string;
219
+ 13: string;
220
+ };
221
+ transitionProperty: {
222
+ margin: string;
223
+ color: string;
224
+ };
225
+ transitionTimingFunction: {
226
+ cubic: string;
227
+ };
228
+ maxHeight: {
229
+ menu: string;
230
+ };
231
+ zIndex: {
232
+ deep: string;
233
+ default: string;
234
+ sticky: string;
235
+ header: string;
236
+ toast: string;
237
+ dropdown: string;
238
+ overlay: string;
239
+ modal: string;
240
+ popover: string;
241
+ tooltip: string;
242
+ };
243
+ };
244
+ };
245
+ plugins: {
246
+ handler: PluginCreator;
247
+ config?: Partial<Config>;
248
+ }[];
249
+ };
250
+ export default _default;
251
+
252
+ export { }
package/dist/index.js ADDED
@@ -0,0 +1,14 @@
1
+ "use strict";/*!
2
+ All material copyright ESRI, All Rights Reserved, unless otherwise specified.
3
+ See https://github.com/Esri/calcite-design-system/blob/0.1.0/LICENSE.md for details.
4
+ */function d(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}var u={};(function(e){Object.defineProperty(e,"__esModule",{value:!0}),Object.defineProperty(e,"default",{enumerable:!0,get:function(){return o}});const a=i=>Object.assign({},...Object.entries(i??{}).flatMap(([t,r])=>typeof r=="object"?Object.entries(a(r)).map(([c,v])=>({[t+(c==="DEFAULT"?"":`-${c}`)]:v})):[{[`${t}`]:r}])),o=a})(u);const g=d(u);var f={},p={};(function(e){Object.defineProperty(e,"__esModule",{value:!0}),Object.defineProperty(e,"default",{enumerable:!0,get:function(){return o}});function a(i,t){return{handler:i,config:t}}a.withOptions=function(i,t=()=>({})){const r=function(c){return{__options:c,handler:i(c),config:t(c)}};return r.__isOptionsFunction=!0,r.__pluginFunction=i,r.__configFunction=t,r};const o=a})(p);(function(e){Object.defineProperty(e,"__esModule",{value:!0}),Object.defineProperty(e,"default",{enumerable:!0,get:function(){return i}});const a=o(p);function o(t){return t&&t.__esModule?t:{default:t}}const i=a.default})(f);let l=f;var b=(l.__esModule?l:{default:l}).default;const s=d(b);function n(e,a){return`calc(
5
+ ${e} *
6
+ calc(
7
+ 1 -
8
+ 2 * clamp(
9
+ 0,
10
+ var(${a}),
11
+ 1
12
+ )
13
+ )
14
+ )`}const x={theme:{borderColor:({theme:e})=>({color:{1:"var(--calcite-color-border-1)",2:"var(--calcite-color-border-2)",3:"var(--calcite-color-border-3)",input:"var(--calcite-color-border-input)",transparent:e("colors.transparent")},"color-brand":e("colors.brand"),"color-brand-hover":e("colors.brand-hover"),"color-brand-press":e("colors.brand-press"),"color-info":e("colors.info"),"color-success":e("colors.success"),"color-warning":e("colors.warning"),"color-danger":e("colors.danger"),"color-danger-hover":e("colors.danger-hover"),"color-danger-press":e("colors.danger-press")}),colors:{current:"currentColor",brand:"var(--calcite-color-brand)","brand-hover":"var(--calcite-color-brand-hover)","brand-press":"var(--calcite-color-brand-press)",info:"var(--calcite-color-status-info)",success:"var(--calcite-color-status-success)",warning:"var(--calcite-color-status-warning)",danger:"var(--calcite-color-status-danger)","danger-hover":"var(--calcite-color-status-danger-hover)","danger-press":"var(--calcite-color-status-danger-press)",background:{background:"var(--calcite-color-background)",foreground:{1:"var(--calcite-color-foreground-1)",2:"var(--calcite-color-foreground-2)",3:"var(--calcite-color-foreground-3)"}},color:{1:"var(--calcite-color-text-1)",2:"var(--calcite-color-text-2)",3:"var(--calcite-color-text-3)",inverse:"var(--calcite-color-text-inverse)",link:"var(--calcite-color-text-link)",icon:"var(--calcite-icon-color, var(--calcite-ui-icon-color, currentColor))"},transparent:"transparent"},fontFamily:{sans:"var(--calcite-font-family)",mono:"var(--calcite-font-family-code)",inherit:"inherit"},fontSize:{n3:"var(--calcite-font-size--3)",n2:"var(--calcite-font-size--2)",n1:"var(--calcite-font-size--1)",0:"var(--calcite-font-size-0)",1:"var(--calcite-font-size-1)",2:"var(--calcite-font-size-2)",3:"var(--calcite-font-size-3)",4:"var(--calcite-font-size-4)",5:"var(--calcite-font-size-5)",6:"var(--calcite-font-size-6)",7:"var(--calcite-font-size-7)",8:"var(--calcite-font-size-8)",n3h:["var(--calcite-font-size--3)",{lineHeight:"0.75rem"}],n2h:["var(--calcite-font-size--2)",{lineHeight:"1rem"}],n1h:["var(--calcite-font-size--1)",{lineHeight:"1rem"}],"0h":["var(--calcite-font-size-0)",{lineHeight:"1.25rem"}],"1h":["var(--calcite-font-size-1)",{lineHeight:"1.5rem"}],"2h":["var(--calcite-font-size-2)",{lineHeight:"1.5rem"}],"3h":["var(--calcite-font-size-3)",{lineHeight:"2rem"}],"4h":["var(--calcite-font-size-4)",{lineHeight:"2.5rem"}],"5h":["var(--calcite-font-size-5)",{lineHeight:"3rem"}],"6h":["var(--calcite-font-size-6)",{lineHeight:"4rem"}],"7h":["var(--calcite-font-size-7)",{lineHeight:"4rem"}],"8h":["var(--calcite-font-size-8)",{lineHeight:"5rem"}],"n3-wrap":["var(--calcite-font-size--3)",{lineHeight:"1.375"}],"n2-wrap":["var(--calcite-font-size--2)",{lineHeight:"1.375"}],"n1-wrap":["var(--calcite-font-size--1)",{lineHeight:"1.375"}],"0-wrap":["var(--calcite-font-size-0)",{lineHeight:"1.375"}],"1-wrap":["var(--calcite-font-size-1)",{lineHeight:"1.375"}],"2-wrap":["var(--calcite-font-size-2)",{lineHeight:"1.375"}],"3-wrap":["var(--calcite-font-size-3)",{lineHeight:"1.25"}],"4-wrap":["var(--calcite-font-size-4)",{lineHeight:"1.25"}],"5-wrap":["var(--calcite-font-size-5)",{lineHeight:"1.25"}],"6-wrap":["var(--calcite-font-size-6)",{lineHeight:"1.25"}],"7-wrap":["var(--calcite-font-size-7)",{lineHeight:"1.25"}],"8-wrap":["var(--calcite-font-size-8)",{lineHeight:"1.25"}]},fontWeight:{light:"var(--calcite-font-weight-light)",normal:"var(--calcite-font-weight-normal)",medium:"var(--calcite-font-weight-medium)",bold:"var(--calcite-font-weight-bold)"},screens:{s:"480px",m:"864px",l:"1024px",xl:"1440px"},backgroundColor:({theme:e})=>({...e("colors.background"),transparent:e("colors.transparent"),brand:e("colors.brand"),"brand-hover":e("colors.brand-hover"),"brand-press":e("colors.brand-press"),info:e("colors.info"),success:e("colors.success"),warning:e("colors.warning"),danger:e("colors.danger"),"danger-hover":e("colors.danger-hover"),"danger-press":e("colors.danger-press")}),extend:{animation:{in:"in var(--calcite-internal-animation-timing-slow) ease-in-out","in-down":"in-down var(--calcite-internal-animation-timing-slow) ease-in-out","in-up":"in-up var(--calcite-internal-animation-timing-slow) ease-in-out","in-scale":"in-scale var(--calcite-internal-animation-timing-slow) linear"},borderRadius:{half:"50%"},boxShadow:{0:"0 4px 8px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04)",1:"0 4px 8px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04)","1-lg":"var(--calcite-shadow-sm)","1-sm":"0 1px 6px -1px rgba(0, 0, 0, 0.16), 0 1px 2px -1px rgba(0, 0, 0, 0.08)",2:"0 6px 20px -4px rgba(0, 0, 0, 0.1), 0 4px 12px -2px rgba(0, 0, 0, 0.08)","2-lg":"var(--calcite-shadow-md)","2-sm":"0 2px 12px -4px rgba(0, 0, 0, 0.2), 0 2px 4px -2px rgba(0, 0, 0, 0.16)","border-bottom":"0 1px 0 var(--calcite-color-border-3)","border-top":"0 -1px 0 var(--calcite-color-border-3)","outline-active":"0 0 0 1px var(--calcite-color-brand)",none:"none",xs:"0 0 0 1px rgba(0, 0, 0, 0.05)",outline:"0 0 0 3px rgba(66, 153, 225, 0.5)"},keyframes:{in:{"0%":{opacity:0},"100%":{opacity:1}},"in-down":{"0%":{opacity:0,transform:"translate3D(0, -5px, 0)"},"100%":{opacity:1,transform:"translate3D(0, 0, 0)"}},"in-up":{"0%":{opacity:0,transform:"translate3D(0, 5px, 0)"},"100%":{opacity:1,transform:"translate3D(0, 0, 0)"}},"in-scale":{"0%":{opacity:0,transform:"scale3D(0.95, 0.95, 1)"},"100%":{opacity:1,transform:"scale3D(1, 1, 1)"}}},opacity:{disabled:"var(--calcite-opacity-disabled)"},spacing:{.5:"0.125rem",2.5:"0.625rem",3.5:"0.875rem",4.5:"1.125rem",9:"2.25rem",11:"2.75rem",13:"3.25rem"},transitionProperty:{margin:"margin",color:"color"},transitionTimingFunction:{cubic:"cubic-bezier(0.215, 0.440, 0.420, 0.880)"},maxHeight:{menu:"45vh"},zIndex:{deep:"var(--calcite-z-index-deep)",default:"var(--calcite-z-index)",sticky:"var(--calcite-z-index-sticky)",header:"var(--calcite-z-index-header)",toast:"var(--calcite-z-index-toast)",dropdown:"var(--calcite-z-index-dropdown)",overlay:"var(--calcite-z-index-overlay)",modal:"var(--calcite-z-index-modal)",popover:"var(--calcite-z-index-popup)",tooltip:"var(--calcite-z-index-tooltip)"}}},plugins:[s(({addUtilities:e})=>{const a={".word-break":{"word-wrap":"break-word","word-break":"break-word"},".focus-base":{"outline-color":"transparent"},".focus-normal":{outline:"2px solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)))"},".focus-outset":{outline:"2px solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)))","outline-offset":n("2px","--calcite-offset-invert-focus")},".focus-inset":{outline:"2px solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)))","outline-offset":n("-2px","--calcite-offset-invert-focus")},".focus-outset-danger":{outline:"2px solid var(--calcite-color-status-danger)","outline-offset":n("2px","--calcite-offset-invert-focus")},".focus-inset-danger":{outline:"2px solid var(--calcite-color-status-danger)","outline-offset":n("-2px","--calcite-offset-invert-focus")},".transition-default":{"transition-property":"background-color, block-size, border-color, box-shadow, color, inset-block-end, inset-block-start, inset-inline-end, inset-inline-start, inset-size, opacity, outline-color, transform","transition-duration":"var(--calcite-animation-timing)","transition-timing-function":"ease-in-out"}};e(a)}),s(({addUtilities:e,theme:a})=>{const o=g(a("borderColor"));delete o.default;const i=Object.keys(o).map(r=>({[`.border-t-${r}`]:{borderTopColor:o[r]},[`.border-r-${r}`]:{borderRightColor:o[r]},[`.border-b-${r}`]:{borderBottomColor:o[r]},[`.border-l-${r}`]:{borderLeftColor:o[r]}})),t=Object.assign({},...i);e(t)})]};module.exports=x;
package/package.json ADDED
@@ -0,0 +1,32 @@
1
+ {
2
+ "name": "@esri/calcite-tailwind-preset",
3
+ "version": "0.1.0",
4
+ "description": "Tailwind CSS preset for the Calcite Design System",
5
+ "repository": {
6
+ "type": "git",
7
+ "url": "git+https://github.com/Esri/calcite-design-system.git",
8
+ "directory": "packages/calcite-tailwind-preset"
9
+ },
10
+ "license": "SEE LICENSE.md",
11
+ "main": "dist/index.js",
12
+ "types": "dist/index.d.ts",
13
+ "files": [
14
+ "dist/",
15
+ "THIRD-PARTY-LICENSES.md"
16
+ ],
17
+ "scripts": {
18
+ "build": "vite build",
19
+ "clean": "rimraf dist node_modules .turbo",
20
+ "lint": "concurrently npm:lint:*",
21
+ "lint:json": "prettier --write \"**/*.json\" >/dev/null",
22
+ "lint:md": "prettier --write \"**/*.md\" >/dev/null && markdownlint \"**/*.md\" --fix --dot --ignore-path .gitignore --ignore-path ../../.gitignore",
23
+ "util:update-3rd-party-licenses": "tsx ../../support/createThirdPartyLicenses.ts"
24
+ },
25
+ "peerDependencies": {
26
+ "@esri/calcite-design-tokens": "^3.0.2-next.3",
27
+ "tailwindcss": "^3.0.0 < 4.0.0"
28
+ },
29
+ "volta": {
30
+ "extends": "../../package.json"
31
+ }
32
+ }