@ttt-productions/theme-core 0.2.9 → 0.2.11

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.
@@ -976,284 +976,3 @@
976
976
  width: 2rem;
977
977
  color: hsl(var(--foreground));
978
978
  }
979
-
980
- /* =========================================================
981
- TOAST / NOTIFICATIONS
982
- ========================================================= */
983
-
984
- /* Toast viewport (container for all toasts) */
985
- .toast-viewport {
986
- position: fixed;
987
- top: 0;
988
- z-index: 100;
989
- display: flex;
990
- max-height: 100vh;
991
- width: 100%;
992
- flex-direction: column;
993
- padding: 1rem;
994
- gap: 0.5rem;
995
- pointer-events: none;
996
- }
997
-
998
- @media (min-width: 640px) {
999
- .toast-viewport {
1000
- bottom: 0;
1001
- right: 0;
1002
- top: auto;
1003
- flex-direction: column-reverse;
1004
- padding: 1.5rem;
1005
- max-width: 26rem;
1006
- }
1007
- }
1008
-
1009
- /* Toast root (individual toast) */
1010
- .toast-root {
1011
- pointer-events: auto;
1012
- position: relative;
1013
- display: flex;
1014
- width: 100%;
1015
- align-items: center;
1016
- justify-content: space-between;
1017
- gap: 1rem;
1018
- overflow: hidden;
1019
- border-radius: 0.75rem;
1020
- border-width: 2px;
1021
- padding: 1rem 1.25rem;
1022
- padding-right: 2.5rem;
1023
- font-weight: 700;
1024
- box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
1025
- transition-property: all;
1026
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1027
- transition-duration: 150ms;
1028
-
1029
- /* Default variant */
1030
- background-color: hsl(var(--background));
1031
- border-color: hsl(var(--border));
1032
- color: hsl(var(--foreground));
1033
- }
1034
-
1035
- /* Toast variants */
1036
- .toast-root[data-variant="success"] {
1037
- background-color: hsl(142 76% 96%);
1038
- border-color: hsl(142 76% 36%);
1039
- color: hsl(142 76% 20%);
1040
- }
1041
-
1042
- @media (prefers-color-scheme: dark) {
1043
- .toast-root[data-variant="success"] {
1044
- background-color: hsl(142 76% 10%);
1045
- border-color: hsl(142 76% 36%);
1046
- color: hsl(142 76% 90%);
1047
- }
1048
- }
1049
-
1050
- .toast-root[data-variant="destructive"] {
1051
- background-color: hsl(0 84% 96%);
1052
- border-color: hsl(0 84% 60%);
1053
- color: hsl(0 84% 20%);
1054
- }
1055
-
1056
- @media (prefers-color-scheme: dark) {
1057
- .toast-root[data-variant="destructive"] {
1058
- background-color: hsl(0 84% 10%);
1059
- border-color: hsl(0 84% 60%);
1060
- color: hsl(0 84% 90%);
1061
- }
1062
- }
1063
-
1064
- .toast-root[data-variant="warning"] {
1065
- background-color: hsl(38 92% 96%);
1066
- border-color: hsl(38 92% 50%);
1067
- color: hsl(38 92% 20%);
1068
- }
1069
-
1070
- @media (prefers-color-scheme: dark) {
1071
- .toast-root[data-variant="warning"] {
1072
- background-color: hsl(38 92% 10%);
1073
- border-color: hsl(38 92% 50%);
1074
- color: hsl(38 92% 90%);
1075
- }
1076
- }
1077
-
1078
- /* High contrast mode */
1079
- @media (prefers-contrast: more) {
1080
- .toast-root {
1081
- border-width: 3px;
1082
- }
1083
-
1084
- .toast-root[data-variant="success"] {
1085
- background-color: hsl(142 76% 96%);
1086
- border-color: hsl(142 76% 20%);
1087
- color: hsl(142 76% 10%);
1088
- }
1089
-
1090
- .toast-root[data-variant="destructive"] {
1091
- background-color: hsl(0 84% 96%);
1092
- border-color: hsl(0 84% 40%);
1093
- color: hsl(0 84% 10%);
1094
- }
1095
-
1096
- .toast-root[data-variant="warning"] {
1097
- background-color: hsl(38 92% 96%);
1098
- border-color: hsl(38 92% 30%);
1099
- color: hsl(38 92% 10%);
1100
- }
1101
- }
1102
-
1103
- @media (prefers-color-scheme: dark) and (prefers-contrast: more) {
1104
- .toast-root[data-variant="success"] {
1105
- background-color: hsl(142 76% 10%);
1106
- border-color: hsl(142 76% 60%);
1107
- color: hsl(142 76% 98%);
1108
- }
1109
-
1110
- .toast-root[data-variant="destructive"] {
1111
- background-color: hsl(0 84% 10%);
1112
- border-color: hsl(0 84% 70%);
1113
- color: hsl(0 84% 98%);
1114
- }
1115
-
1116
- .toast-root[data-variant="warning"] {
1117
- background-color: hsl(38 92% 10%);
1118
- border-color: hsl(38 92% 60%);
1119
- color: hsl(38 92% 98%);
1120
- }
1121
- }
1122
-
1123
- /* Toast animations */
1124
- .toast-root[data-state="open"] {
1125
- animation: toast-slide-in 150ms cubic-bezier(0.16, 1, 0.3, 1);
1126
- }
1127
-
1128
- .toast-root[data-state="closed"] {
1129
- animation: toast-hide 100ms ease-in;
1130
- }
1131
-
1132
- .toast-root[data-swipe="move"] {
1133
- transform: translateX(var(--radix-toast-swipe-move-x));
1134
- }
1135
-
1136
- .toast-root[data-swipe="cancel"] {
1137
- transform: translateX(0);
1138
- transition: transform 200ms ease-out;
1139
- }
1140
-
1141
- .toast-root[data-swipe="end"] {
1142
- animation: toast-swipe-out 100ms ease-out;
1143
- }
1144
-
1145
- @keyframes toast-slide-in {
1146
- from {
1147
- transform: translateX(calc(100% + 1rem));
1148
- }
1149
- to {
1150
- transform: translateX(0);
1151
- }
1152
- }
1153
-
1154
- @keyframes toast-hide {
1155
- from {
1156
- opacity: 1;
1157
- }
1158
- to {
1159
- opacity: 0;
1160
- }
1161
- }
1162
-
1163
- @keyframes toast-swipe-out {
1164
- from {
1165
- transform: translateX(var(--radix-toast-swipe-end-x));
1166
- }
1167
- to {
1168
- transform: translateX(calc(100% + 1rem));
1169
- }
1170
- }
1171
-
1172
- /* Progress bar (countdown) */
1173
- .toast-progress {
1174
- position: absolute;
1175
- bottom: 0;
1176
- left: 0;
1177
- height: 0.25rem;
1178
- width: 100%;
1179
- transform-origin: left;
1180
- animation: toast-progress-shrink var(--toast-duration, 5000ms) linear forwards;
1181
- }
1182
-
1183
- .toast-root[data-variant="success"] .toast-progress {
1184
- background-color: hsl(142 76% 36%);
1185
- }
1186
-
1187
- .toast-root[data-variant="destructive"] .toast-progress {
1188
- background-color: hsl(0 84% 60%);
1189
- }
1190
-
1191
- .toast-root[data-variant="warning"] .toast-progress {
1192
- background-color: hsl(38 92% 50%);
1193
- }
1194
-
1195
- .toast-root:not([data-variant]) .toast-progress {
1196
- background-color: hsl(var(--primary));
1197
- }
1198
-
1199
- @keyframes toast-progress-shrink {
1200
- from {
1201
- transform: scaleX(1);
1202
- }
1203
- to {
1204
- transform: scaleX(0);
1205
- }
1206
- }
1207
-
1208
- /* Pause progress on hover */
1209
- .toast-root:hover .toast-progress {
1210
- animation-play-state: paused;
1211
- }
1212
-
1213
- /* Dismiss button */
1214
- .toast-dismiss {
1215
- position: absolute;
1216
- right: 0.5rem;
1217
- top: 0.5rem;
1218
- border-radius: 0.375rem;
1219
- padding: 0.25rem;
1220
- opacity: 0.7;
1221
- transition-property: opacity;
1222
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1223
- transition-duration: 150ms;
1224
- color: inherit;
1225
- background-color: transparent;
1226
- border: none;
1227
- cursor: pointer;
1228
- }
1229
-
1230
- .toast-dismiss:hover {
1231
- opacity: 1;
1232
- }
1233
-
1234
- .toast-dismiss:focus {
1235
- outline: 2px solid hsl(var(--ring));
1236
- outline-offset: 2px;
1237
- }
1238
-
1239
- /* Mobile adjustments */
1240
- @media (max-width: 639px) {
1241
- .toast-viewport {
1242
- left: 0;
1243
- right: 0;
1244
- padding: 1rem;
1245
- }
1246
-
1247
- .toast-root[data-state="open"] {
1248
- animation: toast-slide-in-mobile 150ms cubic-bezier(0.16, 1, 0.3, 1);
1249
- }
1250
-
1251
- @keyframes toast-slide-in-mobile {
1252
- from {
1253
- transform: translateY(-100%);
1254
- }
1255
- to {
1256
- transform: translateY(0);
1257
- }
1258
- }
1259
- }
@@ -35,7 +35,7 @@
35
35
  --info: var(--status-info);
