mediacube-ui-v2 0.0.5 → 0.0.7

package/src/assets/tokens/json/font-weights.json

@@ -1,12 +0,0 @@
-{
-  "$font-weight-normal": "400",
-  "$font-weight-medium": "500",
-  "$font-weight-semi-bold": "600",
-  "$font-weight-bold": "700",
-  "$token-font-weights": {
-    "normal": "400",
-    "medium": "500",
-    "semi-bold": "600",
-    "bold": "700"
-  }
-}

package/src/assets/tokens/json/gradients.json

@@ -1,13 +0,0 @@
-{
-  "$gradient-pink": "linear-gradient(180deg, #F5576C 0%, #F093FB 100%)",
-  "$gradient-violet": "linear-gradient(180deg, #E41AFE 0%, #8035F8 100%)",
-  "$gradient-blue": "linear-gradient(180deg, #1ADBFE 0%, #3580F8 100%)",
-  "$gradient-yellow": "linear-gradient(180deg, #FEE41A 0%, #F89B35 100%)",
-  "$gradient-green": "linear-gradient(180deg, #C9DD4C 0%, #63BE7E 100%)",
-  "$gradient-red": "linear-gradient(180deg, #F26567 0%, #F79440 100%)",
-  "$gradient-purple": "linear-gradient(270deg, #9a47ed 0%, #8446ff 100%)",
-  "$gradient-purple-pink": "linear-gradient(90deg, #722eff 2%, #fe6ffc 100%)",
-  "$gradient-blue-purple": "linear-gradient(90deg, #18bfe3 20%, #8756ff 70%)",
-  "$gradient-dark-blue": "linear-gradient(90deg, #5550EF 0%, #7F4EFF 100%)",
-  "$gradient-primary-radial": "radial-gradient(rgb(179, 211, 255), rgb(62, 132, 244))"
-}

package/src/assets/tokens/json/index.ts

@@ -1,37 +0,0 @@
-import animations from './animations.json'
-import borderRadius from './border-radius.json'
-import boxShadows from './box-shadows.json'
-import colors from './colors.json'
-import durations from './durations.json'
-import easings from './easings.json'
-import fontFamilies from './font-families.json'
-import fontSizes from './font-sizes.json'
-import fontWeights from './font-weights.json'
-import gradients from './gradients.json'
-import letterSpacings from './letter-spacings.json'
-import lineHeights from './line-heights.json'
-import mediaQueries from './media-queries.json'
-import opacities from './opacities.json'
-import sizes from './sizes.json'
-import spacings from './spacings.json'
-import zIndexes from './z-indexes.json'
-
-export {
-  animations,
-  borderRadius,
-  boxShadows,
-  colors,
-  durations,
-  easings,
-  fontFamilies,
-  fontSizes,
-  fontWeights,
-  gradients,
-  letterSpacings,
-  lineHeights,
-  mediaQueries,
-  opacities,
-  sizes,
-  spacings,
-  zIndexes,
-}

package/src/assets/tokens/json/letter-spacings.json

@@ -1,4 +0,0 @@
-{
-  "$letter-spacing-m": "0.4px",
-  "$letter-spacing-l": "1px"
-}

package/src/assets/tokens/json/line-heights.json

@@ -1,18 +0,0 @@
-{
-  "$line-height-150": "12px",
-  "$line-height-200": "16px",
-  "$line-height-250": "20px",
-  "$line-height-300": "24px",
-  "$line-height-400": "32px",
-  "$line-height-500": "40px",
-  "$line-height-600": "48px",
-  "$token-line-heights": {
-    "150": "12px",
-    "200": "16px",
-    "250": "20px",
-    "300": "24px",
-    "400": "32px",
-    "500": "40px",
-    "600": "48px"
-  }
-}

package/src/assets/tokens/json/media-queries.json

