@bccampus/ui-components 0.9.17 → 0.9.19

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 (9) hide show
  1. package/dist/components/ui/banner.js +3 -3
  2. package/dist/components/ui/horizontal-list.js +1 -1
  3. package/dist/components/ui/page-section.js +1 -1
  4. package/package.json +6 -6
  5. package/src/components/ui/banner.tsx +91 -90
  6. package/src/components/ui/horizontal-list.tsx +84 -84
  7. package/src/components/ui/page-section.tsx +39 -39
  8. package/src/styles/theme.css +186 -184
  9. package/src/styles/typography.css +420 -410
package/src/styles/theme.css CHANGED
@@ -1,184 +1,186 @@
1
- @custom-variant dark (&:is(.dark *));
2
-
3
- @theme inline {
4
- --radius-sm: calc(var(--radius) - 4px);
5
- --radius-md: calc(var(--radius) - 2px);
6
- --radius-lg: var(--radius);
7
- --radius-xl: calc(var(--radius) + 4px);
8
- --radius-container: var(--radius);
9
- --color-background: var(--background);
10
- --color-foreground: var(--foreground);
11
- --color-card: var(--card);
12
- --color-card-foreground: var(--card-foreground);
13
- --color-popover: var(--popover);
14
- --color-popover-foreground: var(--popover-foreground);
15
- --color-primary: var(--primary);
16
- --color-primary-foreground: var(--primary-foreground);
17
- --color-secondary: var(--secondary);
18
- --color-secondary-foreground: var(--secondary-foreground);
19
- --color-muted: var(--muted);
20
- --color-muted-foreground: var(--muted-foreground);
21
- --color-accent: var(--accent);
22
- --color-accent-foreground: var(--accent-foreground);
23
- --color-destructive: var(--destructive);
24
- --color-border: var(--border);
25
- --color-input: var(--input);
26
- --color-ring: var(--ring);
27
- --color-chart-1: var(--chart-1);
28
- --color-chart-2: var(--chart-2);
29
- --color-chart-3: var(--chart-3);
30
- --color-chart-4: var(--chart-4);
31
- --color-chart-5: var(--chart-5);
32
- --color-sidebar: var(--sidebar);
33
- --color-sidebar-foreground: var(--sidebar-foreground);
34
- --color-sidebar-primary: var(--sidebar-primary);
35
- --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
36
- --color-sidebar-accent: var(--sidebar-accent);
37
- --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
38
- --color-sidebar-border: var(--sidebar-border);
39
- --color-sidebar-ring: var(--sidebar-ring);
40
-
41
- --container-clamp: 96rem;
42
- --spacing-clamp: calc((100dvw - var(--container-clamp)) / 2);
43
-
44
- --spacing-page-nav: --spacing(18);
45
-
46
- --spacing-section: var(--section-p);
47
- --spacing-section-sm: calc(var(--spacing-section) / 2);
48
- --spacing-section-lg: calc(var(--spacing-section) * 2);
49
- --spacing-section-xl: calc(var(--spacing-section) * 5);
50
-
51
- --spacing-card: var(--card-p);
52
- --spacing-card-sm: calc(var(--spacing-card) / 2);
53
- --spacing-card-lg: calc(var(--spacing-card) * 2);
54
- --spacing-card-xl: calc(var(--spacing-card) * 5);
55
-
56
- --gap-page: var(--page-gap);
57
- --gap-card: var(--card-gap);
58
- --gap-card-area: var(--card-area-gap);
59
- --gap-card-item-group: var(--card-item-group-gap);
60
- }
61
-
62
- :root {
63
- --radius: 0.625rem;
64
- --background: oklch(1 0 0);
65
- --foreground: oklch(0.141 0.005 285.823);
66
- --card: oklch(1 0 0);
67
- --card-foreground: oklch(0.3741 0.0774 245.65);
68
- --popover: oklch(1 0 0);
69
- --popover-foreground: oklch(0.3741 0.0774 245.65);
70
- --primary: oklch(0.3741 0.0774 245.65);
71
- --primary-foreground: oklch(0.985 0 0);
72
- --secondary: oklch(0.5393 0.0909 200);
73
- --secondary-foreground: oklch(0.985 0 0);
74
- --muted: oklch(0.967 0.001 286.375);
75
- --muted-foreground: oklch(0.45 0.0236 285.938);
76
- --accent: oklch(0.967 0.001 286.375);
77
- --accent-foreground: oklch(0.3741 0.0774 245.65);
78
- --destructive: oklch(0.577 0.245 27.325);
79
- --border: oklch(0.92 0.004 286.32);
80
- --input: oklch(0.92 0.004 286.32);
81
- --ring: var(--color-complement-1-200);
82
- --chart-1: oklch(0.646 0.222 41.116);
83
- --chart-2: oklch(0.6 0.118 184.704);
84
- --chart-3: oklch(0.398 0.07 227.392);
85
- --chart-4: oklch(0.828 0.189 84.429);
86
- --chart-5: oklch(0.769 0.188 70.08);
87
- --sidebar: oklch(0.985 0 0);
88
- --sidebar-foreground: oklch(0.3741 0.0774 245.65);
89
- --sidebar-primary: oklch(0.3741 0.0774 245.65);
90
- --sidebar-primary-foreground: oklch(0.985 0 0);
91
- --sidebar-accent: oklch(0.967 0.001 286.375);
92
- --sidebar-accent-foreground: oklch(0.3741 0.0774 245.65);
93
- --sidebar-border: oklch(0.92 0.004 286.32);
94
- --sidebar-ring: var(--color-complement-1-200);
95
-
96
- /* Responsive Layout Spacing */
97
- --section-p: --spacing(4);
98
- --card-p: --spacing(4);
99
- --page-gap: --spacing(0);
100
- --card-gap: --spacing(4);
101
- --card-area-gap: --spacing(4);
102
- --card-item-group-gap: --spacing(2);
103
-
104
- @media (width >= 40rem) {
105
- --section-p: --spacing(8);
106
- --card-p: --spacing(6);
107
- --page-gap: --spacing(4);
108
- --card-gap: --spacing(6);
109
- --card-area-gap: --spacing(6);
110
- --card-item-group-gap: --spacing(2);
111
- }
112
-
113
- @media (width >= 80rem) {
114
- --section-p: --spacing(12);
115
- --card-p: --spacing(6);
116
- --page-gap: --spacing(0);
117
- --card-gap: --spacing(6);
118
- --card-area-gap: --spacing(6);
119
- --card-item-group-gap: --spacing(2);
120
- }
121
- }
122
-
123
- .dark {
124
- --background: oklch(0.141 0.005 285.823);
125
- --foreground: oklch(0.985 0 0);
126
- --card: oklch(0.141 0.005 285.823);
127
- --card-foreground: oklch(0.985 0 0);
128
- --popover: oklch(0.141 0.005 285.823);
129
- --popover-foreground: oklch(0.985 0 0);
130
- --primary: oklch(0.985 0 0);
131
- --primary-foreground: oklch(0.3741 0.0774 245.65);
132
- --secondary: oklch(0.9156 0.0315 200);
133
- --secondary-foreground: oklch(0 0 0);
134
- --muted: oklch(0.274 0.006 286.033);
135
- --muted-foreground: oklch(0.705 0.015 286.067);
136
- --accent: oklch(0.274 0.006 286.033);
137
- --accent-foreground: oklch(0.985 0 0);
138
- --destructive: oklch(0.704 0.191 22.216);
139
- --border: oklch(1 0 0 / 10%);
140
- --input: oklch(1 0 0 / 15%);
141
- --ring: var(--color-complement-1-600);
142
- --chart-1: oklch(0.488 0.243 264.376);
143
- --chart-2: oklch(0.696 0.17 162.48);
144
- --chart-3: oklch(0.769 0.188 70.08);
145
- --chart-4: oklch(0.627 0.265 303.9);
146
- --chart-5: oklch(0.645 0.246 16.439);
147
- --sidebar: oklch(0.3741 0.0774 245.65);
148
- --sidebar-foreground: oklch(0.985 0 0);
149
- --sidebar-primary: oklch(0.3741 0.0774 245.65);
150
- --sidebar-primary-foreground: oklch(0.985 0 0);
151
- --sidebar-accent: oklch(0.274 0.006 286.033);
152
- --sidebar-accent-foreground: oklch(0.985 0 0);
153
- --sidebar-border: oklch(1 0 0 / 10%);
154
- --sidebar-ring: var(--color-complement-1-600);
155
- }
156
-
157
- @layer base {
158
- * {
159
- @apply border-border outline-ring/50;
160
- }
161
- body {
162
- @apply bg-background text-foreground;
163
- }
164
- }
165
-
166
- @utility scrollbar-hidden {
167
- -ms-overflow-style: none;
168
- scrollbar-width: none;
169
- &::-webkit-scrollbar {
170
- display: none;
171
- }
172
- }
173
-
174
- /* prettier-ignore */
175
- @utility areas-* {
176
- grid-template-areas: --value([*]);
177
- grid-template-columns: --modifier([*]);
178
- }
179
-
180
- @utility stick-to-page {
181
- position: sticky;
182
- top: calc(var(--spacing-section) + var(--spacing-page-nav));
183
- height: fit-content;
184
- }
1
+ @custom-variant dark (&:is(.dark *));
2
+
3
+ @theme inline {
4
+ --radius-sm: calc(var(--radius) - 4px);
5
+ --radius-md: calc(var(--radius) - 2px);
6
+ --radius-lg: var(--radius);
7
+ --radius-xl: calc(var(--radius) + 4px);
8
+ --radius-container: var(--radius);
9
+ --color-background: var(--background);
10
+ --color-foreground: var(--foreground);
11
+ --color-card: var(--card);
12
+ --color-card-foreground: var(--card-foreground);
13
+ --color-popover: var(--popover);
14
+ --color-popover-foreground: var(--popover-foreground);
15
+ --color-primary: var(--primary);
16
+ --color-primary-foreground: var(--primary-foreground);
17
+ --color-secondary: var(--secondary);
18
+ --color-secondary-foreground: var(--secondary-foreground);
19
+ --color-muted: var(--muted);
20
+ --color-muted-foreground: var(--muted-foreground);
21
+ --color-accent: var(--accent);
22
+ --color-accent-foreground: var(--accent-foreground);
23
+ --color-destructive: var(--destructive);
24
+ --color-border: var(--border);
25
+ --color-input: var(--input);
26
+ --color-ring: var(--ring);
27
+ --color-chart-1: var(--chart-1);
28
+ --color-chart-2: var(--chart-2);
29
+ --color-chart-3: var(--chart-3);
30
+ --color-chart-4: var(--chart-4);
31
+ --color-chart-5: var(--chart-5);
32
+ --color-sidebar: var(--sidebar);
33
+ --color-sidebar-foreground: var(--sidebar-foreground);
34
+ --color-sidebar-primary: var(--sidebar-primary);
35
+ --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
36
+ --color-sidebar-accent: var(--sidebar-accent);
37
+ --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
38
+ --color-sidebar-border: var(--sidebar-border);
39
+ --color-sidebar-ring: var(--sidebar-ring);
40
+
41
+ --breakpoint-clamp: 100rem;
42
+
43
+ --container-clamp: 96rem;
44
+ --spacing-clamp: calc((100dvw - var(--container-clamp)) / 2);
45
+
46
+ --spacing-page-nav: --spacing(18);
47
+
48
+ --spacing-section: var(--section-p);
49
+ --spacing-section-sm: calc(var(--spacing-section) / 2);
50
+ --spacing-section-lg: calc(var(--spacing-section) * 2);
51
+ --spacing-section-xl: calc(var(--spacing-section) * 5);
52
+
53
+ --spacing-card: var(--card-p);
54
+ --spacing-card-sm: calc(var(--spacing-card) / 2);
55
+ --spacing-card-lg: calc(var(--spacing-card) * 2);
56
+ --spacing-card-xl: calc(var(--spacing-card) * 5);
57
+
58
+ --gap-page: var(--page-gap);
59
+ --gap-card: var(--card-gap);
60
+ --gap-card-area: var(--card-area-gap);
61
+ --gap-card-item-group: var(--card-item-group-gap);
62
+ }
63
+
64
+ :root {
65
+ --radius: 0.625rem;
66
+ --background: oklch(1 0 0);
67
+ --foreground: oklch(0.141 0.005 285.823);
68
+ --card: oklch(1 0 0);
69
+ --card-foreground: oklch(0.3741 0.0774 245.65);
70
+ --popover: oklch(1 0 0);
71
+ --popover-foreground: oklch(0.3741 0.0774 245.65);
72
+ --primary: oklch(0.3741 0.0774 245.65);
73
+ --primary-foreground: oklch(0.985 0 0);
74
+ --secondary: oklch(0.5393 0.0909 200);
75
+ --secondary-foreground: oklch(0.985 0 0);
76
+ --muted: oklch(0.967 0.001 286.375);
77
+ --muted-foreground: oklch(0.45 0.0236 285.938);
78
+ --accent: oklch(0.967 0.001 286.375);
79
+ --accent-foreground: oklch(0.3741 0.0774 245.65);
80
+ --destructive: oklch(0.577 0.245 27.325);
81
+ --border: oklch(0.92 0.004 286.32);
82
+ --input: oklch(0.92 0.004 286.32);
83
+ --ring: var(--color-complement-1-200);
84
+ --chart-1: oklch(0.646 0.222 41.116);
85
+ --chart-2: oklch(0.6 0.118 184.704);
86
+ --chart-3: oklch(0.398 0.07 227.392);
87
+ --chart-4: oklch(0.828 0.189 84.429);
88
+ --chart-5: oklch(0.769 0.188 70.08);
89
+ --sidebar: oklch(0.985 0 0);
90
+ --sidebar-foreground: oklch(0.3741 0.0774 245.65);
91
+ --sidebar-primary: oklch(0.3741 0.0774 245.65);
92
+ --sidebar-primary-foreground: oklch(0.985 0 0);
93
+ --sidebar-accent: oklch(0.967 0.001 286.375);
94
+ --sidebar-accent-foreground: oklch(0.3741 0.0774 245.65);
95
+ --sidebar-border: oklch(0.92 0.004 286.32);
96
+ --sidebar-ring: var(--color-complement-1-200);
97
+
98
+ /* Responsive Layout Spacing */
99
+ --section-p: --spacing(4);
100
+ --card-p: --spacing(4);
101
+ --page-gap: --spacing(0);
102
+ --card-gap: --spacing(4);
103
+ --card-area-gap: --spacing(4);
104
+ --card-item-group-gap: --spacing(2);
105
+
106
+ @media (width >= 40rem) {
107
+ --section-p: --spacing(8);
108
+ --card-p: --spacing(6);
109
+ --page-gap: --spacing(4);
110
+ --card-gap: --spacing(6);
111
+ --card-area-gap: --spacing(6);
112
+ --card-item-group-gap: --spacing(2);
113
+ }
114
+
115
+ @media (width >= 80rem) {
116
+ --section-p: --spacing(12);
117
+ --card-p: --spacing(6);
118
+ --page-gap: --spacing(0);
119
+ --card-gap: --spacing(6);
120
+ --card-area-gap: --spacing(6);
121
+ --card-item-group-gap: --spacing(2);
122
+ }
123
+ }
124
+
125
+ .dark {
126
+ --background: oklch(0.141 0.005 285.823);
127
+ --foreground: oklch(0.985 0 0);
128
+ --card: oklch(0.141 0.005 285.823);
129
+ --card-foreground: oklch(0.985 0 0);
130
+ --popover: oklch(0.141 0.005 285.823);
131
+ --popover-foreground: oklch(0.985 0 0);
132
+ --primary: oklch(0.985 0 0);
133
+ --primary-foreground: oklch(0.3741 0.0774 245.65);
134
+ --secondary: oklch(0.9156 0.0315 200);
135
+ --secondary-foreground: oklch(0 0 0);
136
+ --muted: oklch(0.274 0.006 286.033);
137
+ --muted-foreground: oklch(0.705 0.015 286.067);
138
+ --accent: oklch(0.274 0.006 286.033);
139
+ --accent-foreground: oklch(0.985 0 0);
140
+ --destructive: oklch(0.704 0.191 22.216);
141
+ --border: oklch(1 0 0 / 10%);
142
+ --input: oklch(1 0 0 / 15%);
143
+ --ring: var(--color-complement-1-600);
144
+ --chart-1: oklch(0.488 0.243 264.376);
145
+ --chart-2: oklch(0.696 0.17 162.48);
146
+ --chart-3: oklch(0.769 0.188 70.08);
147
+ --chart-4: oklch(0.627 0.265 303.9);
148
+ --chart-5: oklch(0.645 0.246 16.439);
149
+ --sidebar: oklch(0.3741 0.0774 245.65);
150
+ --sidebar-foreground: oklch(0.985 0 0);
151
+ --sidebar-primary: oklch(0.3741 0.0774 245.65);
152
+ --sidebar-primary-foreground: oklch(0.985 0 0);
153
+ --sidebar-accent: oklch(0.274 0.006 286.033);
154
+ --sidebar-accent-foreground: oklch(0.985 0 0);
155
+ --sidebar-border: oklch(1 0 0 / 10%);
156
+ --sidebar-ring: var(--color-complement-1-600);
157
+ }
158
+
159
+ @layer base {
160
+ * {
161
+ @apply border-border outline-ring/50;
162
+ }
163
+ body {
164
+ @apply bg-background text-foreground;
165
+ }
166
+ }
167
+
168
+ @utility scrollbar-hidden {
169
+ -ms-overflow-style: none;
170
+ scrollbar-width: none;
171
+ &::-webkit-scrollbar {
172
+ display: none;
173
+ }
174
+ }
175
+
176
+ /* prettier-ignore */
177
+ @utility areas-* {
178
+ grid-template-areas: --value([*]);
179
+ grid-template-columns: --modifier([*]);
180
+ }
181
+
182
+ @utility stick-to-page {
183
+ position: sticky;
184
+ top: calc(var(--spacing-section) + var(--spacing-page-nav));
185
+ height: fit-content;
186
+ }