36
36
  --info-foreground: var(--neutral-white);
37
37
 
38
- --border: var(--brand-primary);
38
+ --border: 240 5% 88%;
39
39
  --ring: var(--brand-primary);
40
40
 
41
41
  --radius: 1rem;
@@ -55,7 +55,10 @@
55
55
  --muted: 240 4% 20%;
56
56
  --muted-foreground: 0 0% 85%;
57
57
 
58
- --border: 0 0% 100%;
58
+ --accent: 140 35% 20%;
59
+ --accent-foreground: 0 0% 100%;
60
+
61
+ --border: 240 5% 22%;
59
62
  --ring: 0 0% 100%;
60
63
 
61
64
  /* status foregrounds still reasonable in dark */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ttt-productions/theme-core",
3
- "version": "0.2.9",
3
+ "version": "0.2.11",
4
4
  "description": "Theme provider + CSS token contract for TTT Productions apps",
5
5
  "repository": {
6
6
  "type": "git",
@@ -26,7 +26,7 @@
26
26
  "./components.css": "./dist/styles/components.css"
27
27
  },
28
28
  "scripts": {
29
- "build": "tsc && rm -rf dist/styles && mkdir -p dist/styles && cp -R src/styles/* dist/styles/",
29
+ "build": "tsc && shx rm -rf dist/styles && shx mkdir -p dist/styles && shx cp -R src/styles/* dist/styles/",
30
30
  "clean": "rm -rf dist *.tsbuildinfo",
31
31
  "typecheck": "tsc --noEmit",
32
32
  "prepublishOnly": "npm run clean && npm run build"
@@ -43,7 +43,8 @@
43
43
  "@types/react-dom": "^19.0.0",
44
44
  "react": "^19.2.0",
45
45
  "react-dom": "^19.2.0",
46
- "typescript": "^5.8.3"
46
+ "typescript": "^5.8.3",
47
+ "shx": "^0.3.4"
47
48
  },
48
49
  "author": "DJ (TTT Productions)",
49
50
  "license": "MIT"