@@ -1,26 +0,0 @@
-{
-  "$media-query-xs": "\"(min-width: 375px)\"",
-  "$media-query-s": "\"(min-width: 480px)\"",
-  "$media-query-m": "\"(min-width: 768px)\"",
-  "$media-query-l": "\"(min-width: 1024px)\"",
-  "$media-query-xl": "\"(min-width: 1440px)\"",
-  "$media-query-xs-down": "\"(max-width: 374px)\"",
-  "$media-query-s-down": "\"(max-width: 479px)\"",
-  "$media-query-m-down": "\"(max-width: 767px)\"",
-  "$media-query-l-down": "\"(max-width: 1023px)\"",
-  "$media-query-xl-down": "\"(max-width: 1439px)\"",
-  "$media-desktop": "\"(hover: hover) and (pointer: fine)\"",
-  "$media-mobile": "\"(hover: none) and (pointer: coarse)\"",
-  "$token-media-queries": {
-    "xs": "\"(min-width: 375px)\"",
-    "s": "\"(min-width: 480px)\"",
-    "m": "\"(min-width: 768px)\"",
-    "l": "\"(min-width: 1024px)\"",
-    "xl": "\"(min-width: 1440px)\"",
-    "xs-down": "\"(max-width: 374px)\"",
-    "s-down": "\"(max-width: 479px)\"",
-    "m-down": "\"(max-width: 767px)\"",
-    "l-down": "\"(max-width: 1023px)\"",
-    "xl-down": "\"(max-width: 1439px)\""
-  }
-}

package/src/assets/tokens/json/opacities.json

@@ -1,5 +0,0 @@
-{
-  "$opacity-disabled": "0.6",
-  "$opacity-active": "0.7",
-  "$opacity-hover": "0.8"
-}

package/src/assets/tokens/json/sizes.json

@@ -1,42 +0,0 @@
-{
-  "$size-50": "4px",
-  "$size-100": "8px",
-  "$size-150": "12px",
-  "$size-200": "16px",
-  "$size-250": "20px",
-  "$size-300": "24px",
-  "$size-400": "32px",
-  "$size-500": "40px",
-  "$size-550": "44px",
-  "$size-600": "48px",
-  "$size-700": "56px",
-  "$size-800": "64px",
-  "$size-900": "72px",
-  "$size-1000": "80px",
-  "$token-avatar-sizes": {
-    "300": "24px",
-    "400": "32px",
-    "500": "40px",
-    "600": "48px",
-    "700": "56px",
-    "800": "64px",
-    "900": "72px",
-    "1000": "80px"
-  },
-  "$token-icon-sizes": {
-    "50": "4px",
-    "100": "8px",
-    "150": "12px",
-    "200": "16px",
-    "250": "20px",
-    "300": "24px",
-    "400": "32px",
-    "500": "40px",
-    "550": "44px",
-    "600": "48px",
-    "700": "56px",
-    "800": "64px",
-    "900": "72px",
-    "1000": "80px"
-  }
-}

package/src/assets/tokens/json/spacings.json

@@ -1,34 +0,0 @@
-{
-  "$space-zero": "0",
-  "$space-50": "4px",
-  "$space-100": "8px",
-  "$space-150": "12px",
-  "$space-200": "16px",
-  "$space-250": "20px",
-  "$space-300": "24px",
-  "$space-350": "28px",
-  "$space-400": "32px",
-  "$space-450": "36px",
-  "$space-500": "40px",
-  "$space-600": "48px",
-  "$space-700": "56px",
-  "$space-800": "64px",
-  "$space-900": "72px",
-  "$space-1000": "80px",
-  "$token-spaces": {
-    "50": "4px",
-    "100": "8px",
-    "150": "12px",
-    "200": "16px",
-    "250": "20px",
-    "300": "24px",
-    "400": "32px",
-    "450": "36px",
-    "500": "40px",
-    "600": "48px",
-    "700": "56px",
-    "800": "64px",
-    "900": "72px",
-    "1000": "80px"
-  }
-}

package/src/assets/tokens/json/z-indexes.json

