@enso-ui/themes 3.1.0 → 3.2.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.
package/LICENSE CHANGED
@@ -1,6 +1,6 @@
1
1
  MIT License
2
2
 
3
- Copyright (c) 2017 laravel-enso
3
+ Copyright (c) 2026 laravel-enso
4
4
 
5
5
  Permission is hereby granted, free of charge, to any person obtaining a copy
6
6
  of this software and associated documentation files (the "Software"), to deal
package/README.md CHANGED
@@ -28,4 +28,4 @@ Thank you to all the people who already contributed to Enso!
28
28
 
29
29
  ## License
30
30
 
31
- [ISC](https://opensource.org/licenses/ISC)
31
+ [MIT](https://opensource.org/licenses/MIT)
@@ -1,16 +1,16 @@
1
1
  .box.info-box {
2
- border-top: 2px solid $light;
3
- transition: border-color .75s ease, box-shadow 0.3s ease-in-out;
2
+ border-top: 2px solid var(--bulma-border);
3
+ transition: border-color .2s ease;
4
4
  position: relative;
5
5
 
6
6
  .box-header {
7
7
  border-radius: inherit;
8
8
  }
9
9
 
10
- @each $name, $pair in $colors {
11
- $color: nth($pair, 1);
12
- &.is-#{$name} {
13
- border-color: $color;
14
- }
15
- }
16
- }
10
+ &.is-primary { border-color: var(--bulma-primary); }
11
+ &.is-link { border-color: var(--bulma-link); }
12
+ &.is-info { border-color: var(--bulma-info); }
13
+ &.is-success { border-color: var(--bulma-success); }
14
+ &.is-warning { border-color: var(--bulma-warning); }
15
+ &.is-danger { border-color: var(--bulma-danger); }
16
+ }
@@ -1,11 +1,11 @@
1
1
  .card.info-card {
2
- border-top: 2px solid $light;
3
- transition: border-color .75s ease, box-shadow 0.3s ease-in-out;
2
+ border-top: 2px solid var(--bulma-border);
3
+ transition: border-color .2s ease;
4
4
 
5
- @each $name, $pair in $colors {
6
- $color: nth($pair, 1);
7
- &.is-#{$name} {
8
- border-color: $color;
9
- }
10
- }
11
- }
5
+ &.is-primary { border-color: var(--bulma-primary); }
6
+ &.is-link { border-color: var(--bulma-link); }
7
+ &.is-info { border-color: var(--bulma-info); }
8
+ &.is-success { border-color: var(--bulma-success); }
9
+ &.is-warning { border-color: var(--bulma-warning); }
10
+ &.is-danger { border-color: var(--bulma-danger); }
11
+ }
@@ -1,40 +1,39 @@
1
1
  .vue-switch {
2
+ --enso-switch-accent: var(--bulma-dark);
3
+
2
4
  input {
3
5
  display: none;
4
6
  }
5
7
 
6
8
  .control-switch {
7
- background-color: $border;
8
- border: 1px solid $border;
9
+ background-color: var(--bulma-border);
10
+ border: 1px solid var(--bulma-border);
9
11
 
10
12
  &:before {
11
- background-color: $grey-light;
13
+ background-color: var(--bulma-text-light);
12
14
  }
13
15
 
14
16
  &:after {
15
- background-color: #fff;
16
- box-shadow: 0 2px 3px rgba(17, 17, 17, 0.1);
17
+ background-color: var(--bulma-scheme-main);
18
+ box-shadow: none;
17
19
  }
18
20
 
19
21
  &.checked {
20
- border-color: $text;
21
- background-color: $text;
22
+ border-color: var(--enso-switch-accent);
23
+ background-color: var(--enso-switch-accent);
22
24
  }
23
- }
24
25
 
25
- @each $name, $pair in $colors {
26
- $color: nth($pair, 1);
27
- &.is-#{$name} {
28
- .control-switch.checked {
29
- border-color: $color;
30
- background-color: $color;
31
-
32
- &.disabled {
33
- border-color: lighten($color, 25%);
34
- background-color: lighten($color, 25%);
35
- cursor: not-allowed;
36
- }
37
- }
26
+ &.checked.disabled {
27
+ border-color: color-mix(in srgb, var(--enso-switch-accent) 55%, white);
28
+ background-color: color-mix(in srgb, var(--enso-switch-accent) 55%, white);
29
+ cursor: not-allowed;
38
30
  }
39
31
  }
32
+
33
+ &.is-primary { --enso-switch-accent: var(--bulma-primary); }
34
+ &.is-link { --enso-switch-accent: var(--bulma-link); }
35
+ &.is-info { --enso-switch-accent: var(--bulma-info); }
36
+ &.is-success { --enso-switch-accent: var(--bulma-success); }
37
+ &.is-warning { --enso-switch-accent: var(--bulma-warning); }
38
+ &.is-danger { --enso-switch-accent: var(--bulma-danger); }
40
39
  }
