mediacube-ui 0.1.274 → 0.1.276

package/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.1.276](https://github.com/MediaCubeCo/mcui/compare/v0.1.275...v0.1.276) (2024-05-31)
+
+### [0.1.275](https://github.com/MediaCubeCo/mcui/compare/v0.1.274...v0.1.275) (2024-05-31)
+
 ### [0.1.274](https://github.com/MediaCubeCo/mcui/compare/v0.1.273...v0.1.274) (2024-05-31)
 
 ### [0.1.273](https://github.com/MediaCubeCo/mcui/compare/v0.1.272...v0.1.273) (2024-05-31)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mediacube-ui",
-  "version": "0.1.274",
+  "version": "0.1.276",
   "description": "Design system for Mediacube services",
   "author": "Mediacube",
   "private": false,

package/src/elements/McAvatar/McAvatar.vue

@@ -186,6 +186,8 @@ export default {
 }
 </script>
 <style lang="scss">
+@import '/src/styles/mixins';
+@import '/src/tokens/border-radius';
 $color-borders: $token-colors;
 $dot-colors: $token-colors;
 

package/src/elements/McBadge/McBadge.vue

@@ -94,9 +94,10 @@ export default {
 </script>
 
 <style lang="scss">
+@import '/src/styles/mixins';
+@import '/src/tokens/border-radius';
 .mc-badge {
     $block-name: &;
-    @import 'src/styles/mixins';
     --mc-badge-color: #{$color-white};
     --mc-badge-background-color: inherit;
     --mc-badge-background-opacity: initial;

package/src/elements/McButton/McButton.vue

@@ -407,9 +407,10 @@ export default {
 </script>
 
 <style lang="scss">
+@import '/src/styles/mixins';
+@import '/src/tokens/border-radius';
 .mc-button {
     $block-name: &;
-    @import 'src/styles/mixins';
     @include reset();
     --mc-button-background-color: #{$color-transparent};
     --mc-button-font-weight: #{$font-weight-normal};

package/src/elements/McChip/McChip.vue

@@ -120,9 +120,9 @@ export default {
 </script>
 
 <style lang="scss">
+@import '/src/styles/mixins';
 .mc-chip {
     $block-name: &;
-    @import 'src/styles/mixins';
     --mc-chip-text-color: #{$color-black};
     --mc-chip-color: #{$color-white};
     overflow: hidden;

package/src/elements/McCropper/McCropper.vue

@@ -75,6 +75,7 @@ export default {
 </script>
 
 <style lang="scss">
+@import '/src/tokens/border-radius';
 .mc-cropper {
     $block-name: &;
 

package/src/elements/McDate/McDate.vue

@@ -88,10 +88,9 @@ export default {
 </script>
 
 <style lang="scss">
-@import 'src/styles/mixins';
+@import '/src/styles/mixins';
 .mc-date {
     $block-name: &;
-    @import 'src/styles/mixins';
 
     display: inline-flex;
     align-items: center;

package/src/elements/McDatePicker/McDatePicker.vue

@@ -580,9 +580,10 @@ export default {
 
 <style lang="scss">
 @import '~vue2-datepicker/scss/index.scss';
+@import '/src/styles/mixins';
+@import '/src/tokens/border-radius';
 .mc-date-picker {
     $block-name: &;
-    @import 'src/styles/mixins';
 
     display: block;
 

package/src/elements/McField/McFieldCheckbox/McFieldCheckbox.vue

@@ -222,9 +222,9 @@ export default {
 </script>
 
 <style lang="scss">
+@import '/src/styles/mixins';
 .mc-field-checkbox {
     $block-name: &;
-    @import 'src/styles/mixins';
     position: relative;
     display: block;
     min-width: var(--mc-field-checkbox-size);

package/src/elements/McField/McFieldRadio/McFieldRadioButton/McFieldRadioButton.vue

@@ -151,9 +151,10 @@ export default {
 </script>
 
 <style lang="scss">
+@import '/src/styles/mixins';
+@import '/src/tokens/border-radius';
 .mc-field-radio-button {
     $block-name: &;
-    @import 'src/styles/mixins';
     display: inline-block;
     min-width: $size-250;
     min-height: $size-250;

package/src/elements/McField/McFieldRadio/McFieldRadioGroup/McFieldRadioGroup.vue

@@ -156,6 +156,7 @@ export default {
 </script>
 
 <style lang="scss">
+@import '/src/styles/mixins';
 .mc-field-radio-group {
     $block-name: &;
 

package/src/elements/McField/McFieldSelect/McFieldSelect.vue

@@ -612,9 +612,10 @@ export default {
 </script>
 
 <style lang="scss">
+@import '/src/styles/mixins';
+@import '/src/tokens/border-radius';
 .mc-field-select {
     $block-name: &;
-    @import 'src/styles/mixins';
     --mc-field-select-color: initial;
     --mc-field-select-label-color: #{$color-black};
     --mc-field-select-border-color: initial;

package/src/elements/McField/McFieldText/McFieldText.vue

@@ -734,9 +734,10 @@ export default {
 </script>
 
 <style lang="scss">
+@import '/src/styles/mixins';
+@import '/src/tokens/border-radius';
 .mc-field-text {
     $block-name: &;
-    @import 'src/styles/mixins';
     display: block;
 
     &__header {

package/src/elements/McField/McFieldToggle/McFieldToggle.vue

@@ -160,10 +160,11 @@ export default {
 </script>
 
 <style lang="scss">
+@import '/src/styles/mixins';
+@import '/src/tokens/border-radius';
 .mc-field-toggle {
     $block-name: &;
     $toggle-indent: calc(#{$space-50} / 2);
-    @import 'src/styles/mixins';
     --mc-field-toggle-color: initial;
     --mc-field-disabled-color: initial;
     --mc-field-toggle-saturate-value: initial;

package/src/elements/McNotification/McNotification.vue

@@ -126,6 +126,8 @@ export default {
 </script>
 
 <style lang="scss">
+@import '/src/styles/mixins';
+@import '/src/tokens/border-radius';
 .mc-notification {
     $block-name: &;
     --mc-notification-color: #{$color-orange};

package/src/elements/McProgress/McProgress.vue

@@ -152,6 +152,7 @@ export default {
 </script>
 
 <style lang="scss">
+@import '/src/tokens/border-radius';
 .mc-progress {
     $block-name: &;
     --mc-progress-color: #{$color-dark-gray};

package/src/elements/McSeparator/McSeparator.vue

@@ -120,9 +120,9 @@ export default {
 </script>
 
 <style lang="scss">
+@import '/src/styles/mixins';
 .mc-separator {
     $block-name: &;
-    @import 'src/styles/mixins';
     --mc-separator-color: initial;
     --mc-separator-indent-top: initial;
     --mc-separator-indent-bottom: initial;

package/src/elements/McSvgIcon/McSvgIcon.vue

@@ -99,8 +99,8 @@ export default {
 </script>
 
 <style lang="scss">
+@import '/src/styles/mixins';
 .mc-svg-icon {
-    @import 'src/styles/mixins';
     --mc-svg-icon-size: #{$size-250};
     --mc-svg-icon-weight: 1.5;
     --mc-svg-icon-color: initial;

package/src/elements/McTabs/McTabs/McTabs.vue

@@ -365,9 +365,10 @@ export default {
 </script>
 
 <style lang="scss">
+@import '/src/styles/mixins';
+@import '/src/tokens/z-indexes';
 .mc-tabs {
     $block-name: &;
-    @import 'src/styles/mixins';
 
     @mixin border() {
         &::before {

package/src/elements/McTitle/McTitle.vue

@@ -166,9 +166,9 @@ export default {
 </script>
 
 <style lang="scss">
+@import '/src/styles/mixins';
 .mc-title {
     $block-name: &;
-    @import 'src/styles/mixins';
     --mc-title-color: initial;
     --mc-title-weight: initial;
     --mc-title-line-height: initial;

package/src/elements/McTooltip/McTooltip.vue

@@ -137,12 +137,13 @@ export default {
 </script>
 
 <style lang="scss">
+@import '/src/styles/mixins';
+@import '/src/tokens/border-radius';
 .mc-tooltip-target {
     display: inline-flex;
 }
 
 .mc-tooltip {
-    @import 'src/styles/mixins';
     $arrow-size: $space-100 - 1;
     --mc-tooltip-arrow-color: #{$color-black};
     --mc-tooltip-color: #{$color-white};

package/src/patterns/McCells/McCell/McCell.vue

@@ -61,9 +61,10 @@ export default {
 </script>
 
 <style lang="scss">
+@import '/src/styles/mixins';
 .mc-cell {
     $block-name: &;
-    @import 'src/styles/mixins';
+    @import '/src/styles/mixins';
     @include reset-text-indents();
 
     &--size {

package/src/patterns/McChat/McChat.vue

@@ -261,12 +261,12 @@ export default {
 </script>
 
 <style lang="scss">
+@import '/src/styles/mixins';
 .slideout-panel .slideout-wrapper .slideout {
     height: auto;
 }
 .mc-chat {
     $block-name: &;
-    @import 'src/styles/mixins';
     height: 100%;
 
     .mc-drawer__header {

package/src/patterns/McChat/McChatComment/McChatComment.vue

@@ -164,9 +164,10 @@ export default {
 </script>
 
 <style lang="scss">
+@import '/src/styles/mixins';
+@import '/src/tokens/border-radius';
 .mc-chat-comment {
     $block-name: &;
-    @import 'src/styles/mixins';
     --mc-chat-comment-color: initial;
     --mc-chat-comment-opacity: initial;
     padding: $space-50;

package/src/patterns/McChat/McChatForm/McChatForm.vue

@@ -113,6 +113,8 @@ export default {
 </script>
 
 <style lang="scss">
+@import '/src/styles/mixins';
+@import '/src/tokens/border-radius';
 .mc-chat-form {
     $block-name: &;
     line-height: $line-height-200;

package/src/patterns/McCollapse/McCollapse.vue

@@ -160,6 +160,8 @@ export default {
 </script>
 
 <style lang="scss">
+@import '/src/styles/mixins';
+@import '/src/tokens/border-radius';
 .mc-collapse {
     $block-name: &;
 

package/src/patterns/McDrawer/McDrawer.vue

@@ -82,6 +82,7 @@ export default {
 </script>
 
 <style lang="scss">
+@import '/src/styles/mixins';
 .mc-drawer {
     $block-name: &;
 

package/src/patterns/McDropdown/McDropdown.vue

@@ -148,9 +148,10 @@ export default {
 </script>
 
 <style lang="scss">
+@import '/src/styles/mixins';
+@import '/src/tokens/z-indexes';
 .mc-dropdown {
     $block-name: &;
-    @import 'src/styles/mixins';
 
     position: relative;
     display: inline-block;

package/src/patterns/McDropdown/McDropdownPanel/McDropdownPanel.vue

@@ -12,9 +12,10 @@ export default {
 </script>
 
 <style lang="scss">
+@import '/src/styles/mixins';
+@import '/src/tokens/border-radius';
 .mc-dropdown-panel {
     $block-name: &;
-    @import 'src/styles/mixins';
 
     box-shadow: $shadow-s;
     border-radius: $radius-150;

package/src/patterns/McFakeScroll/McFakeScroll.vue

@@ -213,6 +213,8 @@ export default {
 </script>
 
 <style lang="scss">
+@import '/src/styles/mixins';
+@import '/src/tokens/border-radius';
 @mixin track-visibility() {
     right: 0;
     width: 7px;

package/src/patterns/McFilter/McFilter.vue

@@ -720,9 +720,9 @@ export default {
 </script>
 
 <style lang="scss">
+@import '/src/styles/mixins';
 .mc-filter {
     $block-name: &;
-    @import 'src/styles/mixins';
     flex-grow: 1;
     min-width: 0;
     &__header {

package/src/patterns/McFilter/McFilterTags/McFilterTags.vue

@@ -325,9 +325,10 @@ export default {
 </script>
 
 <style lang="scss">
+@import '/src/styles/mixins';
+@import '/src/tokens/border-radius';
 .mc-filter-tags {
     $block-name: &;
-    @import 'src/styles/mixins';
 
     @include child-indent-bottom($space-100);
     &__body {

package/src/patterns/McFilter/McFilterTypeRange/McFilterTypeRange.vue

@@ -120,6 +120,7 @@ export default {
 </script>
 
 <style lang="scss">
+@import '/src/styles/mixins';
 .mc-filter-type-range {
     $block-name: &;
     display: flex;

package/src/patterns/McFilter/McFilterTypeRelation/McFilterTypeRelation.vue

@@ -199,9 +199,9 @@ export default {
 </script>
 
 <style lang="scss">
+@import '/src/styles/mixins';
 .mc-filter-type-relation {
     $block-name: &;
-    @import 'src/styles/mixins';
     width: 300px;
     &__header {
         display: flex;

package/src/patterns/McModal/McModal.vue

@@ -284,6 +284,9 @@ export default {
 </script>
 
 <style lang="scss">
+@import '/src/styles/mixins';
+@import '/src/tokens/z-indexes';
+@import '/src/tokens/border-radius';
 .v--modal-block-scroll {
     width: 100%;
 }
@@ -299,7 +302,6 @@ export default {
     --mc-modal-header-line-height-small: #{$line-height-250};
     --mc-modal-button-height: #{$size-600};
     --mc-modal-button-height-small: #{$size-500};
-    @import 'src/styles/mixins';
 
     @media #{$media-query-s} {
         padding: 12px 0;

package/src/patterns/McOverlay/McOverlay.vue

@@ -30,6 +30,7 @@ export default {
 </script>
 
 <style lang="scss">
+@import '/src/tokens/z-indexes';
 .mc-overlay {
     $block-name: &;
     --mc-overlay-spinner-size: initial;

package/src/patterns/McPreview/McPreview.vue

@@ -46,9 +46,9 @@ export default {
 </script>
 
 <style lang="scss">
+@import '/src/styles/mixins';
 .mc-preview {
     $block-name: &;
-    @import 'src/styles/mixins';
 
     @include reset-text-indents();
     display: flex;

package/src/patterns/McSideBar/McSideBar/McSideBar.vue

@@ -341,6 +341,7 @@ export default {
 </script>
 
 <style lang="scss">
+@import '/src/styles/mixins';
 .mc-side-bar {
     $block-name: &;
 

package/src/patterns/McSideBar/McSideBarButton/McSideBarButton.vue

@@ -182,9 +182,10 @@ export default {
 </script>
 
 <style lang="scss">
+@import '/src/styles/mixins';
+@import '/src/tokens/border-radius';
 .mc-side-bar-button {
     $block-name: &;
-    @import 'src/styles/mixins';
     &__tooltip {
         width: 100%;
     }

package/src/patterns/McSideBar/McSideBarCenter/McSideBarCenter.vue

@@ -259,6 +259,7 @@ export default {
 </script>
 
 <style lang="scss">
+@import '/src/styles/mixins';
 .mc-side-bar-center {
     $block-name: &;
     margin-bottom: $space-150;

package/src/patterns/McSideBar/McSideBarTop/McSideBarTop.vue

@@ -181,9 +181,9 @@ export default {
 </script>
 
 <style lang="scss">
+@import '/src/styles/mixins';
 .mc-side-bar-top {
     $block-name: &;
-    @import 'src/styles/mixins';
     @include reset-text-indents();
     position: sticky;
     top: -($space-250);

package/src/patterns/McStack/McStack.vue

@@ -107,9 +107,9 @@ export default {
 </script>
 
 <style lang="scss">
+@import '/src/styles/mixins';
 .mc-stack {
     $block-name: &;
-    @import 'src/styles/mixins';
 
     position: relative;
     @include reset-text-indents();

package/src/patterns/McTable/McTable/McTable.vue

@@ -587,11 +587,12 @@ export default {
 </script>
 
 <style lang="scss">
+@import '/src/styles/mixins';
+@import '/src/tokens/border-radius';
 @import '~vxe-table/styles/variable.scss';
 
 //override variables:
 @import '../../../styles/table.scss';
-
 @import '~vxe-table/styles/modules.scss';
 
 .vxe-table {

package/src/patterns/McTable/McTableCol/McTableCol.vue

@@ -194,6 +194,7 @@ export default {
 </script>
 
 <style lang="scss">
+@import '/src/styles/mixins';
 @import '~vxe-table/styles/variable.scss';
 //override variables:
 @import '../../../styles/table.scss';
@@ -207,7 +208,6 @@ export default {
     }
 }
 .mc-table-col {
-    @import 'src/styles/mixins';
     $block-name: &;
 
     &--border-right {

package/src/patterns/McTableCard/McTableCard.vue

@@ -82,9 +82,9 @@ export default {
 </script>
 
 <style lang="scss">
+@import '/src/styles/mixins';
 .mc-table-card {
     $block-name: &;
-    @import 'src/styles/mixins';
 
     @include position(absolute, 0);
     z-index: 10;

package/src/patterns/McTableCard/McTableCardHeader/McTableCardHeader.vue

@@ -39,9 +39,9 @@ export default {
 </script>
 
 <style lang="scss">
+@import '/src/styles/mixins';
 .mc-table-card-header {
     $block-name: &;
-    @import 'src/styles/mixins';
 
     display: flex;
     flex-wrap: nowrap;

package/src/patterns/McTopBar/McTopBar.vue

@@ -113,6 +113,7 @@ export default {
 </script>
 
 <style lang="scss">
+@import '/src/styles/mixins';
 .mc-top-bar {
     $block-name: &;
 

package/src/patterns/McWrapScroll/McWrapScroll.vue

@@ -207,9 +207,9 @@ export default {
 </script>
 
 <style lang="scss">
+@import '/src/styles/mixins';
 .mc-wrap-scroll {
     $block-name: &;
-    @import 'src/styles/mixins';
     $more-space-indent: $space-200;
     --mc-wrap-scroll-bottom: #{$space-zero};
     padding-bottom: var(--mc-wrap-scroll-bottom);

package/src/styles/_mixins.scss

@@ -537,4 +537,27 @@
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
   }
+}
+
+// Create stack-space
+@mixin child-indent-bottom($space) {
+  > *:not(:last-child) {
+    margin-bottom: $space;
+  }
+}
+@mixin child-indent-top($space) {
+  > *:not(:first-child) {
+    margin-top: $space;
+  }
+}
+
+@mixin child-indent-right($space) {
+  > *:not(:last-child) {
+    margin-inline-end: $space;
+  }
+}
+@mixin child-indent-left($space) {
+  > *:not(:first-child) {
+    margin-inline-start: $space;
+  }
 }

package/src/styles/_spacing.scss

@@ -24,29 +24,6 @@ $spacing-ratio: $line-height-250;
   padding: round($value / $spacing-ratio - 1px) $value round($value / $spacing-ratio);
 }
 
-// Create stack-space
-@mixin child-indent-bottom($space) {
-  > *:not(:last-child) {
-    margin-bottom: $space;
-  }
-}
-@mixin child-indent-top($space) {
-  > *:not(:first-child) {
-    margin-top: $space;
-  }
-}
-
-@mixin child-indent-right($space) {
-  > *:not(:last-child) {
-    margin-inline-end: $space;
-  }
-}
-@mixin child-indent-left($space) {
-  > *:not(:first-child) {
-    margin-inline-start: $space;
-  }
-}
-
 @mixin indent-top($space: $space-xs, $indent-type: "margin") {
   #{$indent-type}-top: $space;
 }

package/src/styles/toast.scss

@@ -1,6 +1,8 @@
 .toasted-container {
   $toasted-container-name: &;
-  @import 'src/styles/mixins';
+  @import '/src/styles/mixins';
+  @import '/src/tokens/z-indexes';
+  @import '/src/tokens/border-radius';
   z-index: $z-index-toasted !important;
   .toasted {
     &.mc-toast {

package/src/templates/layouts/McContentFixed/McContentFixed.vue

@@ -27,7 +27,7 @@ export default {
 <style lang="scss">
 .mc-content-fixed {
     $block-name: &;
-    @import 'src/styles/mixins';
+    @import '/src/styles/mixins';
 
     @include position(absolute, 0);
     width: 100%;