@@ -1,12 +0,0 @@
-{
-  "$z-index-sticky-tabs": "49",
-  "$z-index-dropdown": "100",
-  "$z-index-sticky": "100",
-  "$z-index-overlay-page": "7000",
-  "$z-index-modal": "8000",
-  "$z-index-top-line": "8000",
-  "$z-index-header": "10000",
-  "$z-index-notification": "10001",
-  "$z-index-overlay": "10002",
-  "$z-index-toasted": "10003"
-}

package/src/assets/tokens/letter-spacings.scss

@@ -1,6 +0,0 @@
-/**
-  * @tokens Letter Spacing
-  * @presenter Spacing
-  */
-$letter-spacing-m: 0.4px;
-$letter-spacing-l: 1px;

package/src/assets/tokens/line-heights.scss

@@ -1,22 +0,0 @@
-/**
- * @tokens Line Heights
- * @presenter LineHeight
- */
-
-$line-height-150: 12px; /* Additional token */
-$line-height-200: 16px;
-$line-height-250: 20px; /* Additional token */
-$line-height-300: 24px;
-$line-height-400: 32px;
-$line-height-500: 40px;
-$line-height-600: 48px;
-
-$token-line-heights: (
-  150: $line-height-150,
-  200: $line-height-200,
-  250: $line-height-250,
-  300: $line-height-300,
-  400: $line-height-400,
-  500: $line-height-500,
-  600: $line-height-600,
-);

package/src/assets/tokens/media-queries.scss

@@ -1,32 +0,0 @@
-/**
- * @tokens Media Queries
- * @presenter Spacing
- */
-
-$media-query-xs: "(min-width: 375px)";
-$media-query-s: "(min-width: 480px)";
-$media-query-m: "(min-width: 768px)";
-$media-query-l: "(min-width: 1024px)";
-$media-query-xl: "(min-width: 1440px)";
-
-$media-query-xs-down: "(max-width: 374px)";
-$media-query-s-down: "(max-width: 479px)";
-$media-query-m-down: "(max-width: 767px)";
-$media-query-l-down: "(max-width: 1023px)";
-$media-query-xl-down: "(max-width: 1439px)";
-
-$media-desktop: "(hover: hover) and (pointer: fine)";
-$media-mobile: "(hover: none) and (pointer: coarse)";
-
-$token-media-queries: (
-  "xs": $media-query-xs,
-  "s": $media-query-s,
-  "m": $media-query-m,
-  "l": $media-query-l,
-  "xl": $media-query-xl,
-  "xs-down": $media-query-xs-down,
-  "s-down": $media-query-s-down,
-  "m-down": $media-query-m-down,
-  "l-down": $media-query-l-down,
-  "xl-down": $media-query-xl-down,
-);

package/src/assets/tokens/opacities.scss

@@ -1,8 +0,0 @@
-/**
-  * @tokens Opacities
-  * @presenter Opacity
-  */
-$opacity-disabled: 0.6;
-$opacity-active: 0.7;
-$opacity-hover: 0.8;
-

package/src/assets/tokens/sizes.scss

@@ -1,47 +0,0 @@
-/**
-* @tokens Sizes
-* @presenter Spacing
-*/
-
-$size-50: 4px; /* Additional token */
-$size-100: 8px;
-$size-150: 12px; /* Additional token */
-$size-200: 16px;
-$size-250: 20px; /* Additional token */
-$size-300: 24px;
-$size-400: 32px;
-$size-500: 40px;
-$size-550: 44px; /* Additional token */
-$size-600: 48px;
-$size-700: 56px;
-$size-800: 64px;
-$size-900: 72px;
-$size-1000: 80px;
-
-$token-avatar-sizes: (
-  300: $size-300,
-  400: $size-400,
-  500: $size-500,
-  600: $size-600,
-  700: $size-700,
-  800: $size-800,
-  900: $size-900,
-  1000: $size-1000,
-);
-
-$token-icon-sizes: (
-  50: $size-50,
-  100: $size-100,
-  150: $size-150,
-  200: $size-200,
-  250: $size-250,
-  300: $size-300,
-  400: $size-400,
-  500: $size-500,
-  550: $size-550,
-  600: $size-600,
-  700: $size-700,
-  800: $size-800,
-  900: $size-900,
-  1000: $size-1000,
-);

