@tampadevs/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.
- package/dist/index.d.ts +36 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/index.js +66 -0
- package/dist/index.js.map +1 -0
- package/dist/theme.css +135 -0
- package/package.json +31 -0
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Tampa Devs Tailwind CSS v4 Preset
|
|
3
|
+
*
|
|
4
|
+
* Usage in your app's CSS:
|
|
5
|
+
*
|
|
6
|
+
* @import "tailwindcss" source(".");
|
|
7
|
+
* @import "@tampadevs/tailwind-preset/theme.css";
|
|
8
|
+
*
|
|
9
|
+
* Or copy the @theme block directly into your app.css
|
|
10
|
+
*/
|
|
11
|
+
export declare const colors: {
|
|
12
|
+
navy: {
|
|
13
|
+
DEFAULT: string;
|
|
14
|
+
light: string;
|
|
15
|
+
dark: string;
|
|
16
|
+
};
|
|
17
|
+
coral: {
|
|
18
|
+
DEFAULT: string;
|
|
19
|
+
light: string;
|
|
20
|
+
dark: string;
|
|
21
|
+
};
|
|
22
|
+
sand: string;
|
|
23
|
+
bronze: string;
|
|
24
|
+
'td-blue': string;
|
|
25
|
+
'td-blue-light': string;
|
|
26
|
+
'td-blue-dark': string;
|
|
27
|
+
};
|
|
28
|
+
export declare const fontFamily: {
|
|
29
|
+
sans: string;
|
|
30
|
+
};
|
|
31
|
+
/**
|
|
32
|
+
* Tailwind v4 @theme configuration as a string
|
|
33
|
+
* Can be imported and used in CSS files
|
|
34
|
+
*/
|
|
35
|
+
export declare const themeConfig = "\n@theme {\n --font-sans: \"Inter\", ui-sans-serif, system-ui, sans-serif,\n \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n\n /* Tampa Devs color palette - inspired by Tampa Bay sunset over water */\n\n /* Deep ocean navy - sophisticated, trustworthy (text & backgrounds) */\n --color-navy: #1C2438;\n --color-navy-light: #2B3447;\n --color-navy-dark: #1A2031;\n\n /* Sunset coral/red - energetic accent for buttons & interactive elements */\n --color-coral: #E85A4F;\n --color-coral-light: #F07167;\n --color-coral-dark: #C44D44;\n\n /* Supporting warm tones (for text/accents that need warmth but not red) */\n --color-sand: #B6A991;\n --color-bronze: #8F7665;\n\n /* Legacy aliases for compatibility */\n --color-td-blue: #1C2438;\n --color-td-blue-light: #2B3447;\n --color-td-blue-dark: #1A2031;\n}\n";
|
|
36
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;CAoBlB,CAAC;AAEF,eAAO,MAAM,UAAU;;CAEtB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,WAAW,u2BA0BvB,CAAC"}
|
package/dist/index.js
ADDED
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Tampa Devs Tailwind CSS v4 Preset
|
|
3
|
+
*
|
|
4
|
+
* Usage in your app's CSS:
|
|
5
|
+
*
|
|
6
|
+
* @import "tailwindcss" source(".");
|
|
7
|
+
* @import "@tampadevs/tailwind-preset/theme.css";
|
|
8
|
+
*
|
|
9
|
+
* Or copy the @theme block directly into your app.css
|
|
10
|
+
*/
|
|
11
|
+
export const colors = {
|
|
12
|
+
// Primary - Navy
|
|
13
|
+
navy: {
|
|
14
|
+
DEFAULT: '#1C2438',
|
|
15
|
+
light: '#2B3447',
|
|
16
|
+
dark: '#1A2031',
|
|
17
|
+
},
|
|
18
|
+
// Accent - Coral
|
|
19
|
+
coral: {
|
|
20
|
+
DEFAULT: '#E85A4F',
|
|
21
|
+
light: '#F07167',
|
|
22
|
+
dark: '#C44D44',
|
|
23
|
+
},
|
|
24
|
+
// Supporting
|
|
25
|
+
sand: '#B6A991',
|
|
26
|
+
bronze: '#8F7665',
|
|
27
|
+
// Legacy aliases
|
|
28
|
+
'td-blue': '#1C2438',
|
|
29
|
+
'td-blue-light': '#2B3447',
|
|
30
|
+
'td-blue-dark': '#1A2031',
|
|
31
|
+
};
|
|
32
|
+
export const fontFamily = {
|
|
33
|
+
sans: '"Inter", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
|
|
34
|
+
};
|
|
35
|
+
/**
|
|
36
|
+
* Tailwind v4 @theme configuration as a string
|
|
37
|
+
* Can be imported and used in CSS files
|
|
38
|
+
*/
|
|
39
|
+
export const themeConfig = `
|
|
40
|
+
@theme {
|
|
41
|
+
--font-sans: "Inter", ui-sans-serif, system-ui, sans-serif,
|
|
42
|
+
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
|
43
|
+
|
|
44
|
+
/* Tampa Devs color palette - inspired by Tampa Bay sunset over water */
|
|
45
|
+
|
|
46
|
+
/* Deep ocean navy - sophisticated, trustworthy (text & backgrounds) */
|
|
47
|
+
--color-navy: #1C2438;
|
|
48
|
+
--color-navy-light: #2B3447;
|
|
49
|
+
--color-navy-dark: #1A2031;
|
|
50
|
+
|
|
51
|
+
/* Sunset coral/red - energetic accent for buttons & interactive elements */
|
|
52
|
+
--color-coral: #E85A4F;
|
|
53
|
+
--color-coral-light: #F07167;
|
|
54
|
+
--color-coral-dark: #C44D44;
|
|
55
|
+
|
|
56
|
+
/* Supporting warm tones (for text/accents that need warmth but not red) */
|
|
57
|
+
--color-sand: #B6A991;
|
|
58
|
+
--color-bronze: #8F7665;
|
|
59
|
+
|
|
60
|
+
/* Legacy aliases for compatibility */
|
|
61
|
+
--color-td-blue: #1C2438;
|
|
62
|
+
--color-td-blue-light: #2B3447;
|
|
63
|
+
--color-td-blue-dark: #1A2031;
|
|
64
|
+
}
|
|
65
|
+
`;
|
|
66
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,MAAM,CAAC,MAAM,MAAM,GAAG;IACpB,iBAAiB;IACjB,IAAI,EAAE;QACJ,OAAO,EAAE,SAAS;QAClB,KAAK,EAAE,SAAS;QAChB,IAAI,EAAE,SAAS;KAChB;IACD,iBAAiB;IACjB,KAAK,EAAE;QACL,OAAO,EAAE,SAAS;QAClB,KAAK,EAAE,SAAS;QAChB,IAAI,EAAE,SAAS;KAChB;IACD,aAAa;IACb,IAAI,EAAE,SAAS;IACf,MAAM,EAAE,SAAS;IACjB,iBAAiB;IACjB,SAAS,EAAE,SAAS;IACpB,eAAe,EAAE,SAAS;IAC1B,cAAc,EAAE,SAAS;CAC1B,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG;IACxB,IAAI,EAAE,6HAA6H;CACpI,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;CA0B1B,CAAC"}
|
package/dist/theme.css
ADDED
|
@@ -0,0 +1,135 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Tampa Devs Tailwind CSS v4 Theme
|
|
3
|
+
*
|
|
4
|
+
* Import this file in your app.css after the tailwindcss import:
|
|
5
|
+
*
|
|
6
|
+
* @import "tailwindcss";
|
|
7
|
+
* @import "@tampadevs/tailwind-preset/theme.css";
|
|
8
|
+
*/
|
|
9
|
+
|
|
10
|
+
/* Smooth scrolling */
|
|
11
|
+
html {
|
|
12
|
+
scroll-behavior: smooth;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
/* Dark mode color scheme for proper browser integration */
|
|
16
|
+
@media (prefers-color-scheme: dark) {
|
|
17
|
+
html {
|
|
18
|
+
color-scheme: dark;
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
@theme {
|
|
23
|
+
--font-sans: "Inter", ui-sans-serif, system-ui, sans-serif,
|
|
24
|
+
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
|
25
|
+
|
|
26
|
+
/* Tampa Devs color palette - inspired by Tampa Bay sunset over water */
|
|
27
|
+
|
|
28
|
+
/* Deep ocean navy - sophisticated, trustworthy (text & backgrounds) */
|
|
29
|
+
--color-navy: #1C2438;
|
|
30
|
+
--color-navy-light: #2B3447;
|
|
31
|
+
--color-navy-dark: #1A2031;
|
|
32
|
+
|
|
33
|
+
/* Sunset coral/red - energetic accent for buttons & interactive elements */
|
|
34
|
+
--color-coral: #E85A4F;
|
|
35
|
+
--color-coral-light: #F07167;
|
|
36
|
+
--color-coral-dark: #C44D44;
|
|
37
|
+
|
|
38
|
+
/* Supporting warm tones (for text/accents that need warmth but not red) */
|
|
39
|
+
--color-sand: #B6A991;
|
|
40
|
+
--color-bronze: #8F7665;
|
|
41
|
+
|
|
42
|
+
/* Legacy aliases for compatibility */
|
|
43
|
+
--color-td-blue: #1C2438;
|
|
44
|
+
--color-td-blue-light: #2B3447;
|
|
45
|
+
--color-td-blue-dark: #1A2031;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
/* Glass morphism utilities with dark mode support */
|
|
49
|
+
.glass {
|
|
50
|
+
backdrop-filter: blur(12px);
|
|
51
|
+
-webkit-backdrop-filter: blur(12px);
|
|
52
|
+
background: rgba(255, 255, 255, 0.7);
|
|
53
|
+
box-shadow:
|
|
54
|
+
inset 0 1px 1px 0 rgba(255, 255, 255, 0.1),
|
|
55
|
+
0 1px 3px 0 rgba(0, 0, 0, 0.05);
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
@media (prefers-color-scheme: dark) {
|
|
59
|
+
.glass {
|
|
60
|
+
background: rgba(17, 24, 39, 0.7);
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
.glass-card {
|
|
65
|
+
backdrop-filter: blur(4px);
|
|
66
|
+
-webkit-backdrop-filter: blur(4px);
|
|
67
|
+
background: rgba(255, 255, 255, 0.8);
|
|
68
|
+
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
69
|
+
box-shadow:
|
|
70
|
+
0 4px 6px -1px rgba(0, 0, 0, 0.05),
|
|
71
|
+
0 2px 4px -2px rgba(0, 0, 0, 0.03),
|
|
72
|
+
inset 0 1px 0 0 rgba(255, 255, 255, 0.1);
|
|
73
|
+
transition: background-color 0.15s ease, box-shadow 0.15s ease;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
@media (prefers-color-scheme: dark) {
|
|
77
|
+
.glass-card {
|
|
78
|
+
background: rgba(17, 24, 39, 0.8);
|
|
79
|
+
border-color: rgba(55, 65, 81, 0.5);
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
.glass-card:hover {
|
|
84
|
+
background: rgba(255, 255, 255, 0.9);
|
|
85
|
+
box-shadow:
|
|
86
|
+
0 10px 15px -3px rgba(0, 0, 0, 0.08),
|
|
87
|
+
0 4px 6px -4px rgba(0, 0, 0, 0.04),
|
|
88
|
+
inset 0 1px 0 0 rgba(255, 255, 255, 0.15);
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
@media (prefers-color-scheme: dark) {
|
|
92
|
+
.glass-card:hover {
|
|
93
|
+
background: rgba(17, 24, 39, 0.9);
|
|
94
|
+
}
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
.glass-frost {
|
|
98
|
+
backdrop-filter: blur(16px);
|
|
99
|
+
-webkit-backdrop-filter: blur(16px);
|
|
100
|
+
background: rgba(255, 255, 255, 0.6);
|
|
101
|
+
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
@media (prefers-color-scheme: dark) {
|
|
105
|
+
.glass-frost {
|
|
106
|
+
background: rgba(17, 24, 39, 0.6);
|
|
107
|
+
}
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
.glass-dark {
|
|
111
|
+
backdrop-filter: blur(12px);
|
|
112
|
+
-webkit-backdrop-filter: blur(12px);
|
|
113
|
+
background: rgba(28, 36, 56, 0.8);
|
|
114
|
+
border: 1px solid rgba(255, 255, 255, 0.05);
|
|
115
|
+
box-shadow:
|
|
116
|
+
inset 0 1px 1px 0 rgba(255, 255, 255, 0.05),
|
|
117
|
+
0 4px 6px -1px rgba(0, 0, 0, 0.2);
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
/* Focus states */
|
|
121
|
+
:focus-visible {
|
|
122
|
+
outline: 2px solid var(--color-coral);
|
|
123
|
+
outline-offset: 2px;
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
/* Reduced motion */
|
|
127
|
+
@media (prefers-reduced-motion: reduce) {
|
|
128
|
+
*,
|
|
129
|
+
*::before,
|
|
130
|
+
*::after {
|
|
131
|
+
animation-duration: 0.01ms !important;
|
|
132
|
+
animation-iteration-count: 1 !important;
|
|
133
|
+
transition-duration: 0.01ms !important;
|
|
134
|
+
}
|
|
135
|
+
}
|
package/package.json
ADDED
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@tampadevs/tailwind-preset",
|
|
3
|
+
"version": "0.1.0",
|
|
4
|
+
"description": "Tailwind CSS v4 preset for Tampa Devs design system",
|
|
5
|
+
"type": "module",
|
|
6
|
+
"main": "./dist/index.js",
|
|
7
|
+
"types": "./dist/index.d.ts",
|
|
8
|
+
"exports": {
|
|
9
|
+
".": {
|
|
10
|
+
"import": "./dist/index.js",
|
|
11
|
+
"types": "./dist/index.d.ts"
|
|
12
|
+
},
|
|
13
|
+
"./theme.css": "./dist/theme.css"
|
|
14
|
+
},
|
|
15
|
+
"files": [
|
|
16
|
+
"dist"
|
|
17
|
+
],
|
|
18
|
+
"scripts": {
|
|
19
|
+
"build": "tsc && cp src/theme.css dist/theme.css",
|
|
20
|
+
"clean": "rm -rf dist"
|
|
21
|
+
},
|
|
22
|
+
"devDependencies": {
|
|
23
|
+
"typescript": "^5.7.0"
|
|
24
|
+
},
|
|
25
|
+
"peerDependencies": {
|
|
26
|
+
"tailwindcss": "^4.0.0"
|
|
27
|
+
},
|
|
28
|
+
"publishConfig": {
|
|
29
|
+
"access": "public"
|
|
30
|
+
}
|
|
31
|
+
}
|