@tenerife.music/ui 1.0.13 → 1.0.15
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/README.md +112 -418
- package/dist/{colors-CVA7_16U.d.cts → colors-BZtZJBBm.d.cts} +1 -1
- package/dist/{colors-CVA7_16U.d.ts → colors-BZtZJBBm.d.ts} +1 -1
- package/dist/{index-BgXvioll.d.cts → index-CP_dmFn4.d.cts} +435 -175
- package/dist/{index-Bv4wWj9I.d.ts → index-CP_dmFn4.d.ts} +435 -175
- package/dist/index.cjs +1406 -654
- package/dist/index.d.cts +119 -45
- package/dist/index.d.ts +119 -45
- package/dist/index.mjs +1406 -655
- package/dist/preset.cjs +1 -0
- package/dist/preset.mjs +1 -0
- package/dist/theme/index.d.cts +2 -2
- package/dist/theme/index.d.ts +2 -2
- package/dist/tokens/index.cjs +194 -221
- package/dist/tokens/index.d.cts +89 -2
- package/dist/tokens/index.d.ts +89 -2
- package/dist/tokens/index.mjs +194 -222
- package/package.json +6 -1
package/dist/preset.cjs
CHANGED
package/dist/preset.mjs
CHANGED
package/dist/theme/index.d.cts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { M as Mode,
|
|
2
|
-
export {
|
|
1
|
+
import { M as Mode, a as ColorScale, B as BaseColorTokens, c as SurfaceColors, S as SemanticColors, T as TextColors } from '../colors-BZtZJBBm.cjs';
|
|
2
|
+
export { C as ChartColors, b as ColorTokens, h as cssVariableColorTokens, t as tailwindThemeColors } from '../colors-BZtZJBBm.cjs';
|
|
3
3
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
4
4
|
import React__default from 'react';
|
|
5
5
|
|
package/dist/theme/index.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { M as Mode,
|
|
2
|
-
export {
|
|
1
|
+
import { M as Mode, a as ColorScale, B as BaseColorTokens, c as SurfaceColors, S as SemanticColors, T as TextColors } from '../colors-BZtZJBBm.js';
|
|
2
|
+
export { C as ChartColors, b as ColorTokens, h as cssVariableColorTokens, t as tailwindThemeColors } from '../colors-BZtZJBBm.js';
|
|
3
3
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
4
4
|
import React__default from 'react';
|
|
5
5
|
|
package/dist/tokens/index.cjs
CHANGED
|
@@ -684,6 +684,68 @@ var CARD_TOKENS = {
|
|
|
684
684
|
}
|
|
685
685
|
};
|
|
686
686
|
|
|
687
|
+
// src/tokens/components/artist.ts
|
|
688
|
+
var ARTIST_TOKENS = {
|
|
689
|
+
/**
|
|
690
|
+
* Image container tokens
|
|
691
|
+
* Layout classes for image container wrapper
|
|
692
|
+
*/
|
|
693
|
+
image: {
|
|
694
|
+
/**
|
|
695
|
+
* Container layout tokens
|
|
696
|
+
* Positioning and sizing for image container
|
|
697
|
+
*/
|
|
698
|
+
container: {
|
|
699
|
+
/**
|
|
700
|
+
* Base container layout
|
|
701
|
+
* Relative positioning, full width, overflow hidden
|
|
702
|
+
* Uses Tailwind layout utilities (allowed per architecture)
|
|
703
|
+
*/
|
|
704
|
+
layout: "relative w-full overflow-hidden"
|
|
705
|
+
},
|
|
706
|
+
/**
|
|
707
|
+
* Image sizing tokens
|
|
708
|
+
* Full width and height for images
|
|
709
|
+
*/
|
|
710
|
+
sizing: {
|
|
711
|
+
/**
|
|
712
|
+
* Full size image
|
|
713
|
+
* Uses Tailwind sizing utilities (allowed per architecture)
|
|
714
|
+
*/
|
|
715
|
+
full: "h-full w-full"
|
|
716
|
+
},
|
|
717
|
+
/**
|
|
718
|
+
* Placeholder container tokens
|
|
719
|
+
* Layout for placeholder icon container when no image is provided
|
|
720
|
+
*/
|
|
721
|
+
placeholder: {
|
|
722
|
+
/**
|
|
723
|
+
* Placeholder container layout
|
|
724
|
+
* Flex centering for placeholder icon
|
|
725
|
+
* Uses Tailwind layout utilities (allowed per architecture)
|
|
726
|
+
*/
|
|
727
|
+
container: "flex h-full w-full items-center justify-center"
|
|
728
|
+
}
|
|
729
|
+
},
|
|
730
|
+
/**
|
|
731
|
+
* Footer border tokens
|
|
732
|
+
* Border styling for card footer separator
|
|
733
|
+
*/
|
|
734
|
+
footer: {
|
|
735
|
+
/**
|
|
736
|
+
* Footer border tokens
|
|
737
|
+
* Top border separator for footer section
|
|
738
|
+
*/
|
|
739
|
+
border: {
|
|
740
|
+
/**
|
|
741
|
+
* Footer border top
|
|
742
|
+
* Uses semantic border color token
|
|
743
|
+
*/
|
|
744
|
+
top: "border-t border-border"
|
|
745
|
+
}
|
|
746
|
+
}
|
|
747
|
+
};
|
|
748
|
+
|
|
687
749
|
// src/tokens/spacing.ts
|
|
688
750
|
var spacing = {
|
|
689
751
|
// Zero spacing
|
|
@@ -946,101 +1008,6 @@ var tailwindSpacingConfig = {
|
|
|
946
1008
|
|
|
947
1009
|
// src/tokens/components/data.ts
|
|
948
1010
|
var DATA_TOKENS = {
|
|
949
|
-
/**
|
|
950
|
-
* Table Component Tokens
|
|
951
|
-
*/
|
|
952
|
-
table: {
|
|
953
|
-
/**
|
|
954
|
-
* Table row heights by size
|
|
955
|
-
* Maps to Tailwind height utilities
|
|
956
|
-
*/
|
|
957
|
-
rowHeight: {
|
|
958
|
-
sm: "h-8",
|
|
959
|
-
// 32px (2rem) - compact rows
|
|
960
|
-
md: "h-10",
|
|
961
|
-
// 40px (2.5rem) - default rows
|
|
962
|
-
lg: "h-12"
|
|
963
|
-
// 48px (3rem) - spacious rows
|
|
964
|
-
},
|
|
965
|
-
/**
|
|
966
|
-
* Table cell and header padding by size
|
|
967
|
-
* Maps to semantic spacing tokens
|
|
968
|
-
*/
|
|
969
|
-
padding: {
|
|
970
|
-
cell: {
|
|
971
|
-
sm: "p-xs",
|
|
972
|
-
// 4px (0.25rem) - maps to semanticSpacing.xs
|
|
973
|
-
md: "p-sm",
|
|
974
|
-
// 8px (0.5rem) - maps to semanticSpacing.sm
|
|
975
|
-
lg: "p-md"
|
|
976
|
-
// 16px (1rem) - maps to semanticSpacing.md
|
|
977
|
-
},
|
|
978
|
-
header: {
|
|
979
|
-
sm: "px-xs py-sm",
|
|
980
|
-
// 4px horizontal, 8px vertical
|
|
981
|
-
md: "px-sm py-md",
|
|
982
|
-
// 8px horizontal, 16px vertical
|
|
983
|
-
lg: "px-md py-lg"
|
|
984
|
-
// 16px horizontal, 24px vertical
|
|
985
|
-
}
|
|
986
|
-
},
|
|
987
|
-
/**
|
|
988
|
-
* Gap between table cells (horizontal spacing)
|
|
989
|
-
*/
|
|
990
|
-
gap: {
|
|
991
|
-
sm: "gap-xs",
|
|
992
|
-
// 4px (0.25rem) - maps to semanticSpacing.xs
|
|
993
|
-
md: "gap-sm"
|
|
994
|
-
// 8px (0.5rem) - maps to semanticSpacing.sm
|
|
995
|
-
},
|
|
996
|
-
/**
|
|
997
|
-
* Border radius for table
|
|
998
|
-
*/
|
|
999
|
-
radius: {
|
|
1000
|
-
default: "rounded-md"
|
|
1001
|
-
// 6px (0.375rem) - maps to borderRadius.md
|
|
1002
|
-
},
|
|
1003
|
-
/**
|
|
1004
|
-
* Shadow tokens for table
|
|
1005
|
-
* Maps to foundation elevation shadow tokens
|
|
1006
|
-
*/
|
|
1007
|
-
shadow: {
|
|
1008
|
-
none: "shadow-none",
|
|
1009
|
-
// No shadow
|
|
1010
|
-
subtle: "shadow-sm"
|
|
1011
|
-
// Maps to elevationShadows.sm
|
|
1012
|
-
},
|
|
1013
|
-
/**
|
|
1014
|
-
* Typography tokens for table headers and cells
|
|
1015
|
-
* Maps to foundation typography fontSize tokens
|
|
1016
|
-
*/
|
|
1017
|
-
typography: {
|
|
1018
|
-
header: {
|
|
1019
|
-
fontSize: "text-sm",
|
|
1020
|
-
// Maps to fontSize.sm[0]
|
|
1021
|
-
fontWeight: "font-semibold"
|
|
1022
|
-
// Maps to fontWeight.semibold
|
|
1023
|
-
},
|
|
1024
|
-
cell: {
|
|
1025
|
-
fontSize: "text-sm",
|
|
1026
|
-
// Maps to fontSize.sm[0]
|
|
1027
|
-
fontWeight: "font-normal"
|
|
1028
|
-
// Maps to fontWeight.normal
|
|
1029
|
-
}
|
|
1030
|
-
},
|
|
1031
|
-
/**
|
|
1032
|
-
* Color tokens for table states
|
|
1033
|
-
* Uses semantic color tokens
|
|
1034
|
-
*/
|
|
1035
|
-
colors: {
|
|
1036
|
-
border: "border-border",
|
|
1037
|
-
// Border color
|
|
1038
|
-
rowHover: "hover:bg-muted/50",
|
|
1039
|
-
// Row hover background
|
|
1040
|
-
rowSelected: "bg-muted"
|
|
1041
|
-
// Selected row background
|
|
1042
|
-
}
|
|
1043
|
-
},
|
|
1044
1011
|
/**
|
|
1045
1012
|
* Skeleton Component Tokens
|
|
1046
1013
|
*/
|
|
@@ -1106,97 +1073,6 @@ var DATA_TOKENS = {
|
|
|
1106
1073
|
inline: "inline-block"
|
|
1107
1074
|
// Inline block display
|
|
1108
1075
|
}
|
|
1109
|
-
},
|
|
1110
|
-
/**
|
|
1111
|
-
* EmptyState Component Tokens
|
|
1112
|
-
*/
|
|
1113
|
-
emptyState: {
|
|
1114
|
-
/**
|
|
1115
|
-
* Spacing tokens for EmptyState
|
|
1116
|
-
* Maps to semantic spacing tokens
|
|
1117
|
-
*/
|
|
1118
|
-
spacing: {
|
|
1119
|
-
gap: "gap-md",
|
|
1120
|
-
// 16px (1rem) - gap between elements - maps to semanticSpacing.md
|
|
1121
|
-
padding: "p-lg"
|
|
1122
|
-
// 24px (1.5rem) - container padding - maps to semanticSpacing.lg
|
|
1123
|
-
},
|
|
1124
|
-
/**
|
|
1125
|
-
* Border radius for EmptyState container
|
|
1126
|
-
*/
|
|
1127
|
-
radius: {
|
|
1128
|
-
default: "rounded-xl"
|
|
1129
|
-
// 12px (0.75rem) - maps to borderRadius.xl
|
|
1130
|
-
},
|
|
1131
|
-
/**
|
|
1132
|
-
* Icon sizes by variant
|
|
1133
|
-
* Maps to Tailwind size utilities
|
|
1134
|
-
*/
|
|
1135
|
-
iconSize: {
|
|
1136
|
-
sm: "size-8",
|
|
1137
|
-
// 32px (2rem)
|
|
1138
|
-
md: "size-12",
|
|
1139
|
-
// 48px (3rem)
|
|
1140
|
-
lg: "size-16"
|
|
1141
|
-
// 64px (4rem)
|
|
1142
|
-
},
|
|
1143
|
-
/**
|
|
1144
|
-
* Typography tokens for EmptyState
|
|
1145
|
-
* Maps to foundation typography tokens
|
|
1146
|
-
*/
|
|
1147
|
-
typography: {
|
|
1148
|
-
title: {
|
|
1149
|
-
fontSize: "text-lg",
|
|
1150
|
-
// Maps to fontSize.lg[0]
|
|
1151
|
-
fontWeight: "font-semibold"
|
|
1152
|
-
// Maps to fontWeight.semibold
|
|
1153
|
-
},
|
|
1154
|
-
description: {
|
|
1155
|
-
fontSize: "text-sm",
|
|
1156
|
-
// Maps to fontSize.sm[0]
|
|
1157
|
-
fontWeight: "font-normal"
|
|
1158
|
-
// Maps to fontWeight.normal
|
|
1159
|
-
}
|
|
1160
|
-
}
|
|
1161
|
-
},
|
|
1162
|
-
/**
|
|
1163
|
-
* DataList Component Tokens
|
|
1164
|
-
*/
|
|
1165
|
-
dataList: {
|
|
1166
|
-
/**
|
|
1167
|
-
* Spacing tokens for DataList
|
|
1168
|
-
* Maps to semantic spacing tokens
|
|
1169
|
-
*/
|
|
1170
|
-
spacing: {
|
|
1171
|
-
gap: "gap-md",
|
|
1172
|
-
// 16px (1rem) - gap between items - maps to semanticSpacing.md
|
|
1173
|
-
padding: "p-md"
|
|
1174
|
-
// 16px (1rem) - container padding - maps to semanticSpacing.md
|
|
1175
|
-
},
|
|
1176
|
-
/**
|
|
1177
|
-
* Label width tokens (for desktop horizontal layout)
|
|
1178
|
-
* Maps to Tailwind width utilities
|
|
1179
|
-
*/
|
|
1180
|
-
labelWidth: {
|
|
1181
|
-
sm: "w-24",
|
|
1182
|
-
// 96px (6rem) - small label width
|
|
1183
|
-
md: "w-32",
|
|
1184
|
-
// 128px (8rem) - default label width
|
|
1185
|
-
lg: "w-40"
|
|
1186
|
-
// 160px (10rem) - large label width
|
|
1187
|
-
},
|
|
1188
|
-
/**
|
|
1189
|
-
* Row padding tokens
|
|
1190
|
-
* Maps to semantic spacing tokens
|
|
1191
|
-
*/
|
|
1192
|
-
rowPadding: {
|
|
1193
|
-
sm: "py-xs",
|
|
1194
|
-
// 4px (0.25rem) - maps to semanticSpacing.xs
|
|
1195
|
-
md: "py-sm",
|
|
1196
|
-
// 8px (0.5rem) - maps to semanticSpacing.sm
|
|
1197
|
-
lg: "py-md"
|
|
1198
|
-
// 16px (1rem) - maps to semanticSpacing.md
|
|
1199
|
-
}
|
|
1200
1076
|
}
|
|
1201
1077
|
};
|
|
1202
1078
|
|
|
@@ -1541,7 +1417,7 @@ var DOMAIN_TOKENS = {
|
|
|
1541
1417
|
},
|
|
1542
1418
|
/**
|
|
1543
1419
|
* Image tokens for card media
|
|
1544
|
-
* Defines aspect ratio, radius, and
|
|
1420
|
+
* Defines aspect ratio, radius, overlay styles, and placeholder gradients
|
|
1545
1421
|
*/
|
|
1546
1422
|
image: {
|
|
1547
1423
|
/**
|
|
@@ -1564,6 +1440,40 @@ var DOMAIN_TOKENS = {
|
|
|
1564
1440
|
overlay: {
|
|
1565
1441
|
gradient: "bg-gradient-to-t from-black/60 via-transparent to-transparent"
|
|
1566
1442
|
// Gradient overlay for image hover states
|
|
1443
|
+
},
|
|
1444
|
+
/**
|
|
1445
|
+
* Placeholder gradient tokens for image placeholders
|
|
1446
|
+
* Used when no image URL is provided
|
|
1447
|
+
*/
|
|
1448
|
+
placeholder: {
|
|
1449
|
+
gradient: "bg-gradient-to-br from-muted to-muted/50"
|
|
1450
|
+
// Placeholder gradient background
|
|
1451
|
+
}
|
|
1452
|
+
},
|
|
1453
|
+
/**
|
|
1454
|
+
* Text tokens for card text elements
|
|
1455
|
+
* Defines hover states and line clamping for titles and descriptions
|
|
1456
|
+
*/
|
|
1457
|
+
text: {
|
|
1458
|
+
/**
|
|
1459
|
+
* Hover state tokens for text elements
|
|
1460
|
+
* Used for interactive text elements like titles
|
|
1461
|
+
*/
|
|
1462
|
+
hover: {
|
|
1463
|
+
primary: "group-hover:text-primary"
|
|
1464
|
+
// Hover state for primary text color
|
|
1465
|
+
},
|
|
1466
|
+
/**
|
|
1467
|
+
* Line clamp tokens for text truncation
|
|
1468
|
+
* Used for limiting text to specific number of lines
|
|
1469
|
+
*/
|
|
1470
|
+
lineClamp: {
|
|
1471
|
+
one: "line-clamp-1",
|
|
1472
|
+
// Single line clamp
|
|
1473
|
+
two: "line-clamp-2",
|
|
1474
|
+
// Two line clamp
|
|
1475
|
+
three: "line-clamp-3"
|
|
1476
|
+
// Three line clamp
|
|
1567
1477
|
}
|
|
1568
1478
|
},
|
|
1569
1479
|
/**
|
|
@@ -1786,6 +1696,94 @@ var DOMAIN_TOKENS = {
|
|
|
1786
1696
|
height: "h-6"
|
|
1787
1697
|
// References spacing[6] (1.5rem / 24px) via Tailwind
|
|
1788
1698
|
}
|
|
1699
|
+
},
|
|
1700
|
+
/**
|
|
1701
|
+
* CTA (Call-to-Action) button tokens for domain card components
|
|
1702
|
+
* Provides PromoCard-specific CTA button styling tokens
|
|
1703
|
+
* These tokens are semantically owned by domain card components, not by the Button component
|
|
1704
|
+
* References foundation tokens (spacing, typography, radius, shadows, motion) for consistency
|
|
1705
|
+
*/
|
|
1706
|
+
cta: {
|
|
1707
|
+
/**
|
|
1708
|
+
* CTA button styling tokens
|
|
1709
|
+
* Used by PromoCard and other domain card components for CTA button elements
|
|
1710
|
+
*/
|
|
1711
|
+
button: {
|
|
1712
|
+
/**
|
|
1713
|
+
* Button heights by size
|
|
1714
|
+
* Maps to Tailwind height utilities: h-8, h-9
|
|
1715
|
+
*/
|
|
1716
|
+
height: {
|
|
1717
|
+
sm: "h-8",
|
|
1718
|
+
// 32px (2rem) - compact size
|
|
1719
|
+
md: "h-9"
|
|
1720
|
+
// 36px (2.25rem) - default size
|
|
1721
|
+
},
|
|
1722
|
+
/**
|
|
1723
|
+
* Button padding by size
|
|
1724
|
+
* Horizontal and vertical padding values
|
|
1725
|
+
* References semanticSpacing tokens
|
|
1726
|
+
*/
|
|
1727
|
+
padding: {
|
|
1728
|
+
horizontal: {
|
|
1729
|
+
sm: "px-sm",
|
|
1730
|
+
// 8px (0.5rem) - maps to semanticSpacing.sm
|
|
1731
|
+
md: "px-md"
|
|
1732
|
+
// 16px (1rem) - maps to semanticSpacing.md
|
|
1733
|
+
},
|
|
1734
|
+
vertical: {
|
|
1735
|
+
sm: "py-xs"
|
|
1736
|
+
// 4px (0.25rem) - maps to semanticSpacing.xs
|
|
1737
|
+
}
|
|
1738
|
+
},
|
|
1739
|
+
/**
|
|
1740
|
+
* Border radius for CTA buttons
|
|
1741
|
+
* References borderRadius.md (6px / 0.375rem)
|
|
1742
|
+
* Using Tailwind class "rounded-md" which maps to borderRadius.md
|
|
1743
|
+
*/
|
|
1744
|
+
radius: "rounded-md",
|
|
1745
|
+
// References borderRadius.md via Tailwind
|
|
1746
|
+
/**
|
|
1747
|
+
* Font sizes by button size
|
|
1748
|
+
* Maps to foundation typography fontSize tokens
|
|
1749
|
+
*/
|
|
1750
|
+
fontSize: {
|
|
1751
|
+
sm: "text-xs",
|
|
1752
|
+
// Maps to fontSize.xs[0]
|
|
1753
|
+
md: "text-sm"
|
|
1754
|
+
// Maps to fontSize.sm[0]
|
|
1755
|
+
},
|
|
1756
|
+
/**
|
|
1757
|
+
* Shadow tokens for CTA buttons
|
|
1758
|
+
* Maps to foundation elevation shadow tokens
|
|
1759
|
+
*/
|
|
1760
|
+
shadow: {
|
|
1761
|
+
primary: "shadow"
|
|
1762
|
+
// Maps to elevationShadows.xs (primary variant uses shadow)
|
|
1763
|
+
},
|
|
1764
|
+
/**
|
|
1765
|
+
* Color tokens for CTA button variants
|
|
1766
|
+
* Uses semantic color tokens that map to CSS variables
|
|
1767
|
+
*/
|
|
1768
|
+
variant: {
|
|
1769
|
+
primary: {
|
|
1770
|
+
background: "bg-primary",
|
|
1771
|
+
// Primary background using CSS var
|
|
1772
|
+
text: "text-primary-foreground",
|
|
1773
|
+
// Primary text using CSS var
|
|
1774
|
+
hover: "hover:bg-primary/90"
|
|
1775
|
+
// Primary hover using CSS var
|
|
1776
|
+
}
|
|
1777
|
+
},
|
|
1778
|
+
/**
|
|
1779
|
+
* Transition tokens for CTA buttons
|
|
1780
|
+
* References MOTION_TOKENS for transitions
|
|
1781
|
+
*/
|
|
1782
|
+
transition: {
|
|
1783
|
+
colors: "transition-colors"
|
|
1784
|
+
// Color transition using motion tokens
|
|
1785
|
+
}
|
|
1786
|
+
}
|
|
1789
1787
|
}
|
|
1790
1788
|
};
|
|
1791
1789
|
|
|
@@ -1889,40 +1887,6 @@ var INPUT_TOKENS = {
|
|
|
1889
1887
|
text: "text-[hsl(var(--foreground))]"
|
|
1890
1888
|
// File input text color using CSS var
|
|
1891
1889
|
},
|
|
1892
|
-
/**
|
|
1893
|
-
* Select listbox tokens
|
|
1894
|
-
* Styling for select dropdown container
|
|
1895
|
-
*/
|
|
1896
|
-
selectListbox: {
|
|
1897
|
-
border: "border border-[hsl(var(--border))]",
|
|
1898
|
-
// Border color using CSS var
|
|
1899
|
-
background: "bg-[hsl(var(--popover))]",
|
|
1900
|
-
// Background using CSS var
|
|
1901
|
-
text: "text-[hsl(var(--popover-foreground))]",
|
|
1902
|
-
// Text color using CSS var
|
|
1903
|
-
radius: "rounded-md",
|
|
1904
|
-
// Radius token (6px)
|
|
1905
|
-
shadow: "shadow-md"
|
|
1906
|
-
// Shadow token
|
|
1907
|
-
},
|
|
1908
|
-
/**
|
|
1909
|
-
* Select option tokens
|
|
1910
|
-
* Styling for select option items
|
|
1911
|
-
*/
|
|
1912
|
-
selectOption: {
|
|
1913
|
-
focus: {
|
|
1914
|
-
background: "focus:bg-[hsl(var(--accent))]",
|
|
1915
|
-
// Focus background using CSS var
|
|
1916
|
-
text: "focus:text-[hsl(var(--accent-foreground))]"
|
|
1917
|
-
// Focus text using CSS var
|
|
1918
|
-
},
|
|
1919
|
-
selected: {
|
|
1920
|
-
background: "bg-[hsl(var(--accent))]",
|
|
1921
|
-
// Selected background using CSS var
|
|
1922
|
-
text: "text-[hsl(var(--accent-foreground))]"
|
|
1923
|
-
// Selected text using CSS var
|
|
1924
|
-
}
|
|
1925
|
-
},
|
|
1926
1890
|
/**
|
|
1927
1891
|
* Variant-based tokens
|
|
1928
1892
|
* Border, background, and text colors for different variants
|
|
@@ -4203,6 +4167,14 @@ var DROPDOWN_TOKENS = {
|
|
|
4203
4167
|
// 256px
|
|
4204
4168
|
}
|
|
4205
4169
|
},
|
|
4170
|
+
/**
|
|
4171
|
+
* Width tokens
|
|
4172
|
+
* Common width utilities
|
|
4173
|
+
*/
|
|
4174
|
+
width: {
|
|
4175
|
+
full: "w-full"
|
|
4176
|
+
// Full width (100%)
|
|
4177
|
+
},
|
|
4206
4178
|
/**
|
|
4207
4179
|
* Item tokens by size
|
|
4208
4180
|
* Individual menu item
|
|
@@ -6117,6 +6089,7 @@ var tokenSystemSummary = {
|
|
|
6117
6089
|
var UI_COLORS = tailwindThemeColors;
|
|
6118
6090
|
|
|
6119
6091
|
exports.ALERT_TOKENS = ALERT_TOKENS;
|
|
6092
|
+
exports.ARTIST_TOKENS = ARTIST_TOKENS;
|
|
6120
6093
|
exports.BUTTON_TOKENS = BUTTON_TOKENS;
|
|
6121
6094
|
exports.CARD_TOKENS = CARD_TOKENS;
|
|
6122
6095
|
exports.CHECKBOX_TOKENS = CHECKBOX_TOKENS;
|
package/dist/tokens/index.d.cts
CHANGED
|
@@ -1,2 +1,89 @@
|
|
|
1
|
-
export { B as BaseColorTokens,
|
|
2
|
-
export { A as ALERT_TOKENS,
|
|
1
|
+
export { B as BaseColorTokens, C as ChartColors, a as ColorScale, b as ColorTokens, M as Mode, S as SemanticColors, c as SurfaceColors, T as TextColors, d as accentColors, e as baseColors, f as chartColors, g as colorCSSVariables, h as cssVariableColorTokens, p as primaryColors, s as secondaryColors, i as semanticColors, j as surfaceColors, t as tailwindThemeColors, k as textColors } from '../colors-BZtZJBBm.cjs';
|
|
2
|
+
export { A as ALERT_TOKENS, l as AlertVariant, cG as AlignOffsetToken, bo as Animation, cH as AnimationPresetToken, cI as AspectRatioToken, B as BUTTON_TOKENS, bR as BorderRadius, m as ButtonFontSize, n as ButtonHeight, o as ButtonPaddingHorizontal, p as ButtonPaddingVertical, q as ButtonShadow, C as CARD_TOKENS, a as CHECKBOX_TOKENS, cm as CanonicalFontSize, cn as CanonicalFontWeight, co as CanonicalLetterSpacing, cp as CanonicalLineHeight, cq as CanonicalTextColor, r as CardPadding, s as CardRadius, t as CardShadow, u as CardSize, v as CardSpacingVertical, w as CheckboxSize, x as CheckboxState, y as CheckboxVariant, cJ as ColorToken, bX as ColoredShadow, bS as ComponentRadius, c9 as ComponentSpacing, cK as ContainerMaxWidthToken, cL as ContainerPaddingToken, ca as ContainerSpacing, D as DATA_TOKENS, b as DOMAIN_TOKENS, c as DROPDOWN_TOKENS, z as DataListLabelWidth, E as DataListRowPadding, cM as DelayToken, F as DomainCardBadge, G as DomainCardImage, H as DomainCardLayout, J as DomainCardMetadata, K as DomainCardMotion, L as DomainCardPriceCapacity, Q as DomainCardSkeleton, U as DomainCardSkeletonContentWidth, V as DomainCardSurface, W as DropdownItemSize, X as DropdownMenuSize, Y as DropdownTriggerSize, Z as DropdownVariant, bp as Duration, bq as Easing, bY as ElevationShadow, _ as EmptyStateIconSize, cN as FlexBasisToken, bZ as FocusRing, cr as FontFamily, cs as FontSize, ct as FontWeight, b_ as GlowEffect, cb as GridSpacing, I as ICON_TOKENS, d as INPUT_TOKENS, $ as IconColor, a0 as IconSize, a1 as IconStroke, a2 as InputFontSize, a3 as InputHeight, a4 as InputPaddingHorizontal, a5 as InputPaddingVertical, a6 as InputRadius, a7 as InputSize, br as Keyframe, cO as LayoutSpaceToken, cu as LetterSpacing, cv as LineHeight, M as MENU_TOKENS, e as MOTION_TOKENS, a8 as MenuContentMinWidth, a9 as MenuContentPadding, aa as MenuContentRadius, ab as MenuContentShadow, ac as MenuIndicatorOffset, ad as MenuIndicatorSize, ae as MenuItemGap, af as MenuItemHeight, ag as MenuItemPadding, ah as MenuItemRadius, ai as MenuLabelPadding, aj as MenuSeparatorMargin, cP as ModalFooterAlignToken, cQ as ModalHeightToken, cR as ModalSizeToken, cS as ModalWidthToken, ak as MotionAnimation, al as MotionDuration, cT as MotionDurationToken, am as MotionEasing, cU as MotionEasingToken, cV as MotionToken, an as MotionTransition, ao as MotionTransitionPreset, cW as MotionTransitionToken, bD as MotionV2CombinedType, bE as MotionV2Duration, bF as MotionV2Easing, bG as MotionV2SlideDirection, bH as MotionV2Transition, N as NAVIGATION_TOKENS, f as NOTIFICATION_TOKENS, ap as NavigationItemPadding, aq as NavigationListGap, ar as NavigationRadius, as as NavigationShadow, at as NavigationSize, au as NavigationState, av as NotificationPanelWidth, aw as NotificationVariant, O as OVERLAY_TOKENS, ax as OverlayBackdropVariant, ay as OverlayModalSize, P as POPOVER_TOKENS, az as PopoverArrowOffset, aA as PopoverArrowSize, aB as PopoverContentPadding, aC as PopoverContentRadius, aD as PopoverContentShadow, aE as PopoverContentWidth, R as RADIO_TOKENS, aF as RadioSize, aG as RadioState, aH as RadioVariant, cX as RadiusToken, cY as ResponsiveAlignOffset, cZ as ResponsiveAnimationPreset, c_ as ResponsiveAspectRatio, c$ as ResponsiveColor, d0 as ResponsiveContainerMaxWidth, d1 as ResponsiveContainerPadding, d2 as ResponsiveDelay, d3 as ResponsiveFlexBasis, d4 as ResponsiveModalHeight, d5 as ResponsiveModalSize, d6 as ResponsiveModalWidth, d7 as ResponsiveMotion, d8 as ResponsiveRadius, d9 as ResponsiveSelectSize, da as ResponsiveSelectWidth, db as ResponsiveShadow, dc as ResponsiveSideOffset, dd as ResponsiveSpace, de as ResponsiveSurface, df as ResponsiveTextLineHeight, dg as ResponsiveTextSize, dh as ResponsiveTextWeight, S as SECTION_TOKENS, g as SELECT_TOKENS, h as SURFACE_TOKENS, i as SWITCH_TOKENS, aI as SectionGap, aJ as SectionPadding, cc as SectionSpacing, aK as SelectContentPadding, aL as SelectContentRadius, aM as SelectItemFontSize, aN as SelectItemPaddingHorizontal, aO as SelectItemPaddingVertical, aP as SelectItemRadius, aQ as SelectLabelFontSize, aR as SelectLabelPaddingHorizontal, aS as SelectLabelPaddingVertical, aT as SelectSeparatorMarginHorizontal, aU as SelectSeparatorMarginVertical, di as SelectSizeToken, dj as SelectStateToken, aV as SelectTriggerFontSize, aW as SelectTriggerHeight, aX as SelectTriggerPaddingHorizontal, aY as SelectTriggerPaddingVertical, aZ as SelectTriggerRadius, dk as SelectVariantToken, dl as SelectWidthToken, cd as SemanticSpacing, dm as ShadowToken, dn as SideOffsetToken, a_ as SkeletonAnimation, a$ as SkeletonBackground, b0 as SkeletonVariant, dp as SpaceToken, ce as Spacing, dq as SpacingToken, bs as Spring, cf as StackSpacing, b1 as SurfacePadding, b2 as SurfaceRadius, b3 as SurfaceShadow, dr as SurfaceToken, b4 as SurfaceVariant, b5 as SwitchSize, b6 as SwitchState, b7 as SwitchVariant, T as TEXT_TOKENS, j as TOAST_TOKENS, k as TOOLTIP_TOKENS, b8 as TableCellPadding, b9 as TableGap, ba as TableHeaderPadding, bb as TableRowHeight, bc as TableShadow, bd as TextFontSize, be as TextFontWeight, bf as TextLetterSpacing, ds as TextLetterSpacingToken, bg as TextLineHeight, dt as TextLineHeightToken, du as TextSizeToken, cw as TextStyle, dv as TextWeightToken, bh as ToastVariant, bi as TooltipContentRadius, bj as TooltipContentShadow, bt as Transition, cl as UI_COLORS, b$ as accentColoredShadows, bk as allCSSVariables, bl as allCSSVariablesCSS, bu as animations, bT as borderRadius, bU as componentRadius, c0 as componentShadowMapping, bv as durations, bw as easings, c1 as elevationShadows, c2 as focusRings, cx as fontFamily, cy as fontSize, cz as fontSizeWithMd, cA as fontWeight, bm as generateCSSVariablesCSS, c3 as glowEffects, bx as keyframes, cg as layoutSpacing, cB as letterSpacing, cC as lineHeight, by as motionCSSVariables, bI as motionV2CSSVariables, bJ as motionV2Combined, bK as motionV2Durations, bL as motionV2Easings, bM as motionV2Fade, bN as motionV2Scale, bO as motionV2Slide, bP as motionV2TailwindConfig, bQ as motionV2Transitions, c4 as primaryColoredShadows, bV as radiusCSSVariables, bz as reducedMotion, ch as semanticSpacing, c5 as shadowBase, c6 as shadowCSSVariables, c7 as shadowOpacity, ci as spacing, cj as spacingCSSVariables, bA as springs, bB as tailwindMotionConfig, bW as tailwindRadiusConfig, c8 as tailwindShadowConfig, ck as tailwindSpacingConfig, cD as tailwindTypographyConfig, cE as textStyles, bn as tokenSystemSummary, bC as transitions, cF as typographyCSSVariables } from '../index-CP_dmFn4.cjs';
|
|
3
|
+
|
|
4
|
+
/**
|
|
5
|
+
* Artist Card Component Tokens
|
|
6
|
+
*
|
|
7
|
+
* Domain-specific design tokens for ArtistCard component.
|
|
8
|
+
* Provides artist-specific styling tokens that complement DOMAIN_TOKENS.
|
|
9
|
+
* All values reference foundation tokens or other component tokens.
|
|
10
|
+
*
|
|
11
|
+
* Foundation tokens referenced:
|
|
12
|
+
* - DOMAIN_TOKENS: image, spacing, metadata, text from src/tokens/components/domain.ts
|
|
13
|
+
* - Layout utilities: flex, positioning, sizing from Tailwind (allowed)
|
|
14
|
+
*/
|
|
15
|
+
/**
|
|
16
|
+
* Artist Card Component Tokens
|
|
17
|
+
*
|
|
18
|
+
* Defines artist-specific tokens for ArtistCard component.
|
|
19
|
+
* Values reference DOMAIN_TOKENS and foundation tokens where possible.
|
|
20
|
+
*/
|
|
21
|
+
declare const ARTIST_TOKENS: {
|
|
22
|
+
/**
|
|
23
|
+
* Image container tokens
|
|
24
|
+
* Layout classes for image container wrapper
|
|
25
|
+
*/
|
|
26
|
+
readonly image: {
|
|
27
|
+
/**
|
|
28
|
+
* Container layout tokens
|
|
29
|
+
* Positioning and sizing for image container
|
|
30
|
+
*/
|
|
31
|
+
readonly container: {
|
|
32
|
+
/**
|
|
33
|
+
* Base container layout
|
|
34
|
+
* Relative positioning, full width, overflow hidden
|
|
35
|
+
* Uses Tailwind layout utilities (allowed per architecture)
|
|
36
|
+
*/
|
|
37
|
+
readonly layout: "relative w-full overflow-hidden";
|
|
38
|
+
};
|
|
39
|
+
/**
|
|
40
|
+
* Image sizing tokens
|
|
41
|
+
* Full width and height for images
|
|
42
|
+
*/
|
|
43
|
+
readonly sizing: {
|
|
44
|
+
/**
|
|
45
|
+
* Full size image
|
|
46
|
+
* Uses Tailwind sizing utilities (allowed per architecture)
|
|
47
|
+
*/
|
|
48
|
+
readonly full: "h-full w-full";
|
|
49
|
+
};
|
|
50
|
+
/**
|
|
51
|
+
* Placeholder container tokens
|
|
52
|
+
* Layout for placeholder icon container when no image is provided
|
|
53
|
+
*/
|
|
54
|
+
readonly placeholder: {
|
|
55
|
+
/**
|
|
56
|
+
* Placeholder container layout
|
|
57
|
+
* Flex centering for placeholder icon
|
|
58
|
+
* Uses Tailwind layout utilities (allowed per architecture)
|
|
59
|
+
*/
|
|
60
|
+
readonly container: "flex h-full w-full items-center justify-center";
|
|
61
|
+
};
|
|
62
|
+
};
|
|
63
|
+
/**
|
|
64
|
+
* Footer border tokens
|
|
65
|
+
* Border styling for card footer separator
|
|
66
|
+
*/
|
|
67
|
+
readonly footer: {
|
|
68
|
+
/**
|
|
69
|
+
* Footer border tokens
|
|
70
|
+
* Top border separator for footer section
|
|
71
|
+
*/
|
|
72
|
+
readonly border: {
|
|
73
|
+
/**
|
|
74
|
+
* Footer border top
|
|
75
|
+
* Uses semantic border color token
|
|
76
|
+
*/
|
|
77
|
+
readonly top: "border-t border-border";
|
|
78
|
+
};
|
|
79
|
+
};
|
|
80
|
+
};
|
|
81
|
+
/**
|
|
82
|
+
* Type exports for Artist Card tokens
|
|
83
|
+
*/
|
|
84
|
+
type ArtistCardImageContainer = typeof ARTIST_TOKENS.image.container;
|
|
85
|
+
type ArtistCardImageSizing = typeof ARTIST_TOKENS.image.sizing;
|
|
86
|
+
type ArtistCardImagePlaceholder = typeof ARTIST_TOKENS.image.placeholder;
|
|
87
|
+
type ArtistCardFooterBorder = typeof ARTIST_TOKENS.footer.border;
|
|
88
|
+
|
|
89
|
+
export { ARTIST_TOKENS, type ArtistCardFooterBorder, type ArtistCardImageContainer, type ArtistCardImagePlaceholder, type ArtistCardImageSizing };
|