mediacube-ui-v2 0.0.46 → 0.0.47

package/README.md

@@ -134,7 +134,7 @@ TypeScript cannot handle type information for `.vue` imports by default, so we r
 
 ## Storybook interface support
 
-![info image storybook interface](/npm_preview.jpg)
+![info image storybook interface](/dist/npm_preview.jpg)
 
 [//]: # (## Available Types)
 [//]: # (—)

package/README.template.md

@@ -134,7 +134,7 @@ TypeScript cannot handle type information for `.vue` imports by default, so we r
 
 ## Storybook interface support
 
-![info image storybook interface](/npm_preview.jpg)
+![info image storybook interface](/dist/npm_preview.jpg)
 
 [//]: # (## Available Types)
 [//]: # ({{types}})

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "mediacube-ui-v2",
-  "version": "0.0.46",
+  "version": "0.0.47",
+  "license": "MIT",
   "description": "Design system for Mediacube services",
   "keywords": [
     "vue3",
@@ -9,22 +10,26 @@
     "design-system"
   ],
   "author": "dsa@mediacube.io",
-  "license": "MIT",
   "main": "./dist/mediacube-ui-v2.umd.cjs",
   "module": "./dist/mediacube-ui-v2.js",
   "types": "./dist/types/index.d.ts",
   "style": "./dist/style.css",
-  "tokens": "./dist/assets/tokens/",
-  "styles": "./dist/assets/styles/",
   "exports": {
     ".": {
       "import": "./dist/mediacube-ui-v2.js",
       "require": "./dist/mediacube-ui-v2.umd.cjs"
     },
-    "./style": "./dist/style.css"
+    "./style": "./dist/style.css",
+    "./variables": "./dist/assets/variables.scss",
+    "./tokens/*": "./dist/assets/tokens/*",
+    "./styles/*": "./dist/assets/styles/*",
+    "./fonts/*": "./dist/assets/fonts/*"
   },
   "files": [
-    "dist"
+    "dist",
+    "dist/assets/tokens",
+    "dist/assets/styles",
+    "dist/assets/fonts"
   ],
   "private": false,
   "type": "module",

package/dist/assets/tokens/json/animations.json

@@ -1,6 +0,0 @@
-{
-  "$animation-slide-up": "slide-up 0.3s",
-  "$animation-slide-up-with-margin": "slide-up-with-margin 0.3s",
-  "$animation-spinner": "rotate 1.2s infinite cubic-bezier(0.55, 0, 0.1, 1)",
-  "$animation-glow": "glow 1.5s ease-in-out infinite"
-}

package/dist/assets/tokens/json/border-radius.json

@@ -1,24 +0,0 @@
-{
-  "$radius-square": "0px",
-  "$radius-50": "4px",
-  "$radius-100": "8px",
-  "$radius-150": "12px",
-  "$radius-200": "16px",
-  "$radius-300": "24px",
-  "$radius-400": "32px",
-  "$radius-1250": "100px",
-  "$radius-rounded": "300px",
-  "$radius-circle": "50%",
-  "$token-radius": {
-    "50": "4px",
-    "100": "8px",
-    "150": "12px",
-    "200": "16px",
-    "300": "24px",
-    "400": "32px",
-    "1250": "100px",
-    "square": "0px",
-    "rounded": "300px",
-    "circle": "50%"
-  }
-}

package/dist/assets/tokens/json/box-shadows.json

@@ -1,24 +0,0 @@
-{
-  "$shadow-xs": "0 2px 8px rgba(0, 0, 0, 0.16)",
-  "$shadow-s": "0 4px 12px rgba(0, 0, 0, 0.16)",
-  "$shadow-m": "0 12px 32px rgba(0, 0, 0, 0.24)",
-  "$shadow-l": "0 24px 40px rgba(0, 0, 0, 0.16)",
-  "$shadow-xs-blue": "0px 2px 8px rgba(51, 68, 153, 0.1)",
-  "$shadow-s-blue": "0 4px 12px rgba(51, 68, 153, 0.1)",
-  "$shadow-m-blue": "0 12px 32px rgba(51, 68, 153, 0.2)",
-  "$shadow-xs-purple": "0px 2px 8px rgba(91, 44, 205, 0.1)",
-  "$shadow-s-purple": "0 4px 12px rgba(91, 44, 205, 0.1)",
-  "$shadow-m-purple": "0 12px 32px rgba(91, 44, 205, 0.2)",
-  "$token-shadows": {
-    "xs": "0 2px 8px rgba(0, 0, 0, 0.16)",
-    "s": "0 4px 12px rgba(0, 0, 0, 0.16)",
-    "m": "0 12px 32px rgba(0, 0, 0, 0.24)",
-    "l": "0 24px 40px rgba(0, 0, 0, 0.16)",
-    "xs-blue": "0px 2px 8px rgba(51, 68, 153, 0.1)",
-    "s-blue": "0 4px 12px rgba(51, 68, 153, 0.1)",
-    "m-blue": "0 12px 32px rgba(51, 68, 153, 0.2)",
-    "xs-purple": "0px 2px 8px rgba(91, 44, 205, 0.1)",
-    "s-purple": "0 4px 12px rgba(91, 44, 205, 0.1)",
-    "m-purple": "0 12px 32px rgba(91, 44, 205, 0.2)"
-  }
-}

package/dist/assets/tokens/json/colors.json

@@ -1,71 +0,0 @@
-{
-  "$color-black": "#202427",
-  "$color-dark-gray": "#5C6670",
-  "$color-gray": "#8F99A3",
-  "$color-outline-gray": "#C7CCD1",
-  "$color-outline-light": "#DEE0E2",
-  "$color-hover-gray": "#EDF0F3",
-  "$color-bg-gray": "#F5F6Fa",
-  "$color-white": "#FFFFFF",
-  "$color-hover-purple": "#7238FF",
-  "$color-purple": "#8756FF",
-  "$color-light-purple": "#CBB7FF",
-  "$color-lighter-purple": "#EEE8FF",
-  "$color-bg-purple": "#9673ED",
-  "$color-primary-bg": "#F5F6Fa",
-  "$color-hover-blue": "#0A54C2",
-  "$color-blue": "#2578F4",
-  "$color-light-blue": "#92BBFA",
-  "$color-lighter-blue": "#E1EDFF",
-  "$color-dark-orange": "#BD8400",
-  "$color-orange": "#FCB100",
-  "$color-yellow": "#FFC60A",
-  "$color-dark-red": "#D5260B",
-  "$color-bright-pink": "#e8178a",
-  "$color-red": "#F5563D",
-  "$color-pale-pink": "#FC9283",
-  "$color-dark-green": "#218321",
-  "$color-green": "#4DCB4D",
-  "$color-toxic": "#E8F443",
-  "$color-ultraviolet": "#C41CFD",
-  "$color-pinkish": "#F073B1",
-  "$color-azure": "#0A85C2",
-  "$color-turquoise": "#4EA9A2",
-  "$color-darken-turquoise": "#2F8C99",
-  "$color-transparent": "transparent",
-  "$token-colors": {
-    "purple": "#8756FF",
-    "hover-purple": "#7238FF",
-    "light-purple": "#CBB7FF",
-    "bg-purple": "#9673ED",
-    "lighter-purple": "#EEE8FF",
-    "black": "#202427",
-    "outline-light": "#DEE0E2",
-    "dark-gray": "#5C6670",
-    "gray": "#8F99A3",
-    "outline-gray": "#C7CCD1",
-    "hover-gray": "#EDF0F3",
-    "bg-gray": "#F5F6Fa",
-    "white": "#FFFFFF",
-    "hover-blue": "#0A54C2",
-    "blue": "#2578F4",
-    "light-blue": "#92BBFA",
-    "lighter-blue": "#E1EDFF",
-    "dark-orange": "#BD8400",
-    "orange": "#FCB100",
-    "yellow": "#FFC60A",
-    "dark-red": "#D5260B",
-    "red": "#F5563D",
-    "bright-pink": "#e8178a",
-    "pale-pink": "#FC9283",
-    "dark-green": "#218321",
-    "green": "#4DCB4D",
-    "toxic": "#E8F443",
-    "ultraviolet": "#C41CFD",
-    "pinkish": "#F073B1",
-    "azure": "#0A85C2",
-    "turquoise": "#4EA9A2",
-    "darken-turquoise": "#2F8C99",
-    "transparent": "transparent"
-  }
-}

package/dist/assets/tokens/json/durations.json

@@ -1,10 +0,0 @@
-{
-  "$duration-s": "150ms",
-  "$duration-m": "300ms",
-  "$duration-l": "500ms",
-  "$token-durations": {
-    "s": "150ms",
-    "m": "300ms",
-    "l": "500ms"
-  }
-}

package/dist/assets/tokens/json/easings.json

@@ -1,3 +0,0 @@
-{
-  "$easing-swift": "cubic-bezier(0.55, 0, 0.1, 1)"
-}

package/dist/assets/tokens/json/font-families.json

@@ -1,4 +0,0 @@
-{
-  "$font-family-main": "'Inter', sans-serif",
-  "$font-family-additional": "'Source Serif Pro', serif"
-}

package/dist/assets/tokens/json/font-sizes.json

@@ -1,18 +0,0 @@
-{
-  "$font-size-100": "10px",
-  "$font-size-200": "13px",
-  "$font-size-300": "16px",
-  "$font-size-400": "20px",
-  "$font-size-500": "28px",
-  "$font-size-600": "32px",
-  "$font-size-700": "48px",
-  "$token-font-sizes": {
-    "100": "10px",
-    "200": "13px",
-    "300": "16px",
-    "400": "20px",
-    "500": "28px",
-    "600": "32px",
-    "700": "48px"
-  }
-}

package/dist/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/dist/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/dist/assets/tokens/json/index.d.ts

@@ -1,19 +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, };
-//# sourceMappingURL=index.d.ts.map

package/dist/assets/tokens/json/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA,OAAO,UAAU,MAAM,mBAAmB,CAAA;AAC1C,OAAO,YAAY,MAAM,sBAAsB,CAAA;AAC/C,OAAO,UAAU,MAAM,oBAAoB,CAAA;AAC3C,OAAO,MAAM,MAAM,eAAe,CAAA;AAClC,OAAO,SAAS,MAAM,kBAAkB,CAAA;AACxC,OAAO,OAAO,MAAM,gBAAgB,CAAA;AACpC,OAAO,YAAY,MAAM,sBAAsB,CAAA;AAC/C,OAAO,SAAS,MAAM,mBAAmB,CAAA;AACzC,OAAO,WAAW,MAAM,qBAAqB,CAAA;AAC7C,OAAO,SAAS,MAAM,kBAAkB,CAAA;AACxC,OAAO,cAAc,MAAM,wBAAwB,CAAA;AACnD,OAAO,WAAW,MAAM,qBAAqB,CAAA;AAC7C,OAAO,YAAY,MAAM,sBAAsB,CAAA;AAC/C,OAAO,SAAS,MAAM,kBAAkB,CAAA;AACxC,OAAO,KAAK,MAAM,cAAc,CAAA;AAChC,OAAO,QAAQ,MAAM,iBAAiB,CAAA;AACtC,OAAO,QAAQ,MAAM,kBAAkB,CAAA;AAEvC,OAAO,EACL,UAAU,EACV,YAAY,EACZ,UAAU,EACV,MAAM,EACN,SAAS,EACT,OAAO,EACP,YAAY,EACZ,SAAS,EACT,WAAW,EACX,SAAS,EACT,cAAc,EACd,WAAW,EACX,YAAY,EACZ,SAAS,EACT,KAAK,EACL,QAAQ,EACR,QAAQ,GACT,CAAA"}

package/dist/assets/tokens/json/index.js

@@ -1,18 +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/dist/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/dist/assets/tokens/json/letter-spacings.json

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

package/dist/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/dist/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/dist/assets/tokens/json/opacities.json

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

package/dist/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/dist/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/dist/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"
-}