@cube-dev/ui-kit 0.59.14 → 0.60.0

package/es/tasty/styles/predefined.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.59.14
+ * @cube-dev/ui-kit v0.60.0
  * Released under the MIT license.
  */
 
@@ -88,21 +88,21 @@ export function defineStyleAlias(styleName, cssStyleName, converter) {
 export function predefine() {
     // Manually define styles that are used in other custom styles.
     // Otherwise, they won't be handled as expected.
-    defineStyleAlias('fontSize');
-    defineStyleAlias('lineHeight');
-    defineStyleAlias('fontWeight');
+    defineStyleAlias('fontSize', 'font-size', numberConverter);
+    defineStyleAlias('lineHeight', 'line-height', numberConverter);
+    defineStyleAlias('fontWeight', 'font-weight', numberConverter);
     defineStyleAlias('fontStyle');
-    defineStyleAlias('letterSpacing');
+    defineStyleAlias('letterSpacing', 'letter-spacing', numberConverter);
     defineStyleAlias('textTransform');
     defineStyleAlias('fontFamily');
-    defineStyleAlias('paddingTop');
-    defineStyleAlias('paddingRight');
-    defineStyleAlias('paddingBottom');
-    defineStyleAlias('paddingLeft');
-    defineStyleAlias('marginTop');
-    defineStyleAlias('marginRight');
-    defineStyleAlias('marginBottom');
-    defineStyleAlias('marginLeft');
+    defineStyleAlias('paddingTop', 'padding-top', numberConverter);
+    defineStyleAlias('paddingRight', 'padding-right', numberConverter);
+    defineStyleAlias('paddingBottom', 'padding-bottom', numberConverter);
+    defineStyleAlias('paddingLeft', 'padding-left', numberConverter);
+    defineStyleAlias('marginTop', 'margin-top', numberConverter);
+    defineStyleAlias('marginRight', 'margin-right', numberConverter);
+    defineStyleAlias('marginBottom', 'margin-bottom', numberConverter);
+    defineStyleAlias('marginLeft', 'margin-left', numberConverter);
     // Coordinates
     defineStyleAlias('top', 'top', numberConverter);
     defineStyleAlias('right', 'right', numberConverter);
@@ -126,7 +126,7 @@ export function predefine() {
             .join('/');
     });
     // Other styles
-    defineStyleAlias('outlineOffset', 'outlineOffset', numberConverter);
+    defineStyleAlias('outlineOffset', 'outline-offset', numberConverter);
     [
         displayStyle,
         transitionStyle,

package/es/tasty/styles/preset.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.59.14
+ * @cube-dev/ui-kit v0.60.0
  * Released under the MIT license.
  */
 
@@ -31,7 +31,11 @@ export function presetStyle({ preset, fontSize, lineHeight, textTransform, lette
         return '';
     if (preset === true)
         preset = '';
-    const { mods } = parseStyle(preset);
+    let { mods } = parseStyle(preset);
+    const isStrong = mods.includes('strong');
+    const isItalic = mods.includes('italic');
+    const isIcon = mods.includes('icon');
+    mods = mods.filter((mod) => mod !== 'bold' && mod !== 'italic' && mod !== 'icon');
     const name = mods[0] || 'default';
     const styles = {};
     if (!fontSize) {
@@ -57,6 +61,16 @@ export function presetStyle({ preset, fontSize, lineHeight, textTransform, lette
     }
     setCSSValue(styles, 'bold-font-weight', name, true);
     setCSSValue(styles, 'icon-size', name, true);
+    if (isStrong) {
+        styles['font-weight'] = 'var(--bold-font-weight)';
+    }
+    if (isItalic) {
+        styles['font-style'] = 'italic';
+    }
+    if (isIcon) {
+        styles['font-size'] = 'var(--icon-size)';
+        styles['line-height'] = 'var(--icon-size)';
+    }
     return styles;
 }
 presetStyle.__lookupStyles = [

package/es/tasty/styles/radius.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.59.14
+ * @cube-dev/ui-kit v0.60.0
  * Released under the MIT license.
  */
 

package/es/tasty/styles/reset.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.59.14
+ * @cube-dev/ui-kit v0.60.0
  * Released under the MIT license.
  */
 

package/es/tasty/styles/shadow.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.59.14
+ * @cube-dev/ui-kit v0.60.0
  * Released under the MIT license.
  */
 

package/es/tasty/styles/styledScrollbar.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.59.14
+ * @cube-dev/ui-kit v0.60.0
  * Released under the MIT license.
  */
 

package/es/tasty/styles/transition.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.59.14
+ * @cube-dev/ui-kit v0.60.0
  * Released under the MIT license.
  */
 

package/es/tasty/styles/types.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.59.14
+ * @cube-dev/ui-kit v0.60.0
  * Released under the MIT license.
  */
 

package/es/tasty/styles/width.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.59.14
+ * @cube-dev/ui-kit v0.60.0
  * Released under the MIT license.
  */
 

package/es/tasty/tasty.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.59.14
+ * @cube-dev/ui-kit v0.60.0
  * Released under the MIT license.
  */
 

package/es/tasty/types.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.59.14
+ * @cube-dev/ui-kit v0.60.0
  * Released under the MIT license.
  */
 

package/es/tasty/utils/cache-wrapper.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.59.14
+ * @cube-dev/ui-kit v0.60.0
  * Released under the MIT license.
  */
 

package/es/tasty/utils/case-converter.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.59.14
+ * @cube-dev/ui-kit v0.60.0
  * Released under the MIT license.
  */
 

package/es/tasty/utils/colors.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.59.14
+ * @cube-dev/ui-kit v0.60.0
  * Released under the MIT license.
  */
 

package/es/tasty/utils/dotize.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.59.14
+ * @cube-dev/ui-kit v0.60.0
  * Released under the MIT license.
  */
 

package/es/tasty/utils/filterBaseProps.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.59.14
+ * @cube-dev/ui-kit v0.60.0
  * Released under the MIT license.
  */
 

package/es/tasty/utils/getDisplayName.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.59.14
+ * @cube-dev/ui-kit v0.60.0
  * Released under the MIT license.
  */
 

package/es/tasty/utils/getModCombinations.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.59.14
+ * @cube-dev/ui-kit v0.60.0
  * Released under the MIT license.
  */
 

package/es/tasty/utils/mergeStyles.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.59.14
+ * @cube-dev/ui-kit v0.60.0
  * Released under the MIT license.
  */
 

package/es/tasty/utils/modAttrs.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.59.14
+ * @cube-dev/ui-kit v0.60.0
  * Released under the MIT license.
  */
 

package/es/tasty/utils/renderStyles.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.59.14
+ * @cube-dev/ui-kit v0.60.0
  * Released under the MIT license.
  */
 

package/es/tasty/utils/responsive.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.59.14
+ * @cube-dev/ui-kit v0.60.0
  * Released under the MIT license.
  */
 

package/es/tasty/utils/string.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.59.14
+ * @cube-dev/ui-kit v0.60.0
  * Released under the MIT license.
  */
 

package/es/tasty/utils/styles.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.59.14
+ * @cube-dev/ui-kit v0.60.0
  * Released under the MIT license.
  */
 
@@ -14,6 +14,7 @@ const IS_DVH_SUPPORTED = typeof CSS !== 'undefined' && typeof CSS?.supports ===
     : false;
 export const CUSTOM_UNITS = {
     r: 'var(--radius)',
+    cr: 'var(--card-radius)',
     bw: 'var(--border-width)',
     ow: 'var(--outline-width)',
     x: 'var(--gap)',

package/es/tasty/utils/warnings.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.59.14
+ * @cube-dev/ui-kit v0.60.0
  * Released under the MIT license.
  */
 

package/es/tokens.js

@@ -1,38 +1,47 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.59.14
+ * @cube-dev/ui-kit v0.60.0
  * Released under the MIT license.
  */
 
 const colors = {
     pink: '255 100 146',
     'pink-02': '255 131 168',
-    purple: '122 119 255',
-    'purple-text': '102 93 232',
+    purple: '113 110 238',
+    'purple-text': '105 103 227',
+    'purple-bg': '241 239 250',
+    'purple-icon': '142, 134, 237',
     'purple-01': '122 119 255',
     'purple-02': '149 146 255',
     'purple-03': '175 173 255',
     'purple-04': '202 201 255',
+    focus: '172 163 238',
     text: '91 92 125',
-    dark: '20 20 70',
-    'dark-01': '20 20 70',
-    'dark-02': '67 67 107',
-    'dark-03': '114 114 144',
-    'dark-04': '161 161 181',
-    'dark-05': '213 213 226',
-    'grey-light': '248 248 249',
+    dark: '25 26 46',
+    'dark-01': '25 26 46',
+    'dark-02': '69 68 98',
+    'dark-03': '115 114 139',
+    'dark-04': '161 161 178',
+    'dark-05': '213 213 222',
+    'dark-bg': '249 249 251',
     light: '246 246 248',
     white: '255 255 255',
     black: '0 0 0',
-    'danger-text': '227 0 42',
-    danger: '255 55 73',
-    'light-grey': '248 248 249',
-    success: '49 195 124',
-    'success-text': '48 166 102',
-    note: '251 188 5',
-    'note-text': '169 125 0',
-    warning: '224 86 43',
+    danger: '227 70 75',
+    'danger-text': '208 57 56',
+    'danger-bg': '253 245 244',
+    'danger-icon': '245 101 99',
+    success: '9 145 88',
+    'success-text': '12 135 82',
+    'success-icon': '40 165 104',
+    'success-bg': '238 249 242',
+    note: '158 119 19',
+    'note-text': '150 112 8',
+    'note-bg': '253 245 233',
+    'note-icon': '181 140 44',
+    border: '227 227 233',
+    'light-border': '237 237 240',
 };
 function color(name, opacity = 1) {
     return `rgb(${colors[name]} / ${opacity})`;
@@ -46,23 +55,21 @@ const TOKENS = {
     'input-letter-spacing': '0.02em',
     'disabled-opacity': '.4',
     gap: '8px',
+    'stroke-width': 1.5,
     'outline-width': 'calc(1rem / 16 * 3)',
     'border-width': '1px',
     radius: '6px',
     'large-radius': '(1r + .5x)',
+    'card-radius': '(1r + .5x)',
     'leaf-sharp-radius': '0px',
     'fade-width': '32px',
     transition: '80ms',
     'min-dialog-size': 'min(288px, calc(100vw - (2 * var(--gap))))',
     'clear-color': 'transparent',
-    'border-color': color('dark', 0.1),
     'border-opaque-color': 'rgb(227 227 233)',
     'shadow-color': color('dark-03', 0.1),
     'draft-color': color('dark', 0.2),
     'minor-color': color('dark', 0.65),
-    'success-bg-color': 'rgb(41 190 110 / .1)',
-    'note-bg-color': color('note', 0.1),
-    'danger-bg-color': color('danger', 0.05),
     'danger-bg-hover-color': color('danger', 0.1),
     'primary-1': color('purple', 0.9),
     'primary-2': color('purple', 0.8),
@@ -95,38 +102,44 @@ const TOKENS = {
     'h1-font-size': '36px',
     'h1-line-height': '44px',
     'h1-letter-spacing': '-0.01em',
-    'h1-font-weight': '700',
-    'h1-icon-size': '38px',
+    'h1-font-weight': '600',
+    'h1-bold-font-weight': '700',
+    'h1-icon-size': '40px',
     // h2
     'h2-font-size': '24px',
-    'h2-line-height': '36px',
+    'h2-line-height': '32px',
     'h2-letter-spacing': '0em',
-    'h2-font-weight': '700',
-    'h2-icon-size': '26px',
+    'h2-font-weight': '600',
+    'h2-bold-font-weight': '700',
+    'h2-icon-size': '28px',
     // h3
     'h3-font-size': '20px',
     'h3-line-height': '28px',
     'h3-letter-spacing': '0em',
-    'h3-font-weight': '700',
-    'h3-icon-size': '22px',
+    'h3-font-weight': '600',
+    'h3-bold-font-weight': '700',
+    'h3-icon-size': '24px',
     // h4
     'h4-font-size': '18px',
     'h4-line-height': '24px',
     'h4-letter-spacing': '0',
-    'h4-font-weight': '700',
-    'h4-icon-size': '20px',
+    'h4-font-weight': '600',
+    'h4-bold-font-weight': '700',
+    'h4-icon-size': '22px',
     // h5
     'h5-font-size': '16px',
     'h5-line-height': '22px',
     'h5-letter-spacing': '0',
-    'h5-font-weight': '700',
-    'h5-icon-size': '18px',
+    'h5-font-weight': '600',
+    'h5-bold-font-weight': '700',
+    'h5-icon-size': '20px',
     // h6
     'h6-font-size': '14px',
     'h6-line-height': '20px',
     'h6-letter-spacing': '0.01em',
     'h6-font-weight': '600',
-    'h6-icon-size': '16px',
+    'h6-bold-font-weight': '700',
+    'h6-icon-size': '20px',
     // t1
     't1-font-size': '18px',
     't1-line-height': '24px',
@@ -138,88 +151,108 @@ const TOKENS = {
     't2-line-height': '22px',
     't2-letter-spacing': '0',
     't2-font-weight': '400',
-    't2-icon-size': '18px',
+    't2-icon-size': '20px',
     // t2m
     't2m-font-size': '16px',
     't2m-line-height': '22px',
     't2m-letter-spacing': '0',
     't2m-font-weight': '500',
-    't2m-icon-size': '18px',
+    't2m-icon-size': '20px',
     // t3
     't3-font-size': '14px',
     't3-line-height': '20px',
     't3-letter-spacing': '0',
     't3-font-weight': '400',
-    't3-icon-size': '16px',
+    't3-icon-size': '18px',
     // t3m
     't3m-font-size': '14px',
     't3m-line-height': '20px',
     't3m-letter-spacing': '0',
     't3m-font-weight': '500',
-    't3m-icon-size': '16px',
+    't3m-icon-size': '18px',
     // t4
     't4-font-size': '12px',
     't4-line-height': '18px',
     't4-letter-spacing': '0',
     't4-font-weight': '500',
-    't4-icon-size': '14px',
+    't4-icon-size': '16px',
     // t4m
     't4m-font-size': '12px',
     't4m-line-height': '18px',
     't4m-letter-spacing': '0',
     't4m-font-weight': '600',
-    't4m-icon-size': '14px',
+    't4m-bold-font-weight': '700',
+    't4m-icon-size': '16px',
+    // m1
+    'm1-font-size': '18px',
+    'm1-line-height': '32px',
+    'm1-letter-spacing': '0',
+    'm1-font-weight': '400',
+    'm1-icon-size': '22px',
+    // m2
+    'm2-font-size': '16px',
+    'm2-line-height': '28px',
+    'm2-letter-spacing': '0',
+    'm2-font-weight': '400',
+    'm2-icon-size': '20px',
+    // m2
+    'm3-font-size': '14px',
+    'm3-line-height': '24px',
+    'm3-letter-spacing': '0',
+    'm3-font-weight': '400',
+    'm3-icon-size': '20px',
     // p1
     'p1-font-size': '18px',
     'p1-line-height': '28px',
     'p1-letter-spacing': '0',
     'p1-font-weight': '400',
-    'p1-icon-size': '20px',
+    'p1-icon-size': '22px',
     // p2
     'p2-font-size': '16px',
     'p2-line-height': '24px',
     'p2-letter-spacing': '0',
     'p2-font-weight': '400',
-    'p2-icon-size': '18px',
+    'p2-icon-size': '20px',
     // p3
     'p3-font-size': '14px',
     'p3-line-height': '22px',
     'p3-letter-spacing': '0',
     'p3-font-weight': '400',
-    'p3-icon-size': '16px',
+    'p3-icon-size': '18px',
     // p4
     'p4-font-size': '12px',
     'p4-line-height': '20px',
     'p4-letter-spacing': '0',
     'p4-font-weight': '500',
-    'p4-icon-size': '14px',
+    'p4-icon-size': '16px',
     // c1
     'c1-font-size': '14px',
     'c1-line-height': '20px',
     'c1-letter-spacing': '0',
     'c1-font-weight': '500',
     'c1-text-transform': 'uppercase',
-    'c1-icon-size': '16px',
+    'c1-icon-size': '18px',
     // c2
     'c2-font-size': '12px',
     'c2-line-height': '18px',
     'c2-letter-spacing': '0.01em',
     'c2-font-weight': '500',
     'c2-text-transform': 'uppercase',
-    'c2-icon-size': '14px',
+    'c2-icon-size': '16px',
     // tag
     'tag-font-size': '12px',
     'tag-line-height': '18px',
     'tag-letter-spacing': '0.01em',
     'tag-font-weight': '600',
-    'tag-icon-size': '14px',
+    'tag-bold-font-weight': '700',
+    'tag-icon-size': '16px',
     // strong
     'strong-font-size': 'inherit',
     'strong-line-height': 'inherit',
     'strong-letter-spacing': 'inherit',
     'strong-font-family': 'inherit',
     'strong-font-style': 'inherit',
-    'strong-font-weight': 'var(--bold-font-weight, var(--default-bold-font-weight, 700))',
+    'strong-font-weight': 'var(--bold-font-weight, var(--default-bold-font-weight, 600))',
     // em
     'em-font-size': 'inherit',
     'em-line-height': 'inherit',
@@ -232,7 +265,7 @@ const TOKENS = {
     'default-line-height': 'var(--t3-line-height)',
     'default-letter-spacing': 'var(--t3-letter-spacing)',
     'default-font-weight': 'var(--t3-font-weight)',
-    'default-bold-font-weight': '700',
+    'default-bold-font-weight': '600',
     'default-icon-size': 'inherit',
     // scrollbar colors
     'scrollbar-width': '1.5x',
@@ -240,7 +273,7 @@ const TOKENS = {
     'scrollbar-radius': '1.5r',
     'scrollbar-thumb-color': 'rgb(var(--text-color-rgb) / .5)',
     'scrollbar-outline-color': 'var(--clear-color)',
-    'scrollbar-bg-color': 'var(--grey-light-color)',
+    'scrollbar-bg-color': 'var(--dark-bg-color)',
     'scrollbar-corner-color': 'var(--clear-color)',
 };
 // Map color tokens

package/es/type-checks.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.59.14
+ * @cube-dev/ui-kit v0.60.0
  * Released under the MIT license.
  */
 

package/es/utils/ResizeSensor.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.59.14
+ * @cube-dev/ui-kit v0.60.0
  * Released under the MIT license.
  */
 

package/es/utils/modules.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.59.14
+ * @cube-dev/ui-kit v0.60.0
  * Released under the MIT license.
  */