bsmnt 0.2.8 → 0.2.10

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 (157) hide show
  1. package/README.md +84 -146
  2. package/package.json +2 -2
  3. package/src/helpers/integrate/sanity/files/lib/utils/metadata.ts +1 -1
  4. package/src/templates/next-default/README.md +28 -199
  5. package/src/templates/next-default/app/layout.tsx +2 -3
  6. package/src/templates/next-default/biome.json +1 -14
  7. package/src/templates/next-default/components/layout/theme/index.tsx +2 -5
  8. package/src/templates/next-default/components/layout/wrapper/index.tsx +1 -2
  9. package/src/templates/next-default/components/ui/README.md +2 -3
  10. package/src/templates/next-default/components/ui/image/index.tsx +3 -3
  11. package/src/templates/next-default/lib/README.md +3 -3
  12. package/src/templates/next-default/lib/hooks/use-device-detection.ts +3 -2
  13. package/src/templates/next-default/lib/hooks/use-media-breakpoint.ts +10 -3
  14. package/src/templates/next-default/lib/scripts/dev.ts +9 -29
  15. package/src/templates/next-default/lib/styles/README.md +7 -58
  16. package/src/templates/next-default/lib/styles/fonts.ts +7 -15
  17. package/src/templates/next-default/lib/styles/global.css +198 -0
  18. package/src/templates/next-default/lib/styles/index.css +3 -0
  19. package/src/templates/next-default/lib/styles/tokens.css +179 -0
  20. package/src/templates/next-default/lib/utils/global-css.d.ts +1 -0
  21. package/src/templates/next-default/lib/utils/metadata.ts +1 -1
  22. package/src/templates/next-default/lib/utils/viewport.ts +11 -5
  23. package/src/templates/next-default/next.config.ts +0 -1
  24. package/src/templates/next-default/package.json +10 -17
  25. package/src/templates/next-default/postcss.config.mjs +0 -14
  26. package/src/templates/next-default/tsconfig.tsbuildinfo +1 -0
  27. package/src/templates/next-experiments/README.md +29 -200
  28. package/src/templates/next-experiments/app/layout.tsx +2 -3
  29. package/src/templates/next-experiments/app/page.tsx +46 -39
  30. package/src/templates/next-experiments/biome.json +1 -14
  31. package/src/templates/next-experiments/components/layout/theme/index.tsx +2 -5
  32. package/src/templates/next-experiments/components/layout/wrapper/index.tsx +1 -2
  33. package/src/templates/next-experiments/components/ui/README.md +2 -3
  34. package/src/templates/next-experiments/components/ui/image/index.tsx +3 -2
  35. package/src/templates/next-experiments/lib/README.md +3 -3
  36. package/src/templates/next-experiments/lib/hooks/use-device-detection.ts +3 -2
  37. package/src/templates/next-experiments/lib/hooks/use-media-breakpoint.ts +10 -3
  38. package/src/templates/next-experiments/lib/scripts/dev.ts +9 -29
  39. package/src/templates/next-experiments/lib/styles/README.md +7 -58
  40. package/src/templates/next-experiments/lib/styles/fonts.ts +7 -15
  41. package/src/templates/next-experiments/lib/styles/global.css +198 -0
  42. package/src/templates/next-experiments/lib/styles/index.css +3 -0
  43. package/src/templates/next-experiments/lib/styles/tokens.css +179 -0
  44. package/src/templates/next-experiments/lib/utils/global-css.d.ts +1 -0
  45. package/src/templates/next-experiments/lib/utils/metadata.ts +1 -1
  46. package/src/templates/next-experiments/lib/utils/viewport.ts +11 -5
  47. package/src/templates/next-experiments/next.config.ts +0 -1
  48. package/src/templates/next-experiments/package.json +10 -21
  49. package/src/templates/next-experiments/postcss.config.mjs +0 -14
  50. package/src/templates/next-experiments/tsconfig.tsbuildinfo +1 -0
  51. package/src/templates/next-webgl/README.md +30 -200
  52. package/src/templates/next-webgl/app/layout.tsx +2 -3
  53. package/src/templates/next-webgl/biome.json +1 -14
  54. package/src/templates/next-webgl/components/layout/theme/index.tsx +2 -5
  55. package/src/templates/next-webgl/components/layout/wrapper/index.tsx +1 -2
  56. package/src/templates/next-webgl/components/ui/README.md +2 -3
  57. package/src/templates/next-webgl/components/ui/image/index.tsx +3 -3
  58. package/src/templates/next-webgl/lib/README.md +3 -3
  59. package/src/templates/next-webgl/lib/hooks/use-device-detection.ts +3 -2
  60. package/src/templates/next-webgl/lib/hooks/use-media-breakpoint.ts +10 -3
  61. package/src/templates/next-webgl/lib/scripts/dev.ts +9 -29
  62. package/src/templates/next-webgl/lib/styles/README.md +7 -58
  63. package/src/templates/next-webgl/lib/styles/fonts.ts +7 -15
  64. package/src/templates/next-webgl/lib/styles/global.css +198 -0
  65. package/src/templates/next-webgl/lib/styles/index.css +3 -0
  66. package/src/templates/next-webgl/lib/styles/tokens.css +179 -0
  67. package/src/templates/next-webgl/lib/utils/global-css.d.ts +1 -0
  68. package/src/templates/next-webgl/lib/utils/metadata.ts +1 -1
  69. package/src/templates/next-webgl/lib/utils/viewport.ts +11 -5
  70. package/src/templates/next-webgl/next.config.ts +0 -1
  71. package/src/templates/next-webgl/package.json +10 -19
  72. package/src/templates/next-webgl/postcss.config.mjs +0 -14
  73. package/src/templates/next-webgl/tsconfig.tsbuildinfo +1 -0
  74. package/src/templates/next-default/components/ui/image/image.module.css +0 -5
  75. package/src/templates/next-default/lib/scripts/generate-component.ts +0 -322
  76. package/src/templates/next-default/lib/scripts/generate-page.ts +0 -193
  77. package/src/templates/next-default/lib/scripts/generate.ts +0 -79
  78. package/src/templates/next-default/lib/store/app.ts +0 -11
  79. package/src/templates/next-default/lib/store/index.ts +0 -11
  80. package/src/templates/next-default/lib/styles/colors.ts +0 -63
  81. package/src/templates/next-default/lib/styles/config.ts +0 -34
  82. package/src/templates/next-default/lib/styles/css/global.css +0 -85
  83. package/src/templates/next-default/lib/styles/css/index.css +0 -6
  84. package/src/templates/next-default/lib/styles/css/reset.css +0 -166
  85. package/src/templates/next-default/lib/styles/css/root.css +0 -68
  86. package/src/templates/next-default/lib/styles/css/tailwind.css +0 -132
  87. package/src/templates/next-default/lib/styles/easings.ts +0 -21
  88. package/src/templates/next-default/lib/styles/index.ts +0 -12
  89. package/src/templates/next-default/lib/styles/layout.mjs +0 -27
  90. package/src/templates/next-default/lib/styles/scripts/README.md +0 -29
  91. package/src/templates/next-default/lib/styles/scripts/generate-root.ts +0 -57
  92. package/src/templates/next-default/lib/styles/scripts/generate-tailwind.ts +0 -162
  93. package/src/templates/next-default/lib/styles/scripts/postcss-functions.mjs +0 -168
  94. package/src/templates/next-default/lib/styles/scripts/setup-styles.ts +0 -24
  95. package/src/templates/next-default/lib/styles/scripts/utils.ts +0 -20
  96. package/src/templates/next-default/lib/styles/typography.ts +0 -36
  97. package/src/templates/next-default/lib/utils/css.d.ts +0 -21
  98. package/src/templates/next-default/lib/utils/math.test.ts +0 -221
  99. package/src/templates/next-default/lib/utils/strings.test.ts +0 -166
  100. package/src/templates/next-default/lib/utils/viewport.test.ts +0 -256
  101. package/src/templates/next-default/public/fonts/geist/Geist-Mono.woff2 +0 -0
  102. package/src/templates/next-experiments/components/ui/image/image.module.css +0 -5
  103. package/src/templates/next-experiments/lib/scripts/generate-component.ts +0 -322
  104. package/src/templates/next-experiments/lib/scripts/generate-page.ts +0 -193
  105. package/src/templates/next-experiments/lib/scripts/generate.ts +0 -79
  106. package/src/templates/next-experiments/lib/store/app.ts +0 -11
  107. package/src/templates/next-experiments/lib/store/index.ts +0 -11
  108. package/src/templates/next-experiments/lib/styles/colors.ts +0 -63
  109. package/src/templates/next-experiments/lib/styles/config.ts +0 -34
  110. package/src/templates/next-experiments/lib/styles/css/global.css +0 -85
  111. package/src/templates/next-experiments/lib/styles/css/index.css +0 -6
  112. package/src/templates/next-experiments/lib/styles/css/reset.css +0 -166
  113. package/src/templates/next-experiments/lib/styles/css/root.css +0 -68
  114. package/src/templates/next-experiments/lib/styles/css/tailwind.css +0 -132
  115. package/src/templates/next-experiments/lib/styles/easings.ts +0 -21
  116. package/src/templates/next-experiments/lib/styles/index.ts +0 -12
  117. package/src/templates/next-experiments/lib/styles/layout.mjs +0 -27
  118. package/src/templates/next-experiments/lib/styles/scripts/README.md +0 -29
  119. package/src/templates/next-experiments/lib/styles/scripts/generate-root.ts +0 -57
  120. package/src/templates/next-experiments/lib/styles/scripts/generate-tailwind.ts +0 -162
  121. package/src/templates/next-experiments/lib/styles/scripts/postcss-functions.mjs +0 -168
  122. package/src/templates/next-experiments/lib/styles/scripts/setup-styles.ts +0 -24
  123. package/src/templates/next-experiments/lib/styles/scripts/utils.ts +0 -20
  124. package/src/templates/next-experiments/lib/styles/typography.ts +0 -36
  125. package/src/templates/next-experiments/lib/utils/css.d.ts +0 -21
  126. package/src/templates/next-experiments/lib/utils/math.test.ts +0 -221
  127. package/src/templates/next-experiments/lib/utils/strings.test.ts +0 -166
  128. package/src/templates/next-experiments/lib/utils/viewport.test.ts +0 -256
  129. package/src/templates/next-experiments/public/fonts/geist/Geist-Mono.woff2 +0 -0
  130. package/src/templates/next-webgl/components/ui/image/image.module.css +0 -5
  131. package/src/templates/next-webgl/lib/scripts/generate-component.ts +0 -322
  132. package/src/templates/next-webgl/lib/scripts/generate-page.ts +0 -193
  133. package/src/templates/next-webgl/lib/scripts/generate.ts +0 -79
  134. package/src/templates/next-webgl/lib/store/app.ts +0 -11
  135. package/src/templates/next-webgl/lib/store/index.ts +0 -11
  136. package/src/templates/next-webgl/lib/styles/colors.ts +0 -63
  137. package/src/templates/next-webgl/lib/styles/config.ts +0 -34
  138. package/src/templates/next-webgl/lib/styles/css/global.css +0 -85
  139. package/src/templates/next-webgl/lib/styles/css/index.css +0 -6
  140. package/src/templates/next-webgl/lib/styles/css/reset.css +0 -166
  141. package/src/templates/next-webgl/lib/styles/css/root.css +0 -68
  142. package/src/templates/next-webgl/lib/styles/css/tailwind.css +0 -132
  143. package/src/templates/next-webgl/lib/styles/easings.ts +0 -21
  144. package/src/templates/next-webgl/lib/styles/index.ts +0 -12
  145. package/src/templates/next-webgl/lib/styles/layout.mjs +0 -27
  146. package/src/templates/next-webgl/lib/styles/scripts/README.md +0 -29
  147. package/src/templates/next-webgl/lib/styles/scripts/generate-root.ts +0 -57
  148. package/src/templates/next-webgl/lib/styles/scripts/generate-tailwind.ts +0 -162
  149. package/src/templates/next-webgl/lib/styles/scripts/postcss-functions.mjs +0 -168
  150. package/src/templates/next-webgl/lib/styles/scripts/setup-styles.ts +0 -24
  151. package/src/templates/next-webgl/lib/styles/scripts/utils.ts +0 -20
  152. package/src/templates/next-webgl/lib/styles/typography.ts +0 -36
  153. package/src/templates/next-webgl/lib/utils/css.d.ts +0 -21
  154. package/src/templates/next-webgl/lib/utils/math.test.ts +0 -221
  155. package/src/templates/next-webgl/lib/utils/strings.test.ts +0 -166
  156. package/src/templates/next-webgl/lib/utils/viewport.test.ts +0 -256
  157. package/src/templates/next-webgl/public/fonts/geist/Geist-Mono.woff2 +0 -0
