@tampadevs/tokens 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 (20) hide show
  1. package/dist/_tokens.scss +99 -0
  2. package/dist/colors.d.ts +42 -0
  3. package/dist/colors.d.ts.map +1 -0
  4. package/dist/colors.js +47 -0
  5. package/dist/colors.js.map +1 -0
  6. package/dist/index.d.ts +4 -0
  7. package/dist/index.d.ts.map +1 -0
  8. package/dist/index.js +4 -0
  9. package/dist/index.js.map +1 -0
  10. package/dist/spacing.d.ts +63 -0
  11. package/dist/spacing.d.ts.map +1 -0
  12. package/dist/spacing.js +63 -0
  13. package/dist/spacing.js.map +1 -0
  14. package/dist/tokens.css +99 -0
  15. package/dist/tokens.json +108 -0
  16. package/dist/typography.d.ts +43 -0
  17. package/dist/typography.d.ts.map +1 -0
  18. package/dist/typography.js +43 -0
  19. package/dist/typography.js.map +1 -0
  20. package/package.json +31 -0
package/dist/_tokens.scss ADDED
@@ -0,0 +1,99 @@
1
+ //
2
+ // Tampa Devs Design Tokens
3
+ // Auto-generated - do not edit directly
4
+ //
5
+
6
+ // Colors - Primary (Navy)
7
+ $td-color-navy: #1C2438;
8
+ $td-color-navy-light: #2B3447;
9
+ $td-color-navy-dark: #1A2031;
10
+
11
+ // Colors - Accent (Coral)
12
+ $td-color-coral: #E85A4F;
13
+ $td-color-coral-light: #F07167;
14
+ $td-color-coral-dark: #C44D44;
15
+
16
+ // Colors - Supporting
17
+ $td-color-sand: #B6A991;
18
+ $td-color-bronze: #8F7665;
19
+
20
+ // Colors - Semantic
21
+ $td-color-background: #FFFFFF;
22
+ $td-color-background-dark: #030712;
23
+ $td-color-surface: #FFFFFF;
24
+ $td-color-surface-dark: #111827;
25
+ $td-color-text: #1C2438;
26
+ $td-color-text-muted: #6B7280;
27
+ $td-color-text-dark: #F9FAFB;
28
+ $td-color-text-dark-muted: #9CA3AF;
29
+ $td-color-border: #E5E7EB;
30
+ $td-color-border-dark: #374151;
31
+
32
+ // Colors - Legacy (for backward compatibility)
33
+ $td-color-legacy-orange: #ee5c53;
34
+ $td-color-legacy-green: #1aac9c;
35
+ $td-color-legacy-blue: #4e5569;
36
+
37
+ // Typography
38
+ $td-font-sans: "Inter", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
39
+ $td-font-size-xs: 0.75rem;
40
+ $td-font-size-sm: 0.875rem;
41
+ $td-font-size-base: 1rem;
42
+ $td-font-size-lg: 1.125rem;
43
+ $td-font-size-xl: 1.25rem;
44
+ $td-font-size-2xl: 1.5rem;
45
+ $td-font-size-3xl: 1.875rem;
46
+ $td-font-size-4xl: 2.25rem;
47
+ $td-font-size-5xl: 3rem;
48
+ $td-font-size-6xl: 3.75rem;
49
+
50
+ // Font Weights
51
+ $td-font-weight-normal: 400;
52
+ $td-font-weight-medium: 500;
53
+ $td-font-weight-semibold: 600;
54
+ $td-font-weight-bold: 700;
55
+ $td-font-weight-extrabold: 800;
56
+
57
+ // Line Heights
58
+ $td-line-height-none: 1;
59
+ $td-line-height-tight: 1.25;
60
+ $td-line-height-snug: 1.375;
61
+ $td-line-height-normal: 1.5;
62
+ $td-line-height-relaxed: 1.625;
63
+ $td-line-height-loose: 2;
64
+
65
+ // Border Radius
66
+ $td-radius-none: 0;
67
+ $td-radius-sm: 0.125rem;
68
+ $td-radius-default: 0.25rem;
69
+ $td-radius-md: 0.375rem;
70
+ $td-radius-lg: 0.5rem;
71
+ $td-radius-xl: 0.75rem;
72
+ $td-radius-2xl: 1rem;
73
+ $td-radius-3xl: 1.5rem;
74
+ $td-radius-full: 9999px;
75
+
76
+ // Color Maps (for programmatic access)
77
+ $td-colors: (
78
+ 'navy': $td-color-navy,
79
+ 'navy-light': $td-color-navy-light,
80
+ 'navy-dark': $td-color-navy-dark,
81
+ 'coral': $td-color-coral,
82
+ 'coral-light': $td-color-coral-light,
83
+ 'coral-dark': $td-color-coral-dark,
84
+ 'sand': $td-color-sand,
85
+ 'bronze': $td-color-bronze,
86
+ );
87
+
88
+ $td-font-sizes: (
89
+ 'xs': $td-font-size-xs,
90
+ 'sm': $td-font-size-sm,
91
+ 'base': $td-font-size-base,
92
+ 'lg': $td-font-size-lg,
93
+ 'xl': $td-font-size-xl,
94
+ '2xl': $td-font-size-2xl,
95
+ '3xl': $td-font-size-3xl,
96
+ '4xl': $td-font-size-4xl,
97
+ '5xl': $td-font-size-5xl,
98
+ '6xl': $td-font-size-6xl,
99
+ );
package/dist/colors.d.ts ADDED
@@ -0,0 +1,42 @@
1
+ /**
2
+ * Tampa Devs Color Palette
3
+ * Inspired by Tampa Bay sunset over water
4
+ */
5
+ export declare const colors: {
6
+ navy: {
7
+ DEFAULT: string;
8
+ light: string;
9
+ dark: string;
10
+ };
11
+ coral: {
12
+ DEFAULT: string;
13
+ light: string;
14
+ dark: string;
15
+ };
16
+ sand: string;
17
+ bronze: string;
18
+ background: {
19
+ DEFAULT: string;
20
+ dark: string;
21
+ };
22
+ surface: {
23
+ DEFAULT: string;
24
+ dark: string;
25
+ };
26
+ text: {
27
+ DEFAULT: string;
28
+ muted: string;
29
+ dark: string;
30
+ darkMuted: string;
31
+ };
32
+ border: {
33
+ DEFAULT: string;
34
+ dark: string;
35
+ };
36
+ legacy: {
37
+ orange: string;
38
+ green: string;
39
+ blue: string;
40
+ };
41
+ };
42
+ //# sourceMappingURL=colors.d.ts.map
package/dist/colors.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["../src/colors.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6ClB,CAAC"}
package/dist/colors.js ADDED
@@ -0,0 +1,47 @@
1
+ /**
2
+ * Tampa Devs Color Palette
3
+ * Inspired by Tampa Bay sunset over water
4
+ */
5
+ export const colors = {
6
+ // Primary - Deep ocean navy (sophisticated, trustworthy)
7
+ navy: {
8
+ DEFAULT: '#1C2438',
9
+ light: '#2B3447',
10
+ dark: '#1A2031',
11
+ },
12
+ // Accent - Sunset coral/red (energetic, interactive)
13
+ coral: {
14
+ DEFAULT: '#E85A4F',
15
+ light: '#F07167',
16
+ dark: '#C44D44',
17
+ },
18
+ // Supporting warm tones
19
+ sand: '#B6A991',
20
+ bronze: '#8F7665',
21
+ // Semantic colors
22
+ background: {
23
+ DEFAULT: '#FFFFFF',
24
+ dark: '#030712',
25
+ },
26
+ surface: {
27
+ DEFAULT: '#FFFFFF',
28
+ dark: '#111827',
29
+ },
30
+ text: {
31
+ DEFAULT: '#1C2438',
32
+ muted: '#6B7280',
33
+ dark: '#F9FAFB',
34
+ darkMuted: '#9CA3AF',
35
+ },
36
+ border: {
37
+ DEFAULT: '#E5E7EB',
38
+ dark: '#374151',
39
+ },
40
+ // Legacy colors (for backward compatibility with tampadevs.com)
41
+ legacy: {
42
+ orange: '#ee5c53',
43
+ green: '#1aac9c',
44
+ blue: '#4e5569',
45
+ },
46
+ };
47
+ //# sourceMappingURL=colors.js.map
package/dist/colors.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"colors.js","sourceRoot":"","sources":["../src/colors.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,MAAM,CAAC,MAAM,MAAM,GAAG;IACpB,yDAAyD;IACzD,IAAI,EAAE;QACJ,OAAO,EAAE,SAAS;QAClB,KAAK,EAAE,SAAS;QAChB,IAAI,EAAE,SAAS;KAChB;IAED,qDAAqD;IACrD,KAAK,EAAE;QACL,OAAO,EAAE,SAAS;QAClB,KAAK,EAAE,SAAS;QAChB,IAAI,EAAE,SAAS;KAChB;IAED,wBAAwB;IACxB,IAAI,EAAE,SAAS;IACf,MAAM,EAAE,SAAS;IAEjB,kBAAkB;IAClB,UAAU,EAAE;QACV,OAAO,EAAE,SAAS;QAClB,IAAI,EAAE,SAAS;KAChB;IACD,OAAO,EAAE;QACP,OAAO,EAAE,SAAS;QAClB,IAAI,EAAE,SAAS;KAChB;IACD,IAAI,EAAE;QACJ,OAAO,EAAE,SAAS;QAClB,KAAK,EAAE,SAAS;QAChB,IAAI,EAAE,SAAS;QACf,SAAS,EAAE,SAAS;KACrB;IACD,MAAM,EAAE;QACN,OAAO,EAAE,SAAS;QAClB,IAAI,EAAE,SAAS;KAChB;IAED,gEAAgE;IAChE,MAAM,EAAE;QACN,MAAM,EAAE,SAAS;QACjB,KAAK,EAAE,SAAS;QAChB,IAAI,EAAE,SAAS;KAChB;CACF,CAAC"}
package/dist/index.d.ts ADDED
@@ -0,0 +1,4 @@
1
+ export { colors } from './colors.js';
2
+ export { typography } from './typography.js';
3
+ export { spacing, borderRadius, shadows } from './spacing.js';
4
+ //# sourceMappingURL=index.d.ts.map
package/dist/index.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,OAAO,EAAE,OAAO,EAAE,YAAY,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC"}
package/dist/index.js ADDED
@@ -0,0 +1,4 @@
1
+ export { colors } from './colors.js';
2
+ export { typography } from './typography.js';
3
+ export { spacing, borderRadius, shadows } from './spacing.js';
4
+ //# sourceMappingURL=index.js.map
package/dist/index.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,OAAO,EAAE,OAAO,EAAE,YAAY,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC"}
package/dist/spacing.d.ts ADDED
@@ -0,0 +1,63 @@
1
+ /**
2
+ * Tampa Devs Spacing Scale
3
+ * Based on 4px base unit
4
+ */
5
+ export declare const spacing: {
6
+ px: string;
7
+ 0: string;
8
+ 0.5: string;
9
+ 1: string;
10
+ 1.5: string;
11
+ 2: string;
12
+ 2.5: string;
13
+ 3: string;
14
+ 3.5: string;
15
+ 4: string;
16
+ 5: string;
17
+ 6: string;
18
+ 7: string;
19
+ 8: string;
20
+ 9: string;
21
+ 10: string;
22
+ 11: string;
23
+ 12: string;
24
+ 14: string;
25
+ 16: string;
26
+ 20: string;
27
+ 24: string;
28
+ 28: string;
29
+ 32: string;
30
+ 36: string;
31
+ 40: string;
32
+ 44: string;
33
+ 48: string;
34
+ 52: string;
35
+ 56: string;
36
+ 60: string;
37
+ 64: string;
38
+ 72: string;
39
+ 80: string;
40
+ 96: string;
41
+ };
42
+ export declare const borderRadius: {
43
+ none: string;
44
+ sm: string;
45
+ DEFAULT: string;
46
+ md: string;
47
+ lg: string;
48
+ xl: string;
49
+ '2xl': string;
50
+ '3xl': string;
51
+ full: string;
52
+ };
53
+ export declare const shadows: {
54
+ sm: string;
55
+ DEFAULT: string;
56
+ md: string;
57
+ lg: string;
58
+ xl: string;
59
+ '2xl': string;
60
+ inner: string;
61
+ none: string;
62
+ };
63
+ //# sourceMappingURL=spacing.d.ts.map
package/dist/spacing.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"spacing.d.ts","sourceRoot":"","sources":["../src/spacing.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoCnB,CAAC;AAEF,eAAO,MAAM,YAAY;;;;;;;;;;CAUxB,CAAC;AAEF,eAAO,MAAM,OAAO;;;;;;;;;CASnB,CAAC"}
package/dist/spacing.js ADDED
@@ -0,0 +1,63 @@
1
+ /**
2
+ * Tampa Devs Spacing Scale
3
+ * Based on 4px base unit
4
+ */
5
+ export const spacing = {
6
+ px: '1px',
7
+ 0: '0',
8
+ 0.5: '0.125rem', // 2px
9
+ 1: '0.25rem', // 4px
10
+ 1.5: '0.375rem', // 6px
11
+ 2: '0.5rem', // 8px
12
+ 2.5: '0.625rem', // 10px
13
+ 3: '0.75rem', // 12px
14
+ 3.5: '0.875rem', // 14px
15
+ 4: '1rem', // 16px
16
+ 5: '1.25rem', // 20px
17
+ 6: '1.5rem', // 24px
18
+ 7: '1.75rem', // 28px
19
+ 8: '2rem', // 32px
20
+ 9: '2.25rem', // 36px
21
+ 10: '2.5rem', // 40px
22
+ 11: '2.75rem', // 44px
23
+ 12: '3rem', // 48px
24
+ 14: '3.5rem', // 56px
25
+ 16: '4rem', // 64px
26
+ 20: '5rem', // 80px
27
+ 24: '6rem', // 96px
28
+ 28: '7rem', // 112px
29
+ 32: '8rem', // 128px
30
+ 36: '9rem', // 144px
31
+ 40: '10rem', // 160px
32
+ 44: '11rem', // 176px
33
+ 48: '12rem', // 192px
34
+ 52: '13rem', // 208px
35
+ 56: '14rem', // 224px
36
+ 60: '15rem', // 240px
37
+ 64: '16rem', // 256px
38
+ 72: '18rem', // 288px
39
+ 80: '20rem', // 320px
40
+ 96: '24rem', // 384px
41
+ };
42
+ export const borderRadius = {
43
+ none: '0',
44
+ sm: '0.125rem', // 2px
45
+ DEFAULT: '0.25rem', // 4px
46
+ md: '0.375rem', // 6px
47
+ lg: '0.5rem', // 8px
48
+ xl: '0.75rem', // 12px
49
+ '2xl': '1rem', // 16px
50
+ '3xl': '1.5rem', // 24px
51
+ full: '9999px',
52
+ };
53
+ export const shadows = {
54
+ sm: '0 1px 2px 0 rgb(0 0 0 / 0.05)',
55
+ DEFAULT: '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)',
56
+ md: '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
57
+ lg: '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)',
58
+ xl: '0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)',
59
+ '2xl': '0 25px 50px -12px rgb(0 0 0 / 0.25)',
60
+ inner: 'inset 0 2px 4px 0 rgb(0 0 0 / 0.05)',
61
+ none: 'none',
62
+ };
63
+ //# sourceMappingURL=spacing.js.map
package/dist/spacing.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"spacing.js","sourceRoot":"","sources":["../src/spacing.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,EAAE,EAAE,KAAK;IACT,CAAC,EAAE,GAAG;IACN,GAAG,EAAE,UAAU,EAAG,MAAM;IACxB,CAAC,EAAE,SAAS,EAAM,MAAM;IACxB,GAAG,EAAE,UAAU,EAAG,MAAM;IACxB,CAAC,EAAE,QAAQ,EAAO,MAAM;IACxB,GAAG,EAAE,UAAU,EAAG,OAAO;IACzB,CAAC,EAAE,SAAS,EAAM,OAAO;IACzB,GAAG,EAAE,UAAU,EAAG,OAAO;IACzB,CAAC,EAAE,MAAM,EAAS,OAAO;IACzB,CAAC,EAAE,SAAS,EAAM,OAAO;IACzB,CAAC,EAAE,QAAQ,EAAO,OAAO;IACzB,CAAC,EAAE,SAAS,EAAM,OAAO;IACzB,CAAC,EAAE,MAAM,EAAS,OAAO;IACzB,CAAC,EAAE,SAAS,EAAM,OAAO;IACzB,EAAE,EAAE,QAAQ,EAAM,OAAO;IACzB,EAAE,EAAE,SAAS,EAAK,OAAO;IACzB,EAAE,EAAE,MAAM,EAAQ,OAAO;IACzB,EAAE,EAAE,QAAQ,EAAM,OAAO;IACzB,EAAE,EAAE,MAAM,EAAQ,OAAO;IACzB,EAAE,EAAE,MAAM,EAAQ,OAAO;IACzB,EAAE,EAAE,MAAM,EAAQ,OAAO;IACzB,EAAE,EAAE,MAAM,EAAQ,QAAQ;IAC1B,EAAE,EAAE,MAAM,EAAQ,QAAQ;IAC1B,EAAE,EAAE,MAAM,EAAQ,QAAQ;IAC1B,EAAE,EAAE,OAAO,EAAO,QAAQ;IAC1B,EAAE,EAAE,OAAO,EAAO,QAAQ;IAC1B,EAAE,EAAE,OAAO,EAAO,QAAQ;IAC1B,EAAE,EAAE,OAAO,EAAO,QAAQ;IAC1B,EAAE,EAAE,OAAO,EAAO,QAAQ;IAC1B,EAAE,EAAE,OAAO,EAAO,QAAQ;IAC1B,EAAE,EAAE,OAAO,EAAO,QAAQ;IAC1B,EAAE,EAAE,OAAO,EAAO,QAAQ;IAC1B,EAAE,EAAE,OAAO,EAAO,QAAQ;IAC1B,EAAE,EAAE,OAAO,EAAO,QAAQ;CAC3B,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG;IAC1B,IAAI,EAAE,GAAG;IACT,EAAE,EAAE,UAAU,EAAI,MAAM;IACxB,OAAO,EAAE,SAAS,EAAE,MAAM;IAC1B,EAAE,EAAE,UAAU,EAAI,MAAM;IACxB,EAAE,EAAE,QAAQ,EAAM,MAAM;IACxB,EAAE,EAAE,SAAS,EAAK,OAAO;IACzB,KAAK,EAAE,MAAM,EAAK,OAAO;IACzB,KAAK,EAAE,QAAQ,EAAG,OAAO;IACzB,IAAI,EAAE,QAAQ;CACf,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,EAAE,EAAE,+BAA+B;IACnC,OAAO,EAAE,+DAA+D;IACxE,EAAE,EAAE,kEAAkE;IACtE,EAAE,EAAE,oEAAoE;IACxE,EAAE,EAAE,qEAAqE;IACzE,KAAK,EAAE,qCAAqC;IAC5C,KAAK,EAAE,qCAAqC;IAC5C,IAAI,EAAE,MAAM;CACb,CAAC"}
package/dist/tokens.css ADDED
@@ -0,0 +1,99 @@
1
+ /**
2
+ * Tampa Devs Design Tokens
3
+ * Auto-generated - do not edit directly
4
+ */
5
+
6
+ :root {
7
+ /* Colors - Primary (Navy) */
8
+ --td-color-navy: #1C2438;
9
+ --td-color-navy-light: #2B3447;
10
+ --td-color-navy-dark: #1A2031;
11
+
12
+ /* Colors - Accent (Coral) */
13
+ --td-color-coral: #E85A4F;
14
+ --td-color-coral-light: #F07167;
15
+ --td-color-coral-dark: #C44D44;
16
+
17
+ /* Colors - Supporting */
18
+ --td-color-sand: #B6A991;
19
+ --td-color-bronze: #8F7665;
20
+
21
+ /* Colors - Semantic */
22
+ --td-color-background: #FFFFFF;
23
+ --td-color-surface: #FFFFFF;
24
+ --td-color-text: #1C2438;
25
+ --td-color-text-muted: #6B7280;
26
+ --td-color-border: #E5E7EB;
27
+
28
+ /* Colors - Legacy (for backward compatibility) */
29
+ --td-color-legacy-orange: #ee5c53;
30
+ --td-color-legacy-green: #1aac9c;
31
+ --td-color-legacy-blue: #4e5569;
32
+
33
+ /* Typography */
34
+ --td-font-sans: "Inter", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
35
+ --td-font-size-xs: 0.75rem;
36
+ --td-font-size-sm: 0.875rem;
37
+ --td-font-size-base: 1rem;
38
+ --td-font-size-lg: 1.125rem;
39
+ --td-font-size-xl: 1.25rem;
40
+ --td-font-size-2xl: 1.5rem;
41
+ --td-font-size-3xl: 1.875rem;
42
+ --td-font-size-4xl: 2.25rem;
43
+ --td-font-size-5xl: 3rem;
44
+ --td-font-size-6xl: 3.75rem;
45
+
46
+ /* Font Weights */
47
+ --td-font-weight-normal: 400;
48
+ --td-font-weight-medium: 500;
49
+ --td-font-weight-semibold: 600;
50
+ --td-font-weight-bold: 700;
51
+ --td-font-weight-extrabold: 800;
52
+
53
+ /* Line Heights */
54
+ --td-line-height-none: 1;
55
+ --td-line-height-tight: 1.25;
56
+ --td-line-height-snug: 1.375;
57
+ --td-line-height-normal: 1.5;
58
+ --td-line-height-relaxed: 1.625;
59
+ --td-line-height-loose: 2;
60
+
61
+ /* Border Radius */
62
+ --td-radius-none: 0;
63
+ --td-radius-sm: 0.125rem;
64
+ --td-radius-default: 0.25rem;
65
+ --td-radius-md: 0.375rem;
66
+ --td-radius-lg: 0.5rem;
67
+ --td-radius-xl: 0.75rem;
68
+ --td-radius-2xl: 1rem;
69
+ --td-radius-3xl: 1.5rem;
70
+ --td-radius-full: 9999px;
71
+
72
+ /* Shadows */
73
+ --td-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
74
+ --td-shadow-default: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
75
+ --td-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
76
+ --td-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
77
+ --td-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
78
+ --td-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
79
+ --td-shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
80
+ }
81
+
82
+ /* Dark mode */
83
+ @media (prefers-color-scheme: dark) {
84
+ :root {
85
+ --td-color-background: #030712;
86
+ --td-color-surface: #111827;
87
+ --td-color-text: #F9FAFB;
88
+ --td-color-text-muted: #9CA3AF;
89
+ --td-color-border: #374151;
90
+ }
91
+ }
92
+
93
+ /* Legacy theme class (for gradual migration) */
94
+ [data-theme="legacy"],
95
+ .td-theme-legacy {
96
+ --td-color-navy: #4e5569;
97
+ --td-color-coral: #ee5c53;
98
+ --td-color-sand: #1aac9c;
99
+ }
package/dist/tokens.json ADDED
@@ -0,0 +1,108 @@
1
+ {
2
+ "colors": {
3
+ "navy": {
4
+ "DEFAULT": "#1C2438",
5
+ "light": "#2B3447",
6
+ "dark": "#1A2031"
7
+ },
8
+ "coral": {
9
+ "DEFAULT": "#E85A4F",
10
+ "light": "#F07167",
11
+ "dark": "#C44D44"
12
+ },
13
+ "sand": "#B6A991",
14
+ "bronze": "#8F7665",
15
+ "background": {
16
+ "DEFAULT": "#FFFFFF",
17
+ "dark": "#030712"
18
+ },
19
+ "surface": {
20
+ "DEFAULT": "#FFFFFF",
21
+ "dark": "#111827"
22
+ },
23
+ "text": {
24
+ "DEFAULT": "#1C2438",
25
+ "muted": "#6B7280",
26
+ "dark": "#F9FAFB",
27
+ "darkMuted": "#9CA3AF"
28
+ },
29
+ "border": {
30
+ "DEFAULT": "#E5E7EB",
31
+ "dark": "#374151"
32
+ },
33
+ "legacy": {
34
+ "orange": "#ee5c53",
35
+ "green": "#1aac9c",
36
+ "blue": "#4e5569"
37
+ }
38
+ },
39
+ "typography": {
40
+ "fontFamily": {
41
+ "sans": "\"Inter\", ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\""
42
+ },
43
+ "fontSize": {
44
+ "xs": "0.75rem",
45
+ "sm": "0.875rem",
46
+ "base": "1rem",
47
+ "lg": "1.125rem",
48
+ "xl": "1.25rem",
49
+ "2xl": "1.5rem",
50
+ "3xl": "1.875rem",
51
+ "4xl": "2.25rem",
52
+ "5xl": "3rem",
53
+ "6xl": "3.75rem"
54
+ },
55
+ "fontWeight": {
56
+ "normal": "400",
57
+ "medium": "500",
58
+ "semibold": "600",
59
+ "bold": "700",
60
+ "extrabold": "800"
61
+ },
62
+ "lineHeight": {
63
+ "none": "1",
64
+ "tight": "1.25",
65
+ "snug": "1.375",
66
+ "normal": "1.5",
67
+ "relaxed": "1.625",
68
+ "loose": "2"
69
+ }
70
+ },
71
+ "spacing": {
72
+ "0": "0",
73
+ "1": "0.25rem",
74
+ "2": "0.5rem",
75
+ "3": "0.75rem",
76
+ "4": "1rem",
77
+ "5": "1.25rem",
78
+ "6": "1.5rem",
79
+ "8": "2rem",
80
+ "10": "2.5rem",
81
+ "12": "3rem",
82
+ "16": "4rem",
83
+ "20": "5rem",
84
+ "24": "6rem",
85
+ "px": "1px"
86
+ },
87
+ "borderRadius": {
88
+ "none": "0",
89
+ "sm": "0.125rem",
90
+ "DEFAULT": "0.25rem",
91
+ "md": "0.375rem",
92
+ "lg": "0.5rem",
93
+ "xl": "0.75rem",
94
+ "2xl": "1rem",
95
+ "3xl": "1.5rem",
96
+ "full": "9999px"
97
+ },
98
+ "shadows": {
99
+ "sm": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
100
+ "DEFAULT": "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
101
+ "md": "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
102
+ "lg": "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",
103
+ "xl": "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)",
104
+ "2xl": "0 25px 50px -12px rgb(0 0 0 / 0.25)",
105
+ "inner": "inset 0 2px 4px 0 rgb(0 0 0 / 0.05)",
106
+ "none": "none"
107
+ }
108
+ }
package/dist/typography.d.ts ADDED
@@ -0,0 +1,43 @@
1
+ /**
2
+ * Tampa Devs Typography
3
+ */
4
+ export declare const typography: {
5
+ fontFamily: {
6
+ sans: string;
7
+ };
8
+ fontSize: {
9
+ xs: string;
10
+ sm: string;
11
+ base: string;
12
+ lg: string;
13
+ xl: string;
14
+ '2xl': string;
15
+ '3xl': string;
16
+ '4xl': string;
17
+ '5xl': string;
18
+ '6xl': string;
19
+ };
20
+ fontWeight: {
21
+ normal: string;
22
+ medium: string;
23
+ semibold: string;
24
+ bold: string;
25
+ extrabold: string;
26
+ };
27
+ lineHeight: {
28
+ none: string;
29
+ tight: string;
30
+ snug: string;
31
+ normal: string;
32
+ relaxed: string;
33
+ loose: string;
34
+ };
35
+ letterSpacing: {
36
+ tighter: string;
37
+ tight: string;
38
+ normal: string;
39
+ wide: string;
40
+ wider: string;
41
+ };
42
+ };
43
+ //# sourceMappingURL=typography.d.ts.map
package/dist/typography.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"typography.d.ts","sourceRoot":"","sources":["../src/typography.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0CtB,CAAC"}
package/dist/typography.js ADDED
@@ -0,0 +1,43 @@
1
+ /**
2
+ * Tampa Devs Typography
3
+ */
4
+ export const typography = {
5
+ fontFamily: {
6
+ sans: '"Inter", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
7
+ },
8
+ fontSize: {
9
+ xs: '0.75rem', // 12px
10
+ sm: '0.875rem', // 14px
11
+ base: '1rem', // 16px
12
+ lg: '1.125rem', // 18px
13
+ xl: '1.25rem', // 20px
14
+ '2xl': '1.5rem', // 24px
15
+ '3xl': '1.875rem', // 30px
16
+ '4xl': '2.25rem', // 36px
17
+ '5xl': '3rem', // 48px
18
+ '6xl': '3.75rem', // 60px
19
+ },
20
+ fontWeight: {
21
+ normal: '400',
22
+ medium: '500',
23
+ semibold: '600',
24
+ bold: '700',
25
+ extrabold: '800',
26
+ },
27
+ lineHeight: {
28
+ none: '1',
29
+ tight: '1.25',
30
+ snug: '1.375',
31
+ normal: '1.5',
32
+ relaxed: '1.625',
33
+ loose: '2',
34
+ },
35
+ letterSpacing: {
36
+ tighter: '-0.05em',
37
+ tight: '-0.025em',
38
+ normal: '0',
39
+ wide: '0.025em',
40
+ wider: '0.05em',
41
+ },
42
+ };
43
+ //# sourceMappingURL=typography.js.map
package/dist/typography.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"typography.js","sourceRoot":"","sources":["../src/typography.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,MAAM,CAAC,MAAM,UAAU,GAAG;IACxB,UAAU,EAAE;QACV,IAAI,EAAE,6HAA6H;KACpI;IAED,QAAQ,EAAE;QACR,EAAE,EAAE,SAAS,EAAK,OAAO;QACzB,EAAE,EAAE,UAAU,EAAI,OAAO;QACzB,IAAI,EAAE,MAAM,EAAM,OAAO;QACzB,EAAE,EAAE,UAAU,EAAI,OAAO;QACzB,EAAE,EAAE,SAAS,EAAK,OAAO;QACzB,KAAK,EAAE,QAAQ,EAAG,OAAO;QACzB,KAAK,EAAE,UAAU,EAAE,OAAO;QAC1B,KAAK,EAAE,SAAS,EAAE,OAAO;QACzB,KAAK,EAAE,MAAM,EAAK,OAAO;QACzB,KAAK,EAAE,SAAS,EAAE,OAAO;KAC1B;IAED,UAAU,EAAE;QACV,MAAM,EAAE,KAAK;QACb,MAAM,EAAE,KAAK;QACb,QAAQ,EAAE,KAAK;QACf,IAAI,EAAE,KAAK;QACX,SAAS,EAAE,KAAK;KACjB;IAED,UAAU,EAAE;QACV,IAAI,EAAE,GAAG;QACT,KAAK,EAAE,MAAM;QACb,IAAI,EAAE,OAAO;QACb,MAAM,EAAE,KAAK;QACb,OAAO,EAAE,OAAO;QAChB,KAAK,EAAE,GAAG;KACX;IAED,aAAa,EAAE;QACb,OAAO,EAAE,SAAS;QAClB,KAAK,EAAE,UAAU;QACjB,MAAM,EAAE,GAAG;QACX,IAAI,EAAE,SAAS;QACf,KAAK,EAAE,QAAQ;KAChB;CACF,CAAC"}
package/package.json ADDED
@@ -0,0 +1,31 @@
1
+ {
2
+ "name": "@tampadevs/tokens",
3
+ "version": "0.1.0",
4
+ "description": "Design tokens for Tampa Devs - colors, typography, spacing",
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
+ "./css": "./dist/tokens.css",
14
+ "./scss": "./dist/_tokens.scss",
15
+ "./json": "./dist/tokens.json"
16
+ },
17
+ "files": [
18
+ "dist"
19
+ ],
20
+ "scripts": {
21
+ "build": "node build.js && tsc",
22
+ "clean": "rm -rf dist"
23
+ },
24
+ "devDependencies": {
25
+ "style-dictionary": "^4.2.0",
26
+ "typescript": "^5.7.0"
27
+ },
28
+ "publishConfig": {
29
+ "access": "public"
30
+ }
31
+ }