@@ -1,10 +1,10 @@
1
1
  .v-popper--theme-dropdown, .v-popper--theme-tooltip {
2
2
  .v-popper__wrapper {
3
3
  .v-popper__inner {
4
- box-shadow: 0 3px 10px rgba($tooltip-text, .1);
4
+ box-shadow: none;
5
5
  background: $tooltip-background;
6
6
  color: $tooltip-text;
7
- border-radius: 5px;
7
+ border-radius: $radius;
8
8
  padding: 5px 10px 4px;
9
9
  }
10
10
  }
@@ -15,8 +15,8 @@
15
15
  .popover-inner {
16
16
  background: $color;
17
17
  color: $tooltip-text;
18
- border-radius: 5px;
19
- box-shadow: 0 5px 30px rgba($tooltip-text, .1);
18
+ border-radius: $radius;
19
+ box-shadow: none;
20
20
  }
21
21
 
22
22
  .popover-arrow {
@@ -1,4 +1,5 @@
1
1
  .vue-filter .tabs-wrapper .tabs {
2
+ --enso-filter-accent: var(--bulma-warning);
2
3
  -ms-overflow-style: none;
3
4
  overflow: -moz-scrollbars-none;
4
5
 
@@ -8,32 +9,23 @@
8
9
 
9
10
  li {
10
11
  a:hover {
11
- border-color: $warning;
12
+ border-color: var(--enso-filter-accent);
12
13
  }
13
14
 
14
15
  &.is-active a {
15
- background-color: rgba($warning, 0.5);
16
- border-color: $warning;
16
+ background-color: color-mix(in srgb, var(--enso-filter-accent) 18%, transparent);
17
+ border-color: var(--enso-filter-accent);
17
18
  }
18
19
  }
19
20
  }
20
21
 
21
22
  .vue-filter {
22
- background-color: $box-background-color;
23
+ background-color: var(--bulma-box-background-color, var(--bulma-scheme-main));
23
24
 
24
- @each $name, $pair in $colors {
25
- $color: nth($pair, 1);
26
- &.is-#{$name} {
27
- .tabs-wrapper .tabs li {
28
- a:hover {
29
- border-color: $color;
30
- }
31
-
32
- &.is-active a {
33
- background-color: $color;
34
- border-color: $color;
35
- }
36
- }
37
- }
38
- }
25
+ &.is-primary { --enso-filter-accent: var(--bulma-primary); }
26
+ &.is-link { --enso-filter-accent: var(--bulma-link); }
27
+ &.is-info { --enso-filter-accent: var(--bulma-info); }
28
+ &.is-success { --enso-filter-accent: var(--bulma-success); }
29
+ &.is-warning { --enso-filter-accent: var(--bulma-warning); }
30
+ &.is-danger { --enso-filter-accent: var(--bulma-danger); }
39
31
  }
@@ -1,9 +1,9 @@
1
- @import "./components/bookmarks"
2
- @import "./components/divider"
3
- @import "./components/info-box"
4
- @import "./components/info-card"
5
- @import "./components/settings"
6
- @import "./components/sidebar"
7
- @import "./components/switch"
8
- @import "./components/v-tooltip"
9
- @import "./components/vue-filter"
1
+ @use "./components/bookmarks"
2
+ @use "./components/divider"
3
+ @use "./components/info-box"
4
+ @use "./components/info-card"
5
+ @use "./components/settings"
6
+ @use "./components/sidebar"
7
+ @use "./components/switch"
8
+ @use "./components/v-tooltip"
9
+ @use "./components/vue-filter"
@@ -11,7 +11,7 @@ $green: #1BB934
11
11
  $blue: #0194EF
12
12
  $red: #E1112C
13
13
 
14
- @import "~bulma/sass/utilities/initial-variables"
14
+ @import 'bulma/sass/utilities/initial-variables'
15
15
 
16
16
  $primary: $orange
17
17
  $danger-light: $red
@@ -108,4 +108,4 @@ $tooltip-text: $white
108
108
 
109
109
  $divider-background: $background
110
110
 
111
- $settings-background: $grey-dark
111
+ $settings-background: $grey-dark
package/bulma/enso.scss CHANGED
@@ -1,99 +0,0 @@
1
- @import 'v-tooltip/dist/v-tooltip';
2
-
3
- [v-cloak] {
4
- display: none;
5
- }
6
-
7
- *:focus {
8
- outline:0;
9
- }
10
-
11
- @media screen and (max-width: 769px) {
12
- .columns.is-reverse-mobile {
13
- flex-direction: column-reverse;
14
- display: flex;
15
- }
16
- }
17
-
18
- .mx-a {
19
- margin-left: auto;
20
- margin-right: auto;
21
- }
22
-
23
- .min-w-0 {
24
- min-width: 0;
25
- }
26
-
27
- .is-bold {
28
- font-weight: bold;
29
- }
30
-
31
- .is-clickable {
32
- cursor: pointer;
33
- }
34
-
35
- .has-text-muted {
36
- opacity: 0.7;
37
- }
38
-
39
- .is-naked {
40
- opacity: 0.7;
41
- transition: opacity ease 0.3s;
42
- &:hover {
43
- opacity: 1;
44
- }
45
- }
46
-
47
- a.is-naked {
48
- color: inherit;
49
- }
50
-
51
- .button.is-naked {
52
- background: 0;
53
- border: none;
54
- &:focus {
55
- box-shadow: unset;
56
- }
57
- }
58
-
59
- .is-raised {
60
- -webkit-box-shadow: 0 0.25em 0.3em 0.15em rgba(42,51,83,.35);
61
- box-shadow: 0 0.25em 0.3em 0.15em rgba(42,51,83,.35);
62
- }
63
-
64
- .raises-on-hover {
65
- transition: box-shadow 0.3s ease-in-out;
66
-
67
- &:hover {
68
- -webkit-box-shadow: 0 0.1em 0.3em 0.2em rgba(42,51,83,.35);
69
- box-shadow: 0 0.1em 0.3em 0.2em rgba(42,51,83,.35);
70
- }
71
- }
72
-
73
- .is-scrollable {
74
- overflow: scroll;
75
- }
76
-
77
- .no-scrollbars {
78
- -ms-overflow-style: none;
79
- overflow: -moz-scrollbars-none;
80
-
81
- &::-webkit-scrollbar {
82
- display: none;
83
- }
84
- }
85
-
86
- .is-hoverable-item:hover {
87
- background-color: $light;
88
- }
89
-
90
- .form-box {
91
- position: relative;
92
- z-index: 2;
93
- overflow: visible;
94
- }
95
-
96
- .image.is-30x30 {
97
- height: 30px;
98
- width: 30px;
99
- }
@@ -1,6 +1 @@
1
- @import "~bulma-extensions/bulma-badge/dist/css/bulma-badge.min"
2
- @import "~bulma-extensions/bulma-calendar/dist/css/bulma-calendar.min"
3
- @import "~bulma-extensions/bulma-pricingtable/dist/css/bulma-pricingtable.min"
4
- @import "~bulma-extensions/bulma-steps/dist/css/bulma-steps.min"
5
- @import "~bulma-extensions/bulma-timeline/dist/css/bulma-timeline.min"
6
- @import "~bulma-extensions/bulma-tagsinput/dist/css/bulma-tagsinput.min"
1
+ @use 'bulma-extensions/bulma-timeline/dist/css/bulma-timeline.min'
package/bulma/fonts.scss CHANGED
@@ -1 +1 @@
1
- @import url('https://fonts.googleapis.com/css2?family=Montserrat&family=Muli:wght@500;800&display=swap');
1
+ /* Fonts intentionally inherit the Bulma/system stack. */
@@ -1,6 +1,6 @@
1
1
  $red: #e74c3c
2
2
 
3
- @import "~bulma/sass/utilities/initial-variables"
3
+ @import 'bulma/sass/utilities/initial-variables'
4
4
 
5
5
  $tooltip-background: $white
6
6
  $tooltip-text: $black
@@ -9,4 +9,4 @@ $body-background-color: rgb(235,239,242)
9
9
 
10
10
  $settings-background: $white
11
11
 
12
- $divider-background: $white
12
+ $divider-background: $white
@@ -1,23 +1,3 @@
1
- $family-sans-serif: "Montserrat"
2
- $family-secondary: "Muli"
3
-
4
- $gap: 16px
5
-
6
- $black: hsl(0, 0%, 4%) !default
7
-
8
- $control-border-width: 1px !default
9
- $button-border-width: $control-border-width !default
10
- $control-height: 2.125em
11
- $control-padding-vertical: calc(0.25em - #{$control-border-width})
12
- $control-padding-horizontal: calc(0.50em - #{$control-border-width})
13
- $button-padding-vertical: calc(0.25em - #{$button-border-width})
14
- $button-padding-horizontal: 0.625em
15
- $box-shadow: 0 0.05em 0.15em 0.1em rgba($black, 0.15) !default
16
- $card-shadow: 0 0.05em 0.15em 0.1em rgba($black, 0.15) !default
17
- $card-header-shadow: 0 0.1em 0.1em rgba($black, 0.15) !default
18
-
19
- $menu-label-font-size: 0.85em !default
20
-
21
1
  $navbar-height: 3.25rem
22
2
  $sidebar-width: 12rem
23
3
  $sidebar-collapsed-width: 56px
package/package.json CHANGED
@@ -1,11 +1,8 @@
1
1
  {
2
2
  "name": "@enso-ui/themes",
3
- "version": "3.1.0",
3
+ "version": "3.2.0",
4
4
  "description": "Enso UI Themes",
5
- "main": "index.js",
6
- "scripts": {
7
- "test": "echo \"Error: no test specified\" && exit 1"
8
- },
5
+ "main": "src/bulma/register.js",
9
6
  "repository": {
10
7
  "type": "git",
11
8
  "url": "git+https://github.com/enso-ui/themes.git"
@@ -15,29 +12,21 @@
15
12
  "bulma"
16
13
  ],
17
14
  "author": "Adrian Ocneanu <aocneanu@gmail.com>",
18
- "license": "ISC",
15
+ "license": "MIT",
19
16
  "bugs": {
20
17
  "url": "https://github.com/enso-ui/themes/issues"
21
18
  },
22
19
  "homepage": "https://github.com/enso-ui/themes#readme",
23
20
  "dependencies": {
24
- "@fortawesome/fontawesome-svg-core": "^1.2.2",
25
- "@fortawesome/free-solid-svg-icons": "^5.11.2",
26
- "@fortawesome/vue-fontawesome": "3.0.0-5",
27
- "bulma": "^0.9.0",
28
- "bulma-extensions": "^6.0.0",
29
- "flatpickr": "^4.5.0",
30
- "vuex": "^4.0.0"
31
- },
32
- "devDependencies": {
33
- "@vue/cli-plugin-babel": "5.0.0-beta.6",
34
- "@vue/cli-plugin-eslint": "5.0.0-beta.6",
35
- "@vue/eslint-config-airbnb": "^5.0.0",
36
- "autoprefixer": "^9.6.1",
37
- "babel-eslint": "^10.0.1",
38
- "cross-env": "^6.0.0",
39
- "eslint": "^7.0.0",
40
- "eslint-import-resolver-alias": "^1.1.2",
41
- "eslint-plugin-vue": "^8.0.3"
21
+ "@enso-ui/localisation": "^6.0.0",
22
+ "@enso-ui/ui": "^7.0.0",
23
+ "@fortawesome/fontawesome-svg-core": "^7.2.0",
24
+ "@fortawesome/free-solid-svg-icons": "^7.2.0",
25
+ "@fortawesome/vue-fontawesome": "3.1.3",
26
+ "bulma": "^1.0.0",
27
+ "bulma-extensions": "^6.2.7",
28
+ "flatpickr": "^4.6.13",
29
+ "pinia": "^3.0.0",
30
+ "vue": "^3.0"
42
31
  }
43
32
  }
@@ -13,7 +13,7 @@
13
13
  <a class="button is-naked"
14
14
  v-on="itemEvents">
15
15
  <span class="icon is-small">
16
- <fa icon="lightbulb"/>
16
+ <fa :icon="faLightbulb"/>
17
17
  </span>
18
18
  </a>
19
19
  </div>
@@ -25,17 +25,18 @@
25
25
 
26
26
  <script>
27
27
  import { FontAwesomeIcon as Fa } from '@fortawesome/vue-fontawesome';
28
- import { library } from '@fortawesome/fontawesome-svg-core';
29
28
  import { faLightbulb } from '@fortawesome/free-solid-svg-icons';
30
29
  import CoreThemeSelector from '../../../core/components/settings/ThemeSelector.vue';
31
30
 
32
- library.add(faLightbulb);
33
-
34
31
  export default {
35
32
  name: 'ThemeSelector',
36
33
 
37
34
  components: { CoreThemeSelector, Fa },
38
35
 
39
36
  inject: ['i18n'],
37
+
38
+ data: () => ({
39
+ faLightbulb,
40
+ }),
40
41
  };
41
42
  </script>
@@ -1,4 +1,5 @@
1
- import App from '@enso-ui/ui/src/core/app';
2
1
  import ThemeSelector from './components/settings/ThemeSelector.vue';
3
2
 
4
- App.registerSettingsItem('theme-selector', ThemeSelector, 200);
3
+ export default App => {
4
+ App.registerSettingsItem('theme-selector', ThemeSelector, 200);
5
+ };
@@ -1,16 +1,26 @@
1
1
  <script>
2
- import { mapState, mapGetters, mapActions } from 'vuex';
2
+ import { useStore } from '../../../utils/pinia';
3
3
 
4
4
  export default {
5
5
  name: 'ThemeSelector',
6
6
 
7
7
  computed: {
8
- ...mapState('layout', ['themes']),
9
- ...mapGetters('preferences', ['theme']),
10
- ...mapGetters('localisation', ['rtl']),
8
+ themes() {
9
+ return useStore('layout').themes;
10
+ },
11
+ theme() {
12
+ return useStore('preferences').global.theme ?? '';
13
+ },
14
+ rtl() {
15
+ const localisation = useStore('localisation');
16
+ const preferences = useStore('preferences');
17
+
18
+ return localisation.rtlLanguages.includes(preferences.global.lang);
19
+ },
11
20
  alternate() {
12
21
  return Object.keys(this.themes)
13
- .find(theme => theme.replace('-rtl', '') !== this.theme.replace('-rtl', '')) + (this.rtl ? '-rtl' : '');
22
+ .find(theme => theme.replace('-rtl', '') !== this.theme.replace('-rtl', ''))
23
+ + (this.rtl ? '-rtl' : '');
14
24
  },
15
25
  multiTheme() {
16
26
  return Object.keys(this.themes).length > 1;
@@ -18,7 +28,9 @@ export default {
18
28
  },
19
29
 
20
30
  methods: {
21
- ...mapActions('preferences', ['setTheme']),
31
+ setTheme(theme) {
32
+ return useStore('preferences').setTheme(theme);
33
+ },
22
34
  },
23
35
 
24
36
  render() {
@@ -30,5 +42,4 @@ export default {
30
42
  });
31
43
  },
32
44
  };
33
-
34
45
  </script>
@@ -0,0 +1,11 @@
1
+ import { getActivePinia } from 'pinia';
2
+
3
+ export const useStore = id => {
4
+ const store = getActivePinia()?._s?.get(id);
5
+
6
+ if (!store) {
7
+ throw new Error(`Missing Pinia store: ${id}`);
8
+ }
9
+
10
+ return store;
11
+ };
@@ -1,21 +0,0 @@
1
- @import './fonts';
2
-
3
- @import './variables';
4
-
5
- $rtl: true;
6
- $right: left;
7
- $left: right;
8
-
9
- @import './dark/variables';
10
-
11
- @import "~bulma/bulma";
12
-
13
- @import "~flatpickr/dist/themes/dark";
14
-
15
- @import "./extensions";
16
-
17
- @import "./components";
18
-
19
- @import "./dark/enso";
20
-
21
- @import './enso';
@@ -1,20 +0,0 @@
1
- @import './fonts';
2
-
3
- @import './variables';
4
-
5
- $right: right;
6
- $left: left;
7
-
8
- @import './dark/variables';
9
-
10
- @import "~bulma/bulma";
11
-
12
- @import "~flatpickr/dist/themes/dark";
13
-
14
- @import "./extensions";
15
-
16
- @import "./components";
17
-
18
- @import "./dark/enso";
19
-
20
- @import './enso';
@@ -1,19 +0,0 @@
1
- @import './variables';
2
-
3
- $rtl: true;
4
- $right: left;
5
- $left: right;
6
-
7
- @import './light/variables';
8
-
9
- @import "~bulma/bulma";
10
-
11
- @import "~flatpickr/dist/themes/light";
12
-
13
- @import "./extensions";
14
-
15
- @import "./components";
16
-
17
- @import "./light/enso";
18
-
19
- @import './enso';
@@ -1,20 +0,0 @@
1
- @import './fonts';
2
-
3
- @import './variables';
4
-
5
- $right: right;
6
- $left: left;
7
-
8
- @import './light/variables';
9
-
10
- @import "~bulma/bulma";
11
-
12
- @import "~flatpickr/dist/themes/light";
13
-
14
- @import "./extensions";
15
-
16
- @import "./components";
17
-
18
- @import "./light/enso";
19
-
20
- @import './enso';