@@ -1,85 +0,0 @@
1
- /* GLOBAL CSS FILE - Contains global styles that shouldn't be reset */
2
-
3
- html {
4
- --scrollbar-gutter: 0px;
5
- scrollbar-gutter: stable; /* This is needed to prevent the scrollbar from jumping */
6
-
7
- &.lenis-stopped {
8
- --scrollbar-gutter: var(--scrollbar-width);
9
- }
10
- }
11
-
12
- html.overflow-hidden {
13
- overflow: hidden;
14
- touch-action: none;
15
- }
16
-
17
- body {
18
- min-height: 100vh;
19
- overscroll-behavior: none;
20
- background-color: var(--color-primary);
21
- color: var(--color-secondary);
22
- display: flex;
23
- flex-direction: column;
24
- -webkit-font-smoothing: antialiased;
25
- -moz-osx-font-smoothing: grayscale;
26
- }
27
-
28
- /* Selection styling */
29
- *::selection {
30
- background-color: var(--color-contrast);
31
- color: var(--color-primary);
32
- }
33
-
34
- /* SVG icon colors */
35
- svg.icon {
36
- path[fill],
37
- rect[fill],
38
- circle[fill] {
39
- fill: currentColor;
40
- }
41
- path[stroke],
42
- rect[stroke],
43
- circle[stroke] {
44
- stroke: currentColor;
45
- }
46
- }
47
-
48
- /* Hover states */
49
- .link {
50
- @media (--hover) {
51
- &:hover {
52
- text-decoration: underline;
53
- }
54
- }
55
- }
56
-
57
- /* Focus states */
58
- *:focus-visible {
59
- outline: 2px solid var(--color-contrast);
60
- }
61
-
62
- html.scrollbar-grabbing,
63
- img {
64
- -webkit-touch-callout: none;
65
- -webkit-user-select: none;
66
- -moz-user-select: none;
67
- -ms-user-select: none;
68
- -o-user-select: none;
69
- user-select: none;
70
- }
71
-
72
- button {
73
- cursor: pointer;
74
- /* Fix vertical text centering by trimming font metric space */
75
- text-box-trim: both;
76
- text-box-edge: cap alphabetic;
77
- user-select: none;
78
- }
79
-
80
- html.screenshot {
81
- *:not(:has(canvas), canvas, :has(#orchestra), #orchestra, #orchestra *) {
82
- /* biome-ignore lint: it's all good */
83
- opacity: 0 !important;
84
- }
85
- }
@@ -1,6 +0,0 @@
1
- /* INDEX CSS FILE - Barrel file for importing all the css files */
2
- @import "./reset.css";
3
- @import "tailwindcss/utilities.css";
4
- @import "./tailwind.css";
5
- @import "./root.css";
6
- @import "./global.css";
@@ -1,166 +0,0 @@
1
- /***
2
- The new CSS reset - version 1.11.3 (last updated 25.08.2024)
3
- GitHub page: https://github.com/elad2412/the-new-css-reset
4
- ***/
5
-
6
- /*
7
- Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property
8
- - The "symbol *" part is to solve Firefox SVG sprite bug
9
- - The "html" element is excluded, otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36)
10
- */
11
- *:where(
12
- :not(
13
- html,
14
- iframe,
15
- canvas,
16
- img,
17
- svg,
18
- video,
19
- audio,
20
- dialog,
21
- vercel-live-feedback,
22
- nextjs-portal,
23
- :where(select, option)
24
- ):not(svg *, symbol *)
25
- ) {
26
- all: unset;
27
- display: revert;
28
- }
29
-
30
- /* Preferred box-sizing value */
31
- *,
32
- *::before,
33
- *::after {
34
- box-sizing: border-box;
35
- }
36
-
37
- /* Fix mobile Safari increase font-size on landscape mode */
38
- html {
39
- -moz-text-size-adjust: none;
40
- -webkit-text-size-adjust: none;
41
- text-size-adjust: none;
42
- }
43
-
44
- /* Reapply the pointer cursor for anchor tags */
45
- a,
46
- button {
47
- cursor: revert;
48
- }
49
-
50
- /* Remove list styles (bullets/numbers) */
51
- ol,
52
- ul,
53
- menu,
54
- summary {
55
- list-style: none;
56
- }
57
-
58
- /* Firefox: solve issue where nested ordered lists continue numbering from parent (https://bugzilla.mozilla.org/show_bug.cgi?id=1881517) */
59
- ol {
60
- counter-reset: revert;
61
- }
62
-
63
- /* For images to not be able to exceed their container */
64
- img {
65
- max-inline-size: 100%;
66
- max-block-size: 100%;
67
- }
68
-
69
- /* removes spacing between cells in tables */
70
- table {
71
- border-collapse: collapse;
72
- }
73
-
74
- /* Safari - solving issue when using user-select:none on the <body> text input doesn't working */
75
- input,
76
- textarea {
77
- -webkit-user-select: auto;
78
- }
79
-
80
- /* revert the 'white-space' property for textarea elements on Safari */
81
- textarea {
82
- white-space: revert;
83
- }
84
-
85
- /* minimum style to allow to style meter element */
86
- meter {
87
- -webkit-appearance: revert;
88
- appearance: revert;
89
- }
90
-
91
- /* preformatted text - use only for this feature */
92
- :where(pre) {
93
- all: revert;
94
- box-sizing: border-box;
95
- }
96
-
97
- /* reset default text opacity of input placeholder */
98
- ::placeholder {
99
- color: unset;
100
- }
101
-
102
- /* fix the feature of 'hidden' attribute.
103
- display:revert; revert to element instead of attribute */
104
- :where([hidden]) {
105
- display: none;
106
- }
107
-
108
- /* revert for bug in Chromium browsers
109
- - fix for the content editable attribute will work properly.
110
- - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/
111
- :where([contenteditable]:not([contenteditable="false"])) {
112
- -moz-user-modify: read-write;
113
- -webkit-user-modify: read-write;
114
- overflow-wrap: break-word;
115
- -webkit-line-break: after-white-space;
116
- -webkit-user-select: auto;
117
- }
118
-
119
- /* apply back the draggable feature - exist only in Chromium and Safari */
120
- :where([draggable="true"]) {
121
- -webkit-user-drag: element;
122
- }
123
-
124
- /* Revert Modal native behavior */
125
- :where(dialog:modal) {
126
- all: revert;
127
- box-sizing: border-box;
128
- }
129
-
130
- /* Remove details summary webkit styles */
131
- ::-webkit-details-marker {
132
- display: none;
133
- }
134
-
135
- /* Add support for color-scheme */
136
- :root {
137
- color-scheme: light dark;
138
- }
139
-
140
- /* Add support for newer form controls */
141
- :where(input[type="file"]) {
142
- cursor: default;
143
- -webkit-appearance: none;
144
- appearance: none;
145
- }
146
-
147
- /* Improve text rendering */
148
- html {
149
- text-size-adjust: 100%;
150
- -webkit-text-size-adjust: 100%;
151
- -moz-text-size-adjust: 100%;
152
- text-rendering: optimizeLegibility;
153
- }
154
-
155
- /* Remove tap highlight on iOS */
156
- a,
157
- button {
158
- -webkit-tap-highlight-color: transparent;
159
- }
160
-
161
- /* Improve media defaults */
162
- video,
163
- audio {
164
- max-inline-size: 100%;
165
- max-block-size: 100%;
166
- }
@@ -1,68 +0,0 @@
1
- /*
2
- * THIS FILE IS GENERATED BY setup-styles.ts
3
- * DO NOT EDIT IT DIRECTLY.
4
- */
5
-
6
- @custom-media --hover (hover: hover);
7
- @custom-media --reduced-motion (prefers-reduced-motion: reduce);
8
- @custom-media --mobile (width <= 767.98px);
9
- @custom-media --desktop-large (width >= 1920px);
10
- @custom-media --desktop (width >= 1440px);
11
- @custom-media --tablet-lg (width >= 1024px);
12
- @custom-media --tablet (width >= 768px);
13
- @custom-media --mobile (width >= 640px);
14
-
15
- :root {
16
- --device-width: 640;
17
- --device-height: 650;
18
-
19
- --columns: 4;
20
- --gap: 16px;
21
- --safe: 16px;
22
-
23
- --header-height: 58px;
24
-
25
- --layout-width: calc(100vw - (2 * var(--safe)));
26
- --column-width: calc((var(--layout-width) - (var(--columns) - 1) * var(--gap)) / var(--columns));
27
-
28
- --ease-in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53);
29
- --ease-in-cubic: cubic-bezier(0.55, 0.055, 0.675, 0.19);
30
- --ease-in-quart: cubic-bezier(0.895, 0.03, 0.685, 0.22);
31
- --ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06);
32
- --ease-in-expo: cubic-bezier(0.95, 0.05, 0.795, 0.035);
33
- --ease-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.335);
34
- --ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
35
- --ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
36
- --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
37
- --ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
38
- --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
39
- --ease-out-circ: cubic-bezier(0.075, 0.82, 0.165, 1);
40
- --ease-in-out-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955);
41
- --ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1);
42
- --ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1);
43
- --ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1);
44
- --ease-in-out-expo: cubic-bezier(1, 0, 0, 1);
45
- --ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.15, 0.86);
46
- --ease-gleasing: cubic-bezier(0.4, 0, 0, 1);
47
-
48
- --color-black: #000000;
49
- --color-white: #ffffff;
50
- --color-orange: #FF4D00;
51
- --color-blue: #487CFF;
52
- --color-green: #00FF9B;
53
- --color-violet: #F101A5;
54
- --color-pink: #FF73A6;
55
- --color-gray: #666666;
56
-
57
- @variant desktop {
58
- --device-width: 1440;
59
- --device-height: 816;
60
-
61
- --columns: 12;
62
- --gap: 16px;
63
- --safe: 16px;
64
-
65
- --header-height: 98px;
66
- }
67
- }
68
-
@@ -1,132 +0,0 @@
1
- /*
2
- * THIS FILE IS GENERATED BY setup-styles.ts
3
- * DO NOT EDIT IT DIRECTLY.
4
- */
5
-
6
- /** Custom theme **/
7
- @theme {
8
- --breakpoint-*: initial;
9
- --breakpoint-desktop-large: 1920px;
10
- --breakpoint-desktop: 1440px;
11
- --breakpoint-tablet-lg: 1024px;
12
- --breakpoint-tablet: 768px;
13
- --breakpoint-mobile: 640px;
14
-
15
- --color-*: initial;
16
- --color-primary: #ffffff;
17
- --color-secondary: #000000;
18
- --color-contrast: #FF4D00;
19
- --color-black: #000000;
20
- --color-white: #ffffff;
21
- --color-orange: #FF4D00;
22
- --color-blue: #487CFF;
23
- --color-green: #00FF9B;
24
- --color-violet: #F101A5;
25
- --color-pink: #FF73A6;
26
- --color-gray: #666666;
27
-
28
- /* gray */
29
- --color-gray-50: #F5F5F5;
30
- --color-gray-100: #E0E0E0;
31
- --color-gray-200: #C2C2C2;
32
- --color-gray-300: #A3A3A3;
33
- --color-gray-400: #858585;
34
- --color-gray-500: #666666;
35
- --color-gray-600: #4D4D4D;
36
- --color-gray-700: #333333;
37
- --color-gray-800: #1A1A1A;
38
-
39
- --spacing: 0.25rem;
40
- --spacing-0: 0;
41
- --spacing-safe: var(--safe);
42
- --spacing-gap: var(--gap);
43
- --spacing-header-height: var(--header-height);
44
-
45
- --font-*: initial;
46
- --font-mono: var(--geist-mono);
47
-
48
- --ease-*: initial;
49
- --ease-in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53);
50
- --ease-in-cubic: cubic-bezier(0.55, 0.055, 0.675, 0.19);
51
- --ease-in-quart: cubic-bezier(0.895, 0.03, 0.685, 0.22);
52
- --ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06);
53
- --ease-in-expo: cubic-bezier(0.95, 0.05, 0.795, 0.035);
54
- --ease-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.335);
55
- --ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
56
- --ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
57
- --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
58
- --ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
59
- --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
60
- --ease-out-circ: cubic-bezier(0.075, 0.82, 0.165, 1);
61
- --ease-in-out-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955);
62
- --ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1);
63
- --ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1);
64
- --ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1);
65
- --ease-in-out-expo: cubic-bezier(1, 0, 0, 1);
66
- --ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.15, 0.86);
67
- --ease-gleasing: cubic-bezier(0.4, 0, 0, 1);
68
- }
69
-
70
- /** Custom theme overwrites **/
71
- [data-theme=light] {
72
- --color-primary: #ffffff;
73
- --color-secondary: #000000;
74
- --color-contrast: #FF4D00;
75
- }
76
- [data-theme=dark] {
77
- --color-primary: #000000;
78
- --color-secondary: #ffffff;
79
- --color-contrast: #FF4D00;
80
- }
81
-
82
-
83
- /** Custom static utilities **/
84
- @utility test-mono {
85
- font-family: var(--geist-mono);
86
- font-style: normal;
87
- font-weight: 400;
88
- line-height: 90%;
89
- letter-spacing: 0em;
90
- font-size: 20px;
91
- @variant desktop { font-size: 24px; }
92
- }
93
-
94
- @utility desktop-only {
95
- @media (--mobile) {
96
- display: none !important;
97
- }
98
- }
99
-
100
- @utility mobile-only {
101
- @media (--desktop) {
102
- display: none !important;
103
- }
104
- }
105
-
106
- @utility b-grid {
107
- display: grid;
108
- grid-template-columns: repeat(var(--columns), 1fr);
109
- column-gap: var(--gap);
110
- }
111
-
112
- @utility b-layout-block {
113
- margin-inline: auto;
114
- width: calc(100% - 2 * var(--safe));
115
- }
116
-
117
- @utility b-layout-block-inner {
118
- padding-inline: var(--safe);
119
- width: 100%;
120
- }
121
-
122
- @utility b-layout-grid {
123
- @apply b-layout-block b-grid;
124
- }
125
-
126
- @utility b-layout-grid-inner {
127
- @apply b-layout-block-inner b-grid;
128
- }
129
-
130
- /** Custom variants **/
131
- @custom-variant light (&:where([data-theme=light], [data-theme=light] *));
132
- @custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));
@@ -1,21 +0,0 @@
1
- export const easings = {
2
- "in-quad": "cubic-bezier(0.55, 0.085, 0.68, 0.53)",
3
- "in-cubic": "cubic-bezier(0.55, 0.055, 0.675, 0.19)",
4
- "in-quart": "cubic-bezier(0.895, 0.03, 0.685, 0.22)",
5
- "in-quint": "cubic-bezier(0.755, 0.05, 0.855, 0.06)",
6
- "in-expo": "cubic-bezier(0.95, 0.05, 0.795, 0.035)",
7
- "in-circ": "cubic-bezier(0.6, 0.04, 0.98, 0.335)",
8
- "out-quad": "cubic-bezier(0.25, 0.46, 0.45, 0.94)",
9
- "out-cubic": "cubic-bezier(0.215, 0.61, 0.355, 1)",
10
- "out-quart": "cubic-bezier(0.165, 0.84, 0.44, 1)",
11
- "out-quint": "cubic-bezier(0.23, 1, 0.32, 1)",
12
- "out-expo": "cubic-bezier(0.19, 1, 0.22, 1)",
13
- "out-circ": "cubic-bezier(0.075, 0.82, 0.165, 1)",
14
- "in-out-quad": "cubic-bezier(0.455, 0.03, 0.515, 0.955)",
15
- "in-out-cubic": "cubic-bezier(0.645, 0.045, 0.355, 1)",
16
- "in-out-quart": "cubic-bezier(0.77, 0, 0.175, 1)",
17
- "in-out-quint": "cubic-bezier(0.86, 0, 0.07, 1)",
18
- "in-out-expo": "cubic-bezier(1, 0, 0, 1)",
19
- "in-out-circ": "cubic-bezier(0.785, 0.135, 0.15, 0.86)",
20
- gleasing: "cubic-bezier(0.4, 0, 0, 1)",
21
- }
@@ -1,12 +0,0 @@
1
- /**
2
- * Styling System
3
- *
4
- * Import from barrel:
5
- * import { colors, themes, breakpoints } from '@/styles'
6
- */
7
-
8
- export { colors, type Themes, themeNames, themes } from "./colors"
9
- export type { ThemeName } from "./config"
10
- export { breakpoints, customSizes, layout, screens } from "./config"
11
- export { easings } from "./easings"
12
- export { fontsVariable } from "./fonts"
@@ -1,27 +0,0 @@
1
- // THIS FILE HAS TO STAY .mjs AS ITS CONSUMED BY POSTCSS
2
- // EDIT THIS AS NEEDED
3
-
4
- const breakpoints = {
5
- "desktop-large": 1920,
6
- desktop: 1440,
7
- "tablet-lg": 1024,
8
- tablet: 768,
9
- mobile: 640,
10
- }
11
-
12
- const screens = {
13
- mobile: { width: breakpoints.mobile, height: 650 },
14
- desktop: { width: breakpoints.desktop, height: 816 },
15
- }
16
-
17
- const layout = {
18
- columns: { mobile: 4, desktop: 12 },
19
- gap: { mobile: 16, desktop: 16 },
20
- safe: { mobile: 16, desktop: 16 },
21
- }
22
-
23
- const customSizes = {
24
- "header-height": { mobile: 58, desktop: 98 },
25
- }
26
-
27
- export { breakpoints, customSizes, layout, screens }
@@ -1,29 +0,0 @@
1
- # Style Generation Scripts
2
-
3
- Generate CSS from TypeScript config. Run with `bun setup:styles`.
4
-
5
- ## Scripts
6
-
7
- | Script | Output |
8
- |--------|--------|
9
- | `setup-styles.ts` | Orchestrates all generation |
10
- | `generate-root.ts` | → `css/root.css` |
11
- | `generate-tailwind.ts` | → `css/tailwind.css` |
12
- | `generate-scale.ts` | Scale utilities |
13
- | `postcss-functions.mjs` | `tovw()`, `torem()`, `toem()`, `columns()` |
14
-
15
- ## Build Flow
16
-
17
- ```
18
- TypeScript Config → Generation Scripts → CSS Variables → PostCSS → Output
19
- ```
20
-
21
- 1. Edit `colors.ts`, `typography.ts`, etc.
22
- 2. Run `bun setup:styles`
23
- 3. Generated CSS is used by PostCSS
24
-
25
- ## Best Practices
26
-
27
- - Always run `bun setup:styles` after config changes
28
- - Never edit `css/root.css` or `css/tailwind.css` directly
29
- - Use `bun dev` for development (includes style watching)
@@ -1,57 +0,0 @@
1
- import type { Config } from "../config"
2
- import { formatObject } from "./utils"
3
-
4
- export function generateRoot({
5
- breakpoints,
6
- colors,
7
- customSizes,
8
- easings,
9
- layout,
10
- screens,
11
- }: Pick<
12
- Config,
13
- "breakpoints" | "colors" | "customSizes" | "easings" | "layout" | "screens"
14
- >) {
15
- return `@custom-media --hover (hover: hover);
16
- @custom-media --reduced-motion (prefers-reduced-motion: reduce);
17
- @custom-media --mobile (width <= ${breakpoints.tablet - 0.02}px);
18
- ${formatObject(breakpoints, ([name, value]) => `@custom-media --${name} (width >= ${value}px);`, "\n")}
19
-
20
- :root {
21
- --device-width: ${screens.mobile.width};
22
- --device-height: ${screens.mobile.height};
23
-
24
- ${formatObject(layout, ([name, { mobile }]) => {
25
- if (name === "columns") return `--columns: ${mobile};`
26
-
27
- return `--${name}: ${mobile}px;`
28
- })}
29
-
30
- ${formatObject(customSizes, ([name, { mobile }]) => `--${name}: ${mobile}px;`)}
31
-
32
- --layout-width: calc(100vw - (2 * var(--safe)));
33
- --column-width: calc((var(--layout-width) - (var(--columns) - 1) * var(--gap)) / var(--columns));
34
-
35
- ${formatObject(easings, ([name, value]) => `--ease-${name}: ${value};`)}
36
-
37
- ${formatObject(colors, ([name, value]) => `--color-${name}: ${value};`)}
38
-
39
- @variant desktop {
40
- --device-width: ${screens.desktop.width};
41
- --device-height: ${screens.desktop.height};
42
-
43
- ${formatObject(
44
- layout,
45
- ([name, { desktop }]) => {
46
- if (name === "columns") return `--columns: ${desktop};`
47
-
48
- return `--${name}: ${desktop}px;`
49
- },
50
- "\n\t\t"
51
- )}
52
-
53
- ${formatObject(customSizes, ([name, { desktop }]) => `--${name}: ${desktop}px;`, "\n\t\t")}
54
- }
55
- }
56
- `
57
- }