package/src/assets/tokens/spacings.scss

@@ -1,38 +0,0 @@
-/**
- * @tokens Spacings
- * @presenter Spacing
- */
-
-$space-zero: 0;
-$space-50: 4px; /* Additional token */
-$space-100: 8px;
-$space-150: 12px; /* Additional token */
-$space-200: 16px;
-$space-250: 20px; /* Additional token */
-$space-300: 24px;
-$space-350: 28px; /* Additional token */
-$space-400: 32px;
-$space-450: 36px; /* Additional token */
-$space-500: 40px;
-$space-600: 48px;
-$space-700: 56px;
-$space-800: 64px;
-$space-900: 72px;
-$space-1000: 80px;
-
-$token-spaces: (
-  50: $space-50, /* Additional token */
-  100: $space-100,
-  150: $space-150, /* Additional token */
-  200: $space-200,
-  250: $space-250, /* Additional token */
-  300: $space-300,
-  400: $space-400,
-  450: $space-450, /* Additional token */
-  500: $space-500,
-  600: $space-600,
-  700: $space-700,
-  800: $space-800,
-  900: $space-900,
-  1000: $space-1000,
-);

package/src/assets/tokens/z-indexes.scss

@@ -1,14 +0,0 @@
-/**
- * @tokens Z-Index
- */
-
-$z-index-sticky-tabs: 49;
-$z-index-dropdown: 100;
-$z-index-sticky: 100;
-$z-index-overlay-page: 7000;
-$z-index-modal: 8000;
-$z-index-top-line: 8000;
-$z-index-header: 10000;
-$z-index-notification: 10001;
-$z-index-overlay: 10002;
-$z-index-toasted: 10003;

package/src/components/elements/McAvatar/McAvatar.stories.ts

@@ -1,71 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3';
-import McAvatar from './McAvatar.vue'
-import { AvatarSizes } from '@/types/styles/AvatarSizes'
-import { Colors } from '@/types/styles/Colors'
-
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
-const meta = {
-    title: 'McAvatar',
-    component: McAvatar,
-    // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/writing-docs/autodocs
-    tags: ['autodocs'],
-    argTypes: {
-        size: { control: 'select', options: Object.keys(AvatarSizes) },
-        src: { control: 'text' },
-        alt: { control: 'text' },
-        borderColor: { control: 'select', options: Object.keys(Colors) },
-        dotColor: { control: 'select', options: Object.keys(Colors) },
-        rounded: { control: 'boolean' },
-        shadow: { control: 'boolean' },
-        lazy: { control: 'boolean' },
-    },
-    args: {
-        src: 'https://avatars.githubusercontent.com/u/63395408?s=400&u=5f3ae555700cfcacf278425bf37c1433c3ed43c1&v=4',
-        alt: 'I am alternative',
-        size: '1000',
-        borderColor: '',
-        dotColor: '',
-        rounded: true,
-        shadow: false,
-        lazy: false,
-        draggable: false,
-    },
-    parameters: {
-        componentSubtitle: 'Status: Ready',
-        design: {
-            type: 'figma',
-            url: 'https://www.figma.com/file/LXNkU1vlAYmydEiC0l0gDa/MC-Design-System?node-id=127%3A1390',
-        },
-    },
-} satisfies Meta<typeof McAvatar>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-/*
- *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/api/csf
- * to learn how to use render functions.
- */
-export const Shadow: Story = {
-    args: {
-        shadow: true,
-    },
-};
-export const Size: Story = {
-    args: {
-        size: '300',
-        dotColor: 'purple',
-    },
-};
-export const Draggable: Story = {
-    args: {
-        draggable: true,
-        borderColor: 'red',
-    },
-};
-export const Unrounded: Story = {
-    args: {
-        rounded: false,
-        dotColor: 'purple',
-    },
-};