@enso-ui/themes 3.3.1 → 3.3.7

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.
@@ -0,0 +1,178 @@
1
+ @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&family=Muli:wght@500;800&display=swap');
2
+
3
+ :root {
4
+ --bulma-family-primary: "Montserrat", "Inter", "SF Pro", "Segoe UI", "Roboto", "Oxygen", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
5
+ --bulma-family-secondary: "Muli", var(--bulma-family-primary);
6
+ --bulma-body-family: var(--bulma-family-primary);
7
+ --bulma-label-weight: var(--bulma-weight-normal);
8
+ --bulma-button-weight: var(--bulma-weight-normal);
9
+ --bulma-control-padding-vertical: calc(0.25em - 1px);
10
+ --bulma-control-padding-horizontal: calc(0.5em - 1px);
11
+ --bulma-button-padding-vertical: 0.25em;
12
+ --bulma-button-padding-horizontal: 0.625em;
13
+ --bulma-box-shadow: 0 0.05em 0.15em 0.1em rgba(10, 10, 10, 0.15);
14
+ --bulma-card-shadow: 0 0.05em 0.15em 0.1em rgba(10, 10, 10, 0.15);
15
+ --bulma-card-header-shadow: 0 0.1em 0.1em rgba(10, 10, 10, 0.15);
16
+ --bulma-menu-label-font-size: 0.85em;
17
+
18
+ --enso-sidebar-width: 12rem;
19
+ --enso-sidebar-collapsed-width: 3.5rem;
20
+
21
+ --bulma-navbar-height: 3.25rem;
22
+ --bulma-control-height: 2.125rem;
23
+ --bulma-radius-small: 0.2rem;
24
+ --bulma-radius: 0.4rem;
25
+ --bulma-radius-large: 0.6rem;
26
+ }
27
+
28
+ .vue-form .label {
29
+ font-weight: var(--bulma-label-weight);
30
+ }
31
+
32
+ @mixin enso-shared-bulma-bridge {
33
+ --bulma-footer-background-color: var(--enso-shell-surface);
34
+ --bulma-border: var(--enso-surface-border);
35
+ --bulma-scheme-main: var(--enso-shell-surface);
36
+ --bulma-scheme-main-bis: var(--enso-shell-surface);
37
+ --bulma-box-background-color: var(--enso-surface);
38
+ --bulma-card-background-color: var(--bulma-box-background-color);
39
+ --bulma-card-content-background-color: var(--bulma-card-background-color);
40
+ --bulma-card-footer-background-color: var(--bulma-card-header-background-color);
41
+ --bulma-card-footer-border-top: 1px solid var(--enso-surface-border);
42
+ --bulma-card-header-shadow: none;
43
+
44
+ --bulma-navbar-background-color: var(--enso-shell-surface);
45
+ --bulma-navbar-item-hover-color: var(--bulma-text-strong);
46
+ --bulma-navbar-item-active-color: var(--bulma-link);
47
+ --bulma-navbar-item-hover-background-color: var(--enso-shell-surface);
48
+ --bulma-navbar-item-active-background-color: color-mix(in srgb, var(--bulma-link) 12%, var(--enso-shell-surface));
49
+ --bulma-navbar-dropdown-background-color: var(--enso-shell-surface);
50
+ --bulma-navbar-dropdown-item-hover-color: var(--bulma-text-strong);
51
+ --bulma-navbar-dropdown-item-active-color: var(--bulma-link);
52
+
53
+ --bulma-dropdown-content-background-color: var(--enso-surface);
54
+ --bulma-dropdown-item-color: var(--bulma-text);
55
+ --bulma-dropdown-item-hover-color: var(--bulma-text-strong);
56
+
57
+ --bulma-button-color: var(--bulma-text);
58
+ --bulma-button-border-color: var(--bulma-border);
59
+ --bulma-button-focus-border-color: var(--bulma-border-active);
60
+ --bulma-button-focus-box-shadow-color: transparent;
61
+ --bulma-button-active-border-color: var(--bulma-border-active);
62
+
63
+ --bulma-input-background-color: var(--enso-surface);
64
+ --bulma-input-color: var(--bulma-text-strong);
65
+ --bulma-input-border-color: var(--bulma-border);
66
+ --bulma-input-hover-color: var(--bulma-text-strong);
67
+ --bulma-input-hover-border-color: var(--bulma-border-hover);
68
+ --bulma-input-focus-border-color: var(--bulma-border-active);
69
+ --bulma-input-focus-shadow-alpha: 0;
70
+ --bulma-input-icon-color: var(--bulma-text-light);
71
+ --bulma-input-icon-active-color: var(--bulma-text-strong);
72
+
73
+ --bulma-file-cta-background-color: var(--bulma-input-background-color);
74
+ --bulma-file-cta-color: var(--bulma-text);
75
+ --bulma-file-cta-active-color: var(--bulma-text-strong);
76
+ --bulma-file-cta-hover-color: var(--bulma-file-cta-active-color);
77
+
78
+ --bulma-table-color: var(--bulma-text);
79
+ --bulma-table-head-color: var(--bulma-text-strong);
80
+ --bulma-table-background-color: var(--bulma-box-background-color);
81
+ --bulma-table-cell-border-color: var(--enso-surface-border);
82
+
83
+ --bulma-pagination-color: var(--bulma-text);
84
+ --bulma-pagination-border-color: var(--bulma-border);
85
+ --bulma-pagination-current-background-color: var(--bulma-primary);
86
+ --bulma-pagination-current-border-color: var(--bulma-primary);
87
+ --bulma-pagination-current-color: var(--bulma-primary-invert);
88
+
89
+ --bulma-tabs-toggle-link-active-color: var(--bulma-text-strong);
90
+ }
91
+
92
+ @mixin enso-light-theme-vars {
93
+ --enso-shell-surface: #ffffff;
94
+ --enso-surface: #ffffff;
95
+ --enso-surface-border: #d9e1ec;
96
+
97
+ --enso-table-toolbar-surface: #ffffff;
98
+ --enso-filter-surface: #ffffff;
99
+ --enso-filter-control-surface: #f8fafc;
100
+
101
+ --enso-filter-active-color: #c95b16;
102
+ --enso-filter-active-surface: #fff1eb;
103
+ --enso-filter-active-border: #f4b99a;
104
+ --enso-control-highlight-border: var(--bulma-border-active);
105
+
106
+ --enso-tooltip-background: var(--enso-surface);
107
+ --enso-tooltip-color: var(--bulma-text);
108
+ --enso-tooltip-border-color: var(--enso-surface-border);
109
+
110
+ --bulma-text: #1f2937;
111
+ --bulma-text-strong: #111827;
112
+ --bulma-text-light: #6b7280;
113
+ --bulma-scheme-main-ter: #f3f6fa;
114
+ --bulma-scheme-invert: #111827;
115
+
116
+ --bulma-body-background-color: #eef2f7;
117
+ --bulma-navbar-item-color: #111827;
118
+ --bulma-card-header-background-color: #f8fafc;
119
+ --bulma-button-background-color: var(--bulma-card-header-background-color);
120
+ --bulma-table-row-hover-background-color: #f3f6fa;
121
+ --bulma-table-striped-row-even-background-color: #fbfcfe;
122
+ }
123
+
124
+ @mixin enso-dark-theme-vars {
125
+ --enso-shell-surface: #151922;
126
+ --enso-surface: #181e28;
127
+ --enso-surface-border: #344052;
128
+
129
+ --enso-table-toolbar-surface: #212938;
130
+ --enso-filter-surface: #1d2431;
131
+ --enso-filter-control-surface: #181e28;
132
+
133
+ --enso-filter-active-color: #ff8e57;
134
+ --enso-filter-active-surface: #3a241d;
135
+ --enso-filter-active-border: #7a4632;
136
+ --enso-control-highlight-border: var(--bulma-border-active);
137
+
138
+ --enso-tooltip-background: var(--enso-surface);
139
+ --enso-tooltip-color: var(--bulma-text);
140
+ --enso-tooltip-border-color: var(--enso-surface-border);
141
+
142
+ --bulma-text: #d7deea;
143
+ --bulma-text-strong: #f3f6fb;
144
+ --bulma-text-light: #94a3b8;
145
+ --bulma-scheme-main-ter: #10151d;
146
+ --bulma-scheme-invert: var(--bulma-text-strong);
147
+
148
+ --bulma-body-background-color: #0f131a;
149
+ --bulma-navbar-item-color: #e5ebf3;
150
+ --bulma-card-header-background-color: var(--enso-filter-surface);
151
+ --bulma-button-background-color: var(--enso-table-toolbar-surface);
152
+ --bulma-table-row-hover-background-color: var(--enso-table-toolbar-surface);
153
+ --bulma-table-striped-row-even-background-color: color-mix(in srgb, var(--enso-table-toolbar-surface) 88%, transparent);
154
+ }
155
+
156
+ [data-theme='light'] {
157
+ @include enso-light-theme-vars;
158
+ @include enso-shared-bulma-bridge;
159
+ }
160
+
161
+ [data-theme='dark'] {
162
+ @include enso-dark-theme-vars;
163
+ @include enso-shared-bulma-bridge;
164
+ }
165
+
166
+ @media (prefers-color-scheme: light) {
167
+ html:not([data-theme]) {
168
+ @include enso-light-theme-vars;
169
+ @include enso-shared-bulma-bridge;
170
+ }
171
+ }
172
+
173
+ @media (prefers-color-scheme: dark) {
174
+ html:not([data-theme]) {
175
+ @include enso-dark-theme-vars;
176
+ @include enso-shared-bulma-bridge;
177
+ }
178
+ }
@@ -0,0 +1,287 @@
1
+ $timeline-marker-size: 12px !default;
2
+ $timeline-marker-color: var(--enso-timeline-marker-bg, var(--bulma-border, #dbdbdb)) !default;
3
+ $timeline-marker-icon-size: 24px !default;
4
+ $timeline-marker-border-size: 1px !default;
5
+ $timeline-marker-border: $timeline-marker-border-size solid $timeline-marker-color !default;
6
+ $timeline-line-color: var(--enso-timeline-line-color, var(--bulma-border, #dbdbdb)) !default;
7
+ $timeline-line-width: 1px !default;
8
+ $timeline-line-style: solid !default;
9
+ $timeline-line: $timeline-line-width $timeline-line-style $timeline-line-color !default;
10
+ $timeline-content-padding: 1em 0 0 2em !default;
11
+ $timeline-rtl-content-padding: 1em 2em 0 0 !default;
12
+ $timeline-icon-size: .75rem !default;
13
+ $timeline-header-width: 4em !default;
14
+ $timeline-item-padding-left: calc($timeline-header-width / 2) !default;
15
+ $timeline-item-padding-bottom: 2em !default;
16
+ $dimensions: 16 24 32 48 64 96 128 !default;
17
+
18
+ $timeline-colors: (
19
+ 'muted': (var(--enso-timeline-marker-bg, var(--bulma-border, #dbdbdb)), var(--enso-timeline-marker-fg, var(--bulma-text-strong, #363636))),
20
+ 'primary': (var(--bulma-primary), var(--bulma-primary-invert, #fff)),
21
+ 'link': (var(--bulma-link), var(--bulma-link-invert, #fff)),
22
+ 'info': (var(--bulma-info), var(--bulma-info-invert, #fff)),
23
+ 'success': (var(--bulma-success), var(--bulma-success-invert, #fff)),
24
+ 'warning': (var(--bulma-warning), var(--bulma-warning-invert, #fff)),
25
+ 'danger': (var(--bulma-danger), var(--bulma-danger-invert, #fff)),
26
+ ) !default;
27
+
28
+ .timeline {
29
+ display: flex;
30
+ flex-direction: column;
31
+
32
+ .timeline-header {
33
+ width: $timeline-header-width;
34
+ min-width: $timeline-header-width;
35
+ max-width: $timeline-header-width * 2;
36
+ word-wrap: normal;
37
+ text-align: center;
38
+ display: flex;
39
+ justify-content: center;
40
+ }
41
+
42
+ .timeline-item {
43
+ display: flex;
44
+ position: relative;
45
+ margin-left: $timeline-item-padding-left;
46
+ padding-bottom: $timeline-item-padding-bottom;
47
+
48
+ &::before {
49
+ content: '';
50
+ background-color: $timeline-line-color;
51
+ display: block;
52
+ width: $timeline-line-width;
53
+ height: 100%;
54
+ position: absolute;
55
+ left: -($timeline-line-width / 2);
56
+ top: 0;
57
+ }
58
+
59
+ .timeline-marker {
60
+ position: absolute;
61
+ background: $timeline-marker-color;
62
+ border: $timeline-marker-border;
63
+ border-radius: 100%;
64
+ display: block;
65
+ height: $timeline-marker-size;
66
+ transform: translateX(-50%);
67
+ top: 1.2rem;
68
+ width: $timeline-marker-size;
69
+
70
+ &.is-image {
71
+ @each $dimension in $dimensions {
72
+ &.is-#{$dimension}x#{$dimension} {
73
+ height: #{$dimension}px;
74
+ width: #{$dimension}px;
75
+ }
76
+ }
77
+
78
+ background: $timeline-marker-color;
79
+ border: $timeline-marker-border;
80
+ border-radius: 100%;
81
+ display: block;
82
+ overflow: hidden;
83
+ }
84
+
85
+ &.is-icon {
86
+ display: flex;
87
+ align-items: center;
88
+ justify-content: center;
89
+ height: $timeline-marker-icon-size;
90
+ width: $timeline-marker-icon-size;
91
+ background: $timeline-marker-color;
92
+ border: $timeline-marker-border;
93
+ border-radius: 100%;
94
+ padding: .5rem;
95
+
96
+ > * {
97
+ font-size: $timeline-icon-size !important;
98
+ }
99
+ }
100
+
101
+ &.is-outlined {
102
+ .image {
103
+ background: var(--enso-timeline-surface, var(--bulma-scheme-main, #fff));
104
+ }
105
+
106
+ &.is-icon {
107
+ background: var(--enso-timeline-surface, var(--bulma-scheme-main, #fff));
108
+
109
+ > * {
110
+ color: $timeline-marker-color;
111
+ }
112
+ }
113
+ }
114
+
115
+ @each $name, $pair in $timeline-colors {
116
+ $color: nth($pair, 1);
117
+ $color-invert: nth($pair, 2);
118
+
119
+ &.is-#{$name} {
120
+ background-color: $color !important;
121
+ border-color: $color !important;
122
+
123
+ .image {
124
+ border-color: $color !important;
125
+ }
126
+
127
+ &.is-icon {
128
+ background-color: $color !important;
129
+ border-color: $color !important;
130
+
131
+ > * {
132
+ color: $color-invert !important;
133
+ }
134
+ }
135
+
136
+ &.is-outlined {
137
+ background-color: var(--enso-timeline-surface, var(--bulma-scheme-main, #fff)) !important;
138
+ border-color: $color !important;
139
+
140
+ .image {
141
+ background-color: var(--enso-timeline-surface, var(--bulma-scheme-main, #fff)) !important;
142
+ }
143
+
144
+ &.is-icon {
145
+ background-color: var(--enso-timeline-surface, var(--bulma-scheme-main, #fff)) !important;
146
+
147
+ > * {
148
+ color: $color !important;
149
+ }
150
+ }
151
+ }
152
+ }
153
+ }
154
+ }
155
+
156
+ .timeline-content {
157
+ padding: $timeline-content-padding;
158
+
159
+ .heading {
160
+ font-weight: 600;
161
+ }
162
+ }
163
+
164
+ @each $name, $pair in $timeline-colors {
165
+ $color: nth($pair, 1);
166
+
167
+ &.is-#{$name} {
168
+ &::before {
169
+ background-color: $color;
170
+ }
171
+ }
172
+ }
173
+ }
174
+
175
+ &.is-centered {
176
+ .timeline-header {
177
+ display: flex;
178
+ width: 100%;
179
+ align-self: center;
180
+ }
181
+
182
+ .timeline-item {
183
+ width: 50%;
184
+ align-self: flex-end;
185
+ flex-direction: row;
186
+
187
+ &:nth-of-type(2n) {
188
+ align-self: flex-start;
189
+ flex-direction: row-reverse;
190
+ margin-left: 0;
191
+ margin-right: $timeline-item-padding-left;
192
+
193
+ &::before {
194
+ right: -($timeline-line-width / 2);
195
+ left: auto;
196
+ }
197
+
198
+ .timeline-marker {
199
+ transform: translateX(50%);
200
+ }
201
+
202
+ .timeline-content {
203
+ padding: $timeline-rtl-content-padding;
204
+ text-align: right;
205
+ display: flex;
206
+ flex-direction: column;
207
+ align-items: flex-end;
208
+ flex-basis: 100%;
209
+ }
210
+ }
211
+
212
+ &:nth-of-type(2n + 1) {
213
+ &::before {
214
+ content: '';
215
+ background-color: $timeline-line-color;
216
+ display: block;
217
+ width: $timeline-line-width;
218
+ height: 100%;
219
+ position: absolute;
220
+ top: 0;
221
+ }
222
+ }
223
+
224
+ @each $name, $pair in $timeline-colors {
225
+ $color: nth($pair, 1);
226
+
227
+ &.is-#{$name} {
228
+ &::before {
229
+ background-color: $color;
230
+ }
231
+ }
232
+ }
233
+ }
234
+ }
235
+
236
+ &.is-rtl {
237
+ justify-content: flex-end;
238
+ align-items: flex-end;
239
+
240
+ .timeline-item {
241
+ justify-content: flex-end;
242
+ flex-direction: row;
243
+ border-left: none;
244
+ margin-left: 0;
245
+ margin-right: calc($timeline-header-width / 2);
246
+
247
+ &::before {
248
+ right: 0;
249
+ left: auto;
250
+ }
251
+
252
+ .timeline-marker {
253
+ transform: translateX(50%);
254
+
255
+ &.is-image {
256
+ @each $dimension in $dimensions {
257
+ &.is-#{$dimension}x#{$dimension} {
258
+ transform: translateX(50%);
259
+ }
260
+ }
261
+ }
262
+ }
263
+
264
+ .timeline-content {
265
+ padding: $timeline-rtl-content-padding;
266
+ text-align: right;
267
+ }
268
+ }
269
+ }
270
+
271
+ &.no-headers {
272
+ .timeline-item {
273
+ &.is-first {
274
+ &::before {
275
+ height: calc(100% - 1.2rem);
276
+ top: 1.2rem;
277
+ }
278
+ }
279
+
280
+ &.is-last {
281
+ &::before {
282
+ height: 1.2rem;
283
+ }
284
+ }
285
+ }
286
+ }
287
+ }
@@ -1 +1,2 @@
1
- @use 'bulma-extensions/bulma-timeline/dist/css/bulma-timeline.min'
1
+ @use "./bridge"
2
+ @use "./components/timeline"
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@enso-ui/themes",
3
- "version": "3.3.1",
3
+ "version": "3.3.7",
4
4
  "description": "Enso UI Themes",
5
5
  "main": "src/bulma/register.js",
6
6
  "repository": {
@@ -24,7 +24,6 @@
24
24
  "@fortawesome/free-solid-svg-icons": "^7.2.0",
25
25
  "@fortawesome/vue-fontawesome": "3.1.3",
26
26
  "bulma": "^1.0.0",
27
- "bulma-extensions": "^6.2.7",
28
27
  "flatpickr": "^4.6.13",
29
28
  "pinia": "^3.0.0",
30
29
  "vue": "^3.0"