@devprotocol/hashi - npm Package Compare versions

Comparing version 0.1.4 to 0.1.5

package.json

 {
   "name": "@devprotocol/hashi",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "description": "Dev Protocol's design system implementation for the web.",
@@ -5,0 +5,0 @@ "main": "index.js",

README.md

@@ -24,3 +24,3 @@ # Hashi・橋
 @include hashi.init() {
-    @include hs-component.render();
+  @include hs-component.render();
 }
@@ -27,0 +27,0 @@ ```

tailwind.js

@@ -23,41 +23,2 @@ /*
 
-/**
- * @access private
- * @type {string}
- */
-const prefix = 'hs';
-
-/**
- * @access private
- * @type {string}
- */
-const context = 'theme';
-
-/**
- * Generates a variable name
- * @access private
- * @param token {string}
- * @returns {string}
- */
-function tokenVar(token) {
-  return `var(--${prefix}-${context}-${token})`;
-}
-
-/**
- * Color module generator
- * @access private
- * @param name {string}
- * @param variants {[]}
- * @returns {{}}
- * @private
- */
-function tokenModule(name, variants) {
-  let finalModule = {};
-  variants.forEach(variant => {
-    const tokenName = variant === 'DEFAULT' || variant === '' ? `${name}` : `${name}-${variant}`;
-    finalModule[`${variant}`] = tokenVar(tokenName);
-  });
-  return finalModule;
-}
-
 module.exports = {
@@ -71,52 +32,212 @@ theme: {
     colors: {
-      surface: tokenModule('surface', [200, 300, 400, 600, 'ink']),
-      neutral: tokenModule('neutral', [200, 300, 400, 600, 'ink']),
-      disabled: tokenModule('disabled', ['DEFAULT', 'ink']),
-      scarlet: tokenModule('scarlet', [200, 300, 400, 600, 'ink']),
-      plox: tokenModule('plox', [200, 300, 400, 600, 'ink']),
-      'native-blue': tokenModule('native-blue', [200, 300, 400, 600, 'ink']),
-      'bright-cyan': tokenModule('bright-cyan', [200, 300, 400, 600, 'ink']),
-      success: tokenModule('success', [200, 300, 400, 600, 'ink']),
-      warning: tokenModule('warning', [200, 300, 400, 600, 'ink']),
-      danger: tokenModule('danger', [200, 300, 400, 600, 'ink']),
+      surface: {
+        200: 'var(--hs-theme-surface-200)',
+        300: 'var(--hs-theme-surface-300)',
+        400: 'var(--hs-theme-surface-400)',
+        600: 'var(--hs-theme-surface-600)',
+        'ink': 'var(--hs-theme-surface-ink)'
+      },
+      neutral: {
+        200: 'var(--hs-theme-neutral-200)',
+        300: 'var(--hs-theme-neutral-300)',
+        400: 'var(--hs-theme-neutral-400)',
+        600: 'var(--hs-theme-neutral-600)',
+        'ink': 'var(--hs-theme-neutral-ink)'
+      },
+      disabled: {
+        DEFAULT: 'var(--hs-theme-disabled)',
+        'ink': 'var(--hs-theme-disabled-ink)'
+      },
+      scarlet: {
+        200: 'var(--hs-theme-scarlet-200)',
+        300: 'var(--hs-theme-scarlet-300)',
+        400: 'var(--hs-theme-scarlet-400)',
+        600: 'var(--hs-theme-scarlet-600)',
+        'ink': 'var(--hs-theme-scarlet-ink)'
+      },
+      plox: {
+        200: 'var(--hs-theme-plox-200)',
+        300: 'var(--hs-theme-plox-300)',
+        400: 'var(--hs-theme-plox-400)',
+        600: 'var(--hs-theme-plox-600)',
+        'ink': 'var(--hs-theme-plox-ink)'
+      },
+      'native-blue': {
+        200: 'var(--hs-theme-native-blue-200)',
+        300: 'var(--hs-theme-native-blue-300)',
+        400: 'var(--hs-theme-native-blue-400)',
+        600: 'var(--hs-theme-native-blue-600)',
+        'ink': 'var(--hs-theme-native-blue-ink)'
+      },
+      'bright-cyan': {
+        200: 'var(--hs-theme-bright-cyan-200)',
+        300: 'var(--hs-theme-bright-cyan-300)',
+        400: 'var(--hs-theme-bright-cyan-400)',
+        600: 'var(--hs-theme-bright-cyan-600)',
+        'ink': 'var(--hs-theme-bright-cyan-ink)'
+      },
+      success: {
+        200: 'var(--hs-theme-success-200)',
+        300: 'var(--hs-theme-success-300)',
+        400: 'var(--hs-theme-success-400)',
+        600: 'var(--hs-theme-success-600)',
+        'ink': 'var(--hs-theme-success-ink)'
+      },
+      warning: {
+        200: 'var(--hs-theme-warning-200)',
+        300: 'var(--hs-theme-warning-300)',
+        400: 'var(--hs-theme-warning-400)',
+        600: 'var(--hs-theme-warning-600)',
+        'ink': 'var(--hs-theme-warning-ink)'
+      },
+      danger: {
+        200: 'var(--hs-theme-danger-200)',
+        300: 'var(--hs-theme-danger-300)',
+        400: 'var(--hs-theme-danger-400)',
+        600: 'var(--hs-theme-danger-600)',
+        'ink': 'var(--hs-theme-danger-ink)'
+      },
     },
-    borderRadius: tokenModule('radius', ['none', 'xs', 'sm', 'md', 'lg', 'xl', 'pill']),
+    // rounded-[]
+    borderRadius: {
+      'none': 'var(--hs-theme-radius-none)',
+      'xs': 'var(--hs-theme-radius-xs)',
+      'sm': 'var(--hs-theme-radius-sm)',
+      'md': 'var(--hs-theme-radius-md)',
+      'lg': 'var(--hs-theme-radius-lg)',
+      'xl': 'var(--hs-theme-radius-xl)',
+      'pill': 'var(--hs-theme-radius-pill)',
+    },
+    // border-[]
     borderWidth: {
       DEFAULT: '1px',
-      'none': 'none',
-      'xs': '1px',
-      'sm': '2px',
-      'md': '4px',
-      'lg': '6px',
-      'xl': '8px'
+      0: 'none',
+      1: '1px',
+      2: '2px',
+      3: '4px',
+      4: '6px',
+      5: '8px'
     },
-    gap: tokenModule('space', ['none', 'xs', 'sm', 'md', 'lg', 'xl', 'pill']),
-    margin: tokenModule('margin', ['none', 'xs', 'sm', 'md', 'lg', 'xl', 'pill']),
-    padding: tokenModule('padding', ['none', 'xs', 'sm', 'md', 'lg', 'xl', 'pill']),
+    // gap-[]
+    gap: {
+      0: 'var(--hs-theme-space-none)',
+      1: 'var(--hs-theme-space-xs)',
+      2: 'var(--hs-theme-space-sm)',
+      3: 'var(--hs-theme-space-md)',
+      4: 'var(--hs-theme-space-lg)',
+      5: 'var(--hs-theme-space-xl)',
+      'pill': 'var(--hs-theme-space-pill)',
+    },
+    // m[]-[]
+    margin: {
+      0: 'var(--hs-theme-margin-none)',
+      1: 'var(--hs-theme-margin-xs)',
+      2: 'var(--hs-theme-margin-sm)',
+      3: 'var(--hs-theme-margin-md)',
+      4: 'var(--hs-theme-margin-lg)',
+      5: 'var(--hs-theme-margin-xl)',
+      'pill': 'var(--hs-theme-margin-pill)',
+    },
+    // p[]-[]
+    padding: {
+      0: 'var(--hs-theme-padding-none)',
+      1: 'var(--hs-theme-padding-xs)',
+      2: 'var(--hs-theme-padding-sm)',
+      3: 'var(--hs-theme-padding-md)',
+      4: 'var(--hs-theme-padding-lg)',
+      5: 'var(--hs-theme-padding-xl)',
+      'pill': 'var(--hs-theme-padding-pill)',
+    },
+    // outline-[]
     outlineWidth: {
       DEFAULT: '1px',
-      'none': 'none',
-      'xs': '1px',
-      'sm': '2px',
-      'md': '4px',
-      'lg': '6px',
-      'xl': '8px'
+      0: 'none',
+      1: '1px',
+      2: '2px',
+      3: '4px',
+      4: '6px',
+      5: '8px'
     },
-    outlineOffset: tokenModule('space', ['none', 'xs', 'sm', 'md', 'lg', 'xl', 'pill']),
-    ringOffsetWidth: tokenModule('space', ['none', 'xs', 'sm', 'md', 'lg', 'xl', 'pill']),
+    // outline-offset-[]
+    outlineOffset: {
+      0: 'var(--hs-theme-space-none)',
+      1: 'var(--hs-theme-space-xs)',
+      2: 'var(--hs-theme-space-sm)',
+      3: 'var(--hs-theme-space-md)',
+      4: 'var(--hs-theme-space-lg)',
+      5: 'var(--hs-theme-space-xl)',
+      'pill': 'var(--hs-theme-space-pill)',
+    },
+    // ring-offset-[]
+    ringOffsetWidth: {
+      0: 'var(--hs-theme-space-none)',
+      1: 'var(--hs-theme-space-xs)',
+      2: 'var(--hs-theme-space-sm)',
+      3: 'var(--hs-theme-space-md)',
+      4: 'var(--hs-theme-space-lg)',
+      5: 'var(--hs-theme-space-xl)',
+      'pill': 'var(--hs-theme-space-pill)',
+    },
+    // ring-[]
     ringWidth: {
       DEFAULT: '1px',
-      'none': 'none',
-      'xs': '1px',
-      'sm': '2px',
-      'md': '4px',
-      'lg': '6px',
-      'xl': '8px'
+      0: 'none',
+      1: '1px',
+      2: '2px',
+      3: '4px',
+      4: '6px',
+      5: '8px'
     },
-    spacing: tokenModule('space', ['none', 'xs', 'sm', 'md', 'lg', 'xl', 'pill']),
-    fontFamily: tokenModule('family', ['global', 'header', 'body', 'action', 'code']),
-    fontSize: tokenModule('size', ['h1', 'h2', 'h3', 'h4', 'body', 'icon', 'action', 'small']),
-    fontWeight: tokenModule('weight', ['h1', 'h2', 'h3', 'h4', 'body', 'icon', 'action', 'small']),
-    lineHeight: tokenModule('line-height', ['h1', 'h2', 'h3', 'h4', 'body', 'icon', 'action', 'small']),
+    // space-[]-[]
+    spacing: {
+      0: 'var(--hs-theme-space-none)',
+      1: 'var(--hs-theme-space-xs)',
+      2: 'var(--hs-theme-space-sm)',
+      3: 'var(--hs-theme-space-md)',
+      4: 'var(--hs-theme-space-lg)',
+      5: 'var(--hs-theme-space-xl)',
+      'pill': 'var(--hs-theme-space-pill)',
+    },
+    // font
+    fontFamily: {
+      'normal': 'var(--hs-theme-family-global)',
+      'title': 'var(--hs-theme-family-header)',
+      'body': 'var(--hs-theme-family-body)',
+      'mono': 'var(--hs-theme-family-code)',
+      'action': 'var(--hs-theme-family-action)',
+    },
+    // text-[]
+    fontSize: {
+      'title': 'var(--hs-theme-size-h1)',
+      'title-sm': 'var(--hs-theme-size-h2)',
+      'subtitle': 'var(--hs-theme-size-h3)',
+      'subtitle-sm': 'var(--hs-theme-size-h4)',
+      'normal': 'var(--hs-theme-size-body)',
+      'icon': 'var(--hs-theme-size-icon)',
+      'action': 'var(--hs-theme-size-action)',
+      'small': 'var(--hs-theme-size-small)',
+    },
+    // font-[]
+    fontWeight: {
+      'extrabold': 'var(--hs-theme-weight-h1)',
+      'bold': 'var(--hs-theme-weight-h2)',
+      'semibold': 'var(--hs-theme-weight-h3)',
+      'medium': 'var(--hs-theme-weight-h4)',
+      'normal': 'var(--hs-theme-weight-body)',
+      'icon': 'var(--hs-theme-weight-icon)',
+      'action': 'var(--hs-theme-weight-action)',
+      'light': 'var(--hs-theme-weight-small)',
+    },
+    // leading-[]
+    lineHeight: {
+      8: 'var(--hs-theme-line-height-h1)',
+      6: 'var(--hs-theme-line-height-h2)',
+      4: 'var(--hs-theme-line-height-h3)',
+      2: 'var(--hs-theme-line-height-h4)',
+      'normal': 'var(--hs-theme-line-height-body)',
+      'icon': 'var(--hs-theme-line-height-icon)',
+      'action': 'var(--hs-theme-line-height-action)',
+      'small': 'var(--hs-theme-line-height-small)',
+    },
   },
 }

No alert changes

Improved metrics

Total package byte prevSize

408094

0.21%

Lines of code

6157

2.29%

Worsened metrics

Number of package files

66

-1.49%

No dependency changes