bsmnt 0.2.9 → 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.
- package/README.md +84 -146
- package/package.json +2 -2
- package/src/templates/next-default/README.md +28 -199
- package/src/templates/next-default/app/layout.tsx +2 -3
- package/src/templates/next-default/biome.json +1 -14
- package/src/templates/next-default/components/layout/theme/index.tsx +2 -5
- package/src/templates/next-default/components/layout/wrapper/index.tsx +1 -2
- package/src/templates/next-default/components/ui/README.md +2 -3
- package/src/templates/next-default/components/ui/image/index.tsx +3 -3
- package/src/templates/next-default/lib/README.md +3 -3
- package/src/templates/next-default/lib/hooks/use-device-detection.ts +3 -2
- package/src/templates/next-default/lib/hooks/use-media-breakpoint.ts +10 -3
- package/src/templates/next-default/lib/scripts/dev.ts +9 -29
- package/src/templates/next-default/lib/styles/README.md +7 -58
- package/src/templates/next-default/lib/styles/fonts.ts +7 -15
- package/src/templates/next-default/lib/styles/global.css +198 -0
- package/src/templates/next-default/lib/styles/index.css +3 -0
- package/src/templates/next-default/lib/styles/tokens.css +179 -0
- package/src/templates/next-default/lib/utils/global-css.d.ts +1 -0
- package/src/templates/next-default/lib/utils/viewport.ts +11 -5
- package/src/templates/next-default/next.config.ts +0 -1
- package/src/templates/next-default/package.json +10 -17
- package/src/templates/next-default/postcss.config.mjs +0 -14
- package/src/templates/next-default/tsconfig.tsbuildinfo +1 -0
- package/src/templates/next-experiments/README.md +29 -200
- package/src/templates/next-experiments/app/layout.tsx +2 -3
- package/src/templates/next-experiments/app/page.tsx +46 -39
- package/src/templates/next-experiments/biome.json +1 -14
- package/src/templates/next-experiments/components/layout/theme/index.tsx +2 -5
- package/src/templates/next-experiments/components/layout/wrapper/index.tsx +1 -2
- package/src/templates/next-experiments/components/ui/README.md +2 -3
- package/src/templates/next-experiments/components/ui/image/index.tsx +3 -2
- package/src/templates/next-experiments/lib/README.md +3 -3
- package/src/templates/next-experiments/lib/hooks/use-device-detection.ts +3 -2
- package/src/templates/next-experiments/lib/hooks/use-media-breakpoint.ts +10 -3
- package/src/templates/next-experiments/lib/scripts/dev.ts +9 -29
- package/src/templates/next-experiments/lib/styles/README.md +7 -58
- package/src/templates/next-experiments/lib/styles/fonts.ts +7 -15
- package/src/templates/next-experiments/lib/styles/global.css +198 -0
- package/src/templates/next-experiments/lib/styles/index.css +3 -0
- package/src/templates/next-experiments/lib/styles/tokens.css +179 -0
- package/src/templates/next-experiments/lib/utils/global-css.d.ts +1 -0
- package/src/templates/next-experiments/lib/utils/viewport.ts +11 -5
- package/src/templates/next-experiments/next.config.ts +0 -1
- package/src/templates/next-experiments/package.json +10 -21
- package/src/templates/next-experiments/postcss.config.mjs +0 -14
- package/src/templates/next-experiments/tsconfig.tsbuildinfo +1 -0
- package/src/templates/next-webgl/README.md +30 -200
- package/src/templates/next-webgl/app/layout.tsx +2 -3
- package/src/templates/next-webgl/biome.json +1 -14
- package/src/templates/next-webgl/components/layout/theme/index.tsx +2 -5
- package/src/templates/next-webgl/components/layout/wrapper/index.tsx +1 -2
- package/src/templates/next-webgl/components/ui/README.md +2 -3
- package/src/templates/next-webgl/components/ui/image/index.tsx +3 -3
- package/src/templates/next-webgl/lib/README.md +3 -3
- package/src/templates/next-webgl/lib/hooks/use-device-detection.ts +3 -2
- package/src/templates/next-webgl/lib/hooks/use-media-breakpoint.ts +10 -3
- package/src/templates/next-webgl/lib/scripts/dev.ts +9 -29
- package/src/templates/next-webgl/lib/styles/README.md +7 -58
- package/src/templates/next-webgl/lib/styles/fonts.ts +7 -15
- package/src/templates/next-webgl/lib/styles/global.css +198 -0
- package/src/templates/next-webgl/lib/styles/index.css +3 -0
- package/src/templates/next-webgl/lib/styles/tokens.css +179 -0
- package/src/templates/next-webgl/lib/utils/global-css.d.ts +1 -0
- package/src/templates/next-webgl/lib/utils/viewport.ts +11 -5
- package/src/templates/next-webgl/next.config.ts +0 -1
- package/src/templates/next-webgl/package.json +10 -19
- package/src/templates/next-webgl/postcss.config.mjs +0 -14
- package/src/templates/next-webgl/tsconfig.tsbuildinfo +1 -0
- package/src/templates/next-default/components/ui/image/image.module.css +0 -5
- package/src/templates/next-default/lib/scripts/generate-component.ts +0 -322
- package/src/templates/next-default/lib/scripts/generate-page.ts +0 -193
- package/src/templates/next-default/lib/scripts/generate.ts +0 -79
- package/src/templates/next-default/lib/store/app.ts +0 -11
- package/src/templates/next-default/lib/store/index.ts +0 -11
- package/src/templates/next-default/lib/styles/colors.ts +0 -63
- package/src/templates/next-default/lib/styles/config.ts +0 -34
- package/src/templates/next-default/lib/styles/css/global.css +0 -85
- package/src/templates/next-default/lib/styles/css/index.css +0 -6
- package/src/templates/next-default/lib/styles/css/reset.css +0 -166
- package/src/templates/next-default/lib/styles/css/root.css +0 -68
- package/src/templates/next-default/lib/styles/css/tailwind.css +0 -132
- package/src/templates/next-default/lib/styles/easings.ts +0 -21
- package/src/templates/next-default/lib/styles/index.ts +0 -12
- package/src/templates/next-default/lib/styles/layout.mjs +0 -27
- package/src/templates/next-default/lib/styles/scripts/README.md +0 -29
- package/src/templates/next-default/lib/styles/scripts/generate-root.ts +0 -57
- package/src/templates/next-default/lib/styles/scripts/generate-tailwind.ts +0 -162
- package/src/templates/next-default/lib/styles/scripts/postcss-functions.mjs +0 -168
- package/src/templates/next-default/lib/styles/scripts/setup-styles.ts +0 -24
- package/src/templates/next-default/lib/styles/scripts/utils.ts +0 -20
- package/src/templates/next-default/lib/styles/typography.ts +0 -36
- package/src/templates/next-default/lib/utils/css.d.ts +0 -21
- package/src/templates/next-default/lib/utils/math.test.ts +0 -221
- package/src/templates/next-default/lib/utils/strings.test.ts +0 -166
- package/src/templates/next-default/lib/utils/viewport.test.ts +0 -256
- package/src/templates/next-default/public/fonts/geist/Geist-Mono.woff2 +0 -0
- package/src/templates/next-experiments/components/ui/image/image.module.css +0 -5
- package/src/templates/next-experiments/lib/scripts/generate-component.ts +0 -322
- package/src/templates/next-experiments/lib/scripts/generate-page.ts +0 -193
- package/src/templates/next-experiments/lib/scripts/generate.ts +0 -79
- package/src/templates/next-experiments/lib/store/app.ts +0 -11
- package/src/templates/next-experiments/lib/store/index.ts +0 -11
- package/src/templates/next-experiments/lib/styles/colors.ts +0 -63
- package/src/templates/next-experiments/lib/styles/config.ts +0 -34
- package/src/templates/next-experiments/lib/styles/css/global.css +0 -85
- package/src/templates/next-experiments/lib/styles/css/index.css +0 -6
- package/src/templates/next-experiments/lib/styles/css/reset.css +0 -166
- package/src/templates/next-experiments/lib/styles/css/root.css +0 -68
- package/src/templates/next-experiments/lib/styles/css/tailwind.css +0 -132
- package/src/templates/next-experiments/lib/styles/easings.ts +0 -21
- package/src/templates/next-experiments/lib/styles/index.ts +0 -12
- package/src/templates/next-experiments/lib/styles/layout.mjs +0 -27
- package/src/templates/next-experiments/lib/styles/scripts/README.md +0 -29
- package/src/templates/next-experiments/lib/styles/scripts/generate-root.ts +0 -57
- package/src/templates/next-experiments/lib/styles/scripts/generate-tailwind.ts +0 -162
- package/src/templates/next-experiments/lib/styles/scripts/postcss-functions.mjs +0 -168
- package/src/templates/next-experiments/lib/styles/scripts/setup-styles.ts +0 -24
- package/src/templates/next-experiments/lib/styles/scripts/utils.ts +0 -20
- package/src/templates/next-experiments/lib/styles/typography.ts +0 -36
- package/src/templates/next-experiments/lib/utils/css.d.ts +0 -21
- package/src/templates/next-experiments/lib/utils/math.test.ts +0 -221
- package/src/templates/next-experiments/lib/utils/strings.test.ts +0 -166
- package/src/templates/next-experiments/lib/utils/viewport.test.ts +0 -256
- package/src/templates/next-experiments/public/fonts/geist/Geist-Mono.woff2 +0 -0
- package/src/templates/next-webgl/components/ui/image/image.module.css +0 -5
- package/src/templates/next-webgl/lib/scripts/generate-component.ts +0 -322
- package/src/templates/next-webgl/lib/scripts/generate-page.ts +0 -193
- package/src/templates/next-webgl/lib/scripts/generate.ts +0 -79
- package/src/templates/next-webgl/lib/store/app.ts +0 -11
- package/src/templates/next-webgl/lib/store/index.ts +0 -11
- package/src/templates/next-webgl/lib/styles/colors.ts +0 -63
- package/src/templates/next-webgl/lib/styles/config.ts +0 -34
- package/src/templates/next-webgl/lib/styles/css/global.css +0 -85
- package/src/templates/next-webgl/lib/styles/css/index.css +0 -6
- package/src/templates/next-webgl/lib/styles/css/reset.css +0 -166
- package/src/templates/next-webgl/lib/styles/css/root.css +0 -68
- package/src/templates/next-webgl/lib/styles/css/tailwind.css +0 -132
- package/src/templates/next-webgl/lib/styles/easings.ts +0 -21
- package/src/templates/next-webgl/lib/styles/index.ts +0 -12
- package/src/templates/next-webgl/lib/styles/layout.mjs +0 -27
- package/src/templates/next-webgl/lib/styles/scripts/README.md +0 -29
- package/src/templates/next-webgl/lib/styles/scripts/generate-root.ts +0 -57
- package/src/templates/next-webgl/lib/styles/scripts/generate-tailwind.ts +0 -162
- package/src/templates/next-webgl/lib/styles/scripts/postcss-functions.mjs +0 -168
- package/src/templates/next-webgl/lib/styles/scripts/setup-styles.ts +0 -24
- package/src/templates/next-webgl/lib/styles/scripts/utils.ts +0 -20
- package/src/templates/next-webgl/lib/styles/typography.ts +0 -36
- package/src/templates/next-webgl/lib/utils/css.d.ts +0 -21
- package/src/templates/next-webgl/lib/utils/math.test.ts +0 -221
- package/src/templates/next-webgl/lib/utils/strings.test.ts +0 -166
- package/src/templates/next-webgl/lib/utils/viewport.test.ts +0 -256
- 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,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
|
-
}
|