@mantis-core/styles 0.1.0

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 (14) hide show
  1. package/README.md +21 -0
  2. package/package.json +26 -0
  3. package/scss/buttons.scss +237 -0
  4. package/scss/ckeditor.scss +191 -0
  5. package/scss/date-picker.scss +73 -0
  6. package/scss/gallery.scss +0 -0
  7. package/scss/index.scss +11 -0
  8. package/scss/inputs.scss +77 -0
  9. package/scss/paginator.scss +59 -0
  10. package/scss/rich-text-preview.scss +287 -0
  11. package/scss/select-button.scss +110 -0
  12. package/scss/select.scss +177 -0
  13. package/scss/switch.scss +180 -0
  14. package/scss/table.scss +228 -0
package/scss/switch.scss ADDED
@@ -0,0 +1,180 @@
1
+ /* Bootstrap Switch Component Styles */
2
+ /* Based on Bootstrap Toggle: http://www.bootstraptoggle.com/ */
3
+
4
+ .bootstrap-switch-wrapper {
5
+ display: inline-block;
6
+ cursor: pointer;
7
+ border-radius: 4px;
8
+ border: 1px solid var(--border);
9
+ position: relative;
10
+ text-align: left;
11
+ overflow: hidden;
12
+ line-height: 8px;
13
+ user-select: none;
14
+ vertical-align: middle;
15
+ transition:
16
+ border-color ease-in-out 0.15s,
17
+ box-shadow ease-in-out 0.15s;
18
+
19
+ &:focus {
20
+ outline: 2px solid var(--ring);
21
+ outline-offset: 2px;
22
+ }
23
+
24
+ &.bootstrap-switch-disabled {
25
+ opacity: 0.5;
26
+ cursor: not-allowed;
27
+ pointer-events: none;
28
+ }
29
+ }
30
+
31
+ .bootstrap-switch-container {
32
+ display: inline-flex;
33
+ position: relative;
34
+ transition: margin-left 0.2s ease-in-out;
35
+ width: 200%;
36
+
37
+ .bootstrap-switch-off & {
38
+ margin-left: -100%;
39
+ }
40
+ }
41
+
42
+ .bootstrap-switch-handle-on,
43
+ .bootstrap-switch-handle-off,
44
+ .bootstrap-switch-label {
45
+ display: inline-flex;
46
+ align-items: center;
47
+ justify-content: center;
48
+ padding: 6px 12px;
49
+ font-size: 14px;
50
+ line-height: 20px;
51
+ color: white;
52
+ font-weight: 500;
53
+ width: 50%;
54
+ box-sizing: border-box;
55
+ white-space: nowrap;
56
+ }
57
+
58
+ .bootstrap-switch-handle-on {
59
+ border-radius: 4px 0 0 4px;
60
+ }
61
+
62
+ .bootstrap-switch-handle-off {
63
+ border-radius: 0 4px 4px 0;
64
+ }
65
+
66
+ .bootstrap-switch-label {
67
+ background-color: var(--card);
68
+ padding: 6px 4px;
69
+ color: transparent;
70
+ }
71
+
72
+ /* Animate transition */
73
+ .bootstrap-switch-animate .bootstrap-switch-container {
74
+ transition: margin-left 0.2s ease-in-out;
75
+ }
76
+
77
+ /* Color Styles — backed by globals.scss tokens; rebranding only requires changing the CSS variables */
78
+ .bootstrap-switch-primary {
79
+ background-color: var(--primary);
80
+ color: var(--primary-foreground);
81
+ }
82
+
83
+ .bootstrap-switch-secondary {
84
+ background-color: var(--secondary);
85
+ color: var(--secondary-foreground);
86
+ }
87
+
88
+ .bootstrap-switch-success {
89
+ background-color: var(--success);
90
+ color: var(--success-foreground);
91
+ }
92
+
93
+ // "danger" maps to the semantic --error token
94
+ .bootstrap-switch-danger {
95
+ background-color: var(--error);
96
+ color: var(--error-foreground);
97
+ }
98
+
99
+ .bootstrap-switch-warning {
100
+ background-color: var(--warning);
101
+ color: var(--warning-foreground);
102
+ }
103
+
104
+ .bootstrap-switch-info {
105
+ background-color: var(--info);
106
+ color: var(--info-foreground);
107
+ }
108
+
109
+ .bootstrap-switch-dark {
110
+ background-color: var(--foreground);
111
+ color: var(--background);
112
+ }
113
+
114
+ .bootstrap-switch-light {
115
+ background-color: var(--muted);
116
+ color: var(--muted-foreground);
117
+ }
118
+
119
+ /* Size Variations */
120
+ .bootstrap-switch-xs {
121
+ font-size: 10px;
122
+ min-width: 50px;
123
+
124
+ .bootstrap-switch-handle-on,
125
+ .bootstrap-switch-handle-off,
126
+ .bootstrap-switch-label {
127
+ padding: 1px 5px;
128
+ font-size: 10px;
129
+ line-height: 16px;
130
+ }
131
+ }
132
+
133
+ .bootstrap-switch-sm {
134
+ font-size: 12px;
135
+ min-width: 70px;
136
+
137
+ .bootstrap-switch-handle-on,
138
+ .bootstrap-switch-handle-off,
139
+ .bootstrap-switch-label {
140
+ padding: 3px 8px;
141
+ font-size: 12px;
142
+ line-height: 18px;
143
+ }
144
+ }
145
+
146
+ .bootstrap-switch-md {
147
+ font-size: 14px;
148
+ min-width: 90px;
149
+
150
+ .bootstrap-switch-handle-on,
151
+ .bootstrap-switch-handle-off,
152
+ .bootstrap-switch-label {
153
+ padding: 6px 12px;
154
+ font-size: 14px;
155
+ line-height: 20px;
156
+ }
157
+ }
158
+
159
+ .bootstrap-switch-lg {
160
+ font-size: 18px;
161
+ min-width: 120px;
162
+
163
+ .bootstrap-switch-handle-on,
164
+ .bootstrap-switch-handle-off,
165
+ .bootstrap-switch-label {
166
+ padding: 10px 16px;
167
+ font-size: 18px;
168
+ line-height: 24px;
169
+ }
170
+ }
171
+
172
+ /* Dark Mode Support — all values now resolved from CSS tokens automatically */
173
+ .dark {
174
+ .bootstrap-switch-wrapper {
175
+ border-color: var(--border);
176
+ }
177
+
178
+ // .bootstrap-switch-label and .bootstrap-switch-light already use tokens;
179
+ // no overrides needed here anymore.
180
+ }
package/scss/table.scss ADDED
@@ -0,0 +1,228 @@
1
+ .atlas-table {
2
+ background-color: var(--card);
3
+ overflow: hidden;
4
+
5
+ .p-datatable-header {
6
+ background: linear-gradient(
7
+ 90deg,
8
+ color-mix(in oklch, var(--primary), white 90%),
9
+ color-mix(in oklch, var(--accent), white 92%)
10
+ );
11
+ border: 0;
12
+ border-bottom: 1px solid color-mix(in oklch, var(--border), var(--foreground) 12%);
13
+ padding: 0.85rem 1rem;
14
+ text-align: center !important;
15
+ }
16
+
17
+ .p-datatable-thead > tr > th {
18
+ background-color: color-mix(in oklch, var(--card), var(--background) 45%);
19
+ border-color: color-mix(in oklch, var(--border), var(--foreground) 10%);
20
+ color: color-mix(in oklch, var(--foreground), black 12%);
21
+ font-size: 0.75rem;
22
+ font-weight: 700;
23
+ letter-spacing: 0.04em;
24
+ padding: 0.75rem 0.9rem;
25
+ text-transform: uppercase;
26
+ }
27
+
28
+ .p-column-header-content {
29
+ justify-content: flex-start;
30
+ text-align: center !important;
31
+ }
32
+
33
+ .p-sortable-column:focus-visible,
34
+ .p-sortable-column.p-focus {
35
+ box-shadow: inset 0 0 0 2px color-mix(in oklch, var(--ring), transparent 35%);
36
+ outline: none;
37
+ }
38
+
39
+ .p-datatable-tbody > tr > td {
40
+ border-color: color-mix(in oklch, var(--border), var(--foreground) 7%);
41
+ color: color-mix(in oklch, var(--foreground), black 7%);
42
+ font-size: 0.875rem;
43
+ line-height: 1.35;
44
+ padding: 0.7rem 0.9rem;
45
+ vertical-align: middle;
46
+ }
47
+
48
+ .p-datatable-tbody > tr:nth-child(even) {
49
+ background-color: color-mix(in oklch, var(--muted), white 42%);
50
+ }
51
+
52
+ .p-datatable-tbody > tr:hover {
53
+ background-color: color-mix(in oklch, var(--primary), white 94%);
54
+ }
55
+
56
+ .p-datatable-tbody > tr.p-highlight {
57
+ background-color: color-mix(in oklch, var(--accent), white 86%);
58
+ color: inherit;
59
+ }
60
+
61
+ .p-datatable-tbody > tr > td.p-datatable-emptymessage {
62
+ color: var(--muted-foreground);
63
+ font-size: 0.9rem;
64
+ font-weight: 500;
65
+ padding: 1.5rem;
66
+ text-align: center;
67
+ }
68
+
69
+ .p-paginator {
70
+ background-color: color-mix(in oklch, var(--card), var(--background) 30%);
71
+ border: 0;
72
+ border-top: 1px solid color-mix(in oklch, var(--border), var(--foreground) 8%);
73
+ padding: 0.5rem 0.75rem;
74
+ }
75
+
76
+ .p-paginator .p-paginator-pages .p-paginator-page.p-highlight {
77
+ background-color: color-mix(in oklch, var(--primary), white 88%);
78
+ border-color: color-mix(in oklch, var(--primary), white 65%);
79
+ color: color-mix(in oklch, var(--primary), black 20%);
80
+ }
81
+
82
+ .p-button:focus-visible {
83
+ box-shadow: 0 0 0 0.18rem color-mix(in oklch, var(--ring), transparent 50%);
84
+ outline: none;
85
+ }
86
+ }
87
+
88
+ .atlas-table-toolbar {
89
+ align-items: center;
90
+ display: flex;
91
+ flex-wrap: wrap;
92
+ gap: 0.75rem 1rem;
93
+ justify-content: space-between;
94
+ }
95
+
96
+ .atlas-table-toolbar__copy {
97
+ min-width: 12rem;
98
+ }
99
+
100
+ .atlas-table-toolbar__actions {
101
+ align-items: center;
102
+ display: flex;
103
+ flex-wrap: wrap;
104
+ gap: 0.5rem;
105
+ }
106
+
107
+ .atlas-table-toolbar__title {
108
+ color: color-mix(in oklch, var(--foreground), black 16%);
109
+ font-size: 0.95rem;
110
+ font-weight: 700;
111
+ line-height: 1.2;
112
+ margin: 0;
113
+ }
114
+
115
+ .atlas-table-toolbar__meta {
116
+ color: var(--muted-foreground);
117
+ font-size: 0.78rem;
118
+ font-weight: 500;
119
+ margin: 0.2rem 0 0;
120
+ }
121
+
122
+ .atlas-table-filters {
123
+ display: grid;
124
+ gap: 0.75rem;
125
+ grid-template-columns: 1fr;
126
+ }
127
+
128
+ .atlas-table-filters__field {
129
+ display: grid;
130
+ gap: 0.35rem;
131
+ }
132
+
133
+ .atlas-table-filters__label {
134
+ color: color-mix(in oklch, var(--foreground), black 10%);
135
+ font-size: 0.76rem;
136
+ font-weight: 600;
137
+ letter-spacing: 0.01em;
138
+ }
139
+
140
+ .atlas-table__index-cell {
141
+ color: color-mix(in oklch, var(--foreground), black 12%);
142
+ font-variant-numeric: tabular-nums;
143
+ font-weight: 700;
144
+ text-align: center;
145
+ width: 100%;
146
+ }
147
+
148
+ .atlas-table__cell--numeric {
149
+ font-variant-numeric: tabular-nums;
150
+ font-weight: 600;
151
+ text-align: right;
152
+ }
153
+
154
+ .atlas-table__cell--status {
155
+ text-align: center;
156
+ }
157
+
158
+ .atlas-table__cell--title {
159
+ font-weight: 600;
160
+ }
161
+
162
+ .atlas-table__text--truncate {
163
+ display: block;
164
+ max-width: 16rem;
165
+ overflow: hidden;
166
+ text-overflow: ellipsis;
167
+ white-space: nowrap;
168
+ }
169
+
170
+ .atlas-table__badge {
171
+ border: 1px solid transparent;
172
+ border-radius: 999px;
173
+ display: inline-flex;
174
+ font-size: 0.75rem;
175
+ font-weight: 700;
176
+ justify-content: center;
177
+ min-width: 5.9rem;
178
+ padding: 0.24rem 0.6rem;
179
+ }
180
+
181
+ .atlas-table__badge--success {
182
+ background-color: color-mix(in oklch, var(--success), white 86%);
183
+ border-color: color-mix(in oklch, var(--success), white 62%);
184
+ color: color-mix(in oklch, var(--success), black 20%);
185
+ }
186
+
187
+ .atlas-table__badge--muted {
188
+ background-color: color-mix(in oklch, var(--muted), white 35%);
189
+ border-color: color-mix(in oklch, var(--border), var(--foreground) 6%);
190
+ color: color-mix(in oklch, var(--foreground), white 28%);
191
+ }
192
+
193
+ .atlas-table__badge--warning {
194
+ background-color: color-mix(in oklch, var(--warning), white 84%);
195
+ border-color: color-mix(in oklch, var(--warning), white 60%);
196
+ color: color-mix(in oklch, var(--warning), black 24%);
197
+ }
198
+
199
+ .atlas-table__badge--info {
200
+ background-color: color-mix(in oklch, var(--info), white 84%);
201
+ border-color: color-mix(in oklch, var(--info), white 60%);
202
+ color: color-mix(in oklch, var(--info), black 24%);
203
+ }
204
+
205
+ .atlas-table__badge--danger {
206
+ background-color: color-mix(in oklch, var(--error), white 84%);
207
+ border-color: color-mix(in oklch, var(--error), white 60%);
208
+ color: color-mix(in oklch, var(--error), black 24%);
209
+ }
210
+
211
+ @media (max-width: 768px) {
212
+ .atlas-table .p-datatable-thead > tr > th,
213
+ .atlas-table .p-datatable-tbody > tr > td {
214
+ padding: 0.6rem 0.65rem;
215
+ }
216
+
217
+ .atlas-table-toolbar {
218
+ align-items: flex-start;
219
+ }
220
+
221
+ .atlas-table__text--truncate {
222
+ max-width: 10rem;
223
+ }
224
+
225
+ .atlas-table__badge {
226
+ min-width: 5.2rem;
227
+ }
228
+ }