@sakura-ui/sakura-ui 0.1.13 → 0.1.16

package/README.md

@@ -1,7 +1,7 @@
 # Sakura UI
 Sakura UI - UI components built with Tailwind CSS for React. Sakura UI is an unofficial implementation of the Digital Agency Design System. The specifications for each UI component have been implemented with reference to the Digital Agency Design System.
 
-- [Design System 1.2.2](https://www.figma.com/community/file/1172530831489802410)
+- [Digital Agency Design System](https://www.digital.go.jp/policies/servicedesign/designsystem)
 
 ## Sample page
 
@@ -42,11 +42,11 @@ Add fonts from CDN.
     <meta charset="UTF-8" />
     <link
       href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;200;300;400;500;600;700&display=swap"
-      rel="stylesheet"
+      rel="preload"
     />
     <link
       href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght@100;200;300;400;500;600;700&display=swap"
-      rel="stylesheet"
+      rel="preload"
     />
     ...head
   </head>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sakura-ui/sakura-ui",
-  "version": "0.1.13",
+  "version": "0.1.16",
   "keywords": [],
   "author": "glassonion1",
   "homepage": "https://github.com/glassonion1/sakura-ui",

package/packages/config/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sakura-ui/config",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "main": "dist/index.cjs.js",
   "types": "dist/index.d.ts",
   "exports": {

package/packages/config/src/index.ts

@@ -14,105 +14,105 @@ const sakuraPlugin = plugin(
     theme: {
       extend: {
         fontSize: {
-          '6xl': [
+          'h-xxl': [
             '57px',
             {
               lineHeight: '1.4',
               letterSpacing: '0.04em',
-              fontWeight: '400'
+              fontWeight: '700'
             }
           ],
-          '5xl': [
+          'h-xl': [
             '45px',
             {
               lineHeight: '1.4',
               letterSpacing: '0.04em',
-              fontWeight: '400'
+              fontWeight: '700'
             }
           ],
           // h1
-          '4xl': [
+          'h-lg': [
             '36px',
             {
               lineHeight: '1.4',
               letterSpacing: '0.04em',
-              fontWeight: '400'
+              fontWeight: '700'
             }
           ],
-          '4xlm': [
+          'h-lg-m': [
             '32px',
             {
               lineHeight: '1.5',
               letterSpacing: '0.04em',
-              fontWeight: '500'
+              fontWeight: '700'
             }
           ],
           // h2
-          '3xl': [
+          'h-med': [
             '32px',
             {
               lineHeight: '1.5',
               letterSpacing: '0.04em',
-              fontWeight: '400'
+              fontWeight: '700'
             }
           ],
-          '3xlm': [
+          'h-med-m': [
             '28px',
             {
               lineHeight: '1.5',
               letterSpacing: '0.04em',
-              fontWeight: '500'
+              fontWeight: '700'
             }
           ],
           // h3
-          '2xl': [
+          'h-sm': [
             '28px',
             {
               lineHeight: '1.5',
               letterSpacing: '0.04em',
-              fontWeight: '400'
+              fontWeight: '700'
             }
           ],
-          '2xlm': [
+          'h-sm-m': [
             '24px',
             {
               lineHeight: '1.5',
               letterSpacing: '0.04em',
-              fontWeight: '500'
+              fontWeight: '700'
             }
           ],
           // h4
-          xl: [
+          'h-xs': [
             '24px',
             {
               lineHeight: '1.5',
               letterSpacing: '0.04em',
-              fontWeight: '400'
+              fontWeight: '700'
             }
           ],
-          xlm: [
+          'h-xs-m': [
             '20px',
             {
               lineHeight: '1.5',
               letterSpacing: '0.04em',
-              fontWeight: '500'
+              fontWeight: '700'
             }
           ],
           // h5 h6
-          lg: [
+          'h-xxs': [
             '20px',
             {
               lineHeight: '1.5',
               letterSpacing: '0.04em',
-              fontWeight: '400'
+              fontWeight: '700'
             }
           ],
-          lgm: [
+          'h-xxs-m': [
             '16px',
             {
               lineHeight: '1.5',
               letterSpacing: '0.04em',
-              fontWeight: '500'
+              fontWeight: '700'
             }
           ],
           base: [
@@ -123,7 +123,7 @@ const sakuraPlugin = plugin(
               fontWeight: '400'
             }
           ],
-          small: [
+          'base-sm': [
             '14px',
             {
               lineHeight: '1.7',
@@ -131,35 +131,19 @@ const sakuraPlugin = plugin(
               fontWeight: '400'
             }
           ],
-          label: [
-            '14px',
-            {
-              lineHeight: '1.5',
-              letterSpacing: '0.04em',
-              fontWeight: '500'
-            }
-          ],
-          labelSmall: [
-            '12px',
-            {
-              lineHeight: '1.5',
-              letterSpacing: '0.04em',
-              fontWeight: '500'
-            }
-          ],
-          xs: [
+          sup: [
             '12px',
             {
               lineHeight: '1.7',
-              letterSpacing: '0.04em',
+              letterSpacing: '0.02em',
               fontWeight: '400'
             }
           ],
-          xxs: [
+          'sup-sm': [
             '10px',
             {
               lineHeight: '1.7',
-              letterSpacing: '0.04em',
+              letterSpacing: '0.02em',
               fontWeight: '400'
             }
           ],
@@ -171,6 +155,22 @@ const sakuraPlugin = plugin(
               fontWeight: '700'
             }
           ],
+          label: [
+            '14px',
+            {
+              lineHeight: '1.5',
+              letterSpacing: '0.04em',
+              fontWeight: '500'
+            }
+          ],
+          'label-sm': [
+            '12px',
+            {
+              lineHeight: '1.5',
+              letterSpacing: '0.04em',
+              fontWeight: '500'
+            }
+          ],
           code: [
             '16px',
             {
@@ -197,8 +197,7 @@ const sakuraPlugin = plugin(
             300: '#7096F8',
             200: '#9DB7F9',
             100: '#C5D7FB',
-            50: '#E8F1FE',
-            '800-darken': '#000082'
+            50: '#E8F1FE'
           },
           sumi: {
             1200: '#000000',
@@ -242,7 +241,7 @@ const sakuraPlugin = plugin(
             400: '#D69C2B',
             300: '#DCAC4D',
             200: '#E1C383',
-            100: '#E7D89',
+            100: '#E7D8B9',
             50: '#F3EEE5'
           },
           sun: {

package/packages/core/.eslintrc.json

@@ -0,0 +1,25 @@
+{
+  "env": {
+    "browser": true,
+    "es2021": true
+  },
+  "extends": [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:react/recommended",
+    "plugin:jsx-a11y/recommended",
+    "prettier"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaVersion": "latest",
+    "sourceType": "module"
+  },
+  "plugins": ["@typescript-eslint", "react", "jsx-a11y"],
+  "rules": {},
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  }
+}