update

glassonion1 · Sep 7, 2024 · 2bb4492 · 2bb4492
1 parent 369068e
commit 2bb4492
Show file tree

Hide file tree

Showing 14 changed files with 221 additions and 72 deletions.
diff --git a/examples/index.html b/examples/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />

diff --git a/examples/package.json b/examples/package.json
@@ -8,9 +8,9 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@sakura-ui/core": "^0.2.6",
+    "@sakura-ui/core": "^0.2.7-beta.11",
     "@sakura-ui/forms": "^0.2.1",
-    "@sakura-ui/tailwind-theme-plugin": "^0.2.0",
+    "@sakura-ui/tailwind-theme-plugin": "^0.2.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.23.1",

diff --git a/examples/src/pages/Home.tsx b/examples/src/pages/Home.tsx
@@ -59,12 +59,16 @@ const Home = () => {
       <H5>SakuraUI Heading5</H5>
       <H6>SakuraUI Heading6</H6>
       <p>
-        <Icon icon="home" className="text-sea-600" />
+        <Icon className="text-sea-600 !leading-7 align-middle" opticalSize={16}>
+          home
+        </Icon>
         test1,test2,test3
       </p>
       <p>
         test1,test2,abcdefghijk
-        <Icon icon="shopping_cart" className="text-sea-600" />
+        <Icon className="text-sea-600 !leading-7 align-middle" opticalSize={16}>
+          shopping_cart
+        </Icon>
         test3 <Link>link text here</Link>
       </p>
       <p>
@@ -93,6 +97,23 @@ const Home = () => {
           </li>
         </Ul>
       </div>
+      <div>
+        <H2>Icons</H2>
+        <div className="flex gap-2">
+          {[16, 20, 24, 40, 44, 48].map((size) => (
+            <div className="inline-flex flex-col items-center">
+              <Icon
+                opticalSize={size}
+                altText="Opens in new tab"
+                className="!leading-7"
+              >
+                open_in_new
+              </Icon>
+              {size}px
+            </div>
+          ))}
+        </div>
+      </div>
       <div>
         <H2>List</H2>
         <Ul>

diff --git a/packages/core/package.json b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@sakura-ui/core",
-  "version": "0.2.6",
+  "version": "0.2.7-beta.11",
   "description": "",
   "keywords": [
     "react",

diff --git a/packages/core/src/components/Icon.tsx b/packages/core/src/components/Icon.tsx
@@ -2,31 +2,59 @@ import React from 'react'
 import { cx } from '@sakura-ui/helper'
 
 export interface IconProps extends React.ComponentPropsWithRef<'span'> {
-  icon: string
-  srText?: string
+  opticalSize?: 16 | 20 | 24 | 40 | 44 | 48
+  altText?: string
+  /** @deprecated instead of using this property, set the text to children. */
+  icon?: string
 }
 
 export const Icon = React.forwardRef<HTMLElement, IconProps>((props, ref) => {
-  const { className, icon, srText, ...restProps } = props
+  const {
+    className,
+    icon,
+    altText = '',
+    opticalSize = 24,
+    children,
+    ...rest
+  } = props
 
-  const style = `
-    inline
-    align-middle
-    font-icon
-    antialiased
-  `
+  const size = {
+    16: '!text-[16px]',
+    20: '!text-[20px]',
+    24: '!text-[24px]',
+    40: '!text-[40px]',
+    44: '!text-[44px]',
+    48: '!text-[48px]'
+  }
+
+  const fontSize = size[opticalSize]
+
+  // @see: https://developers.google.com/fonts/docs/material_symbols
+  //.material-symbols-outlined {
+  //  font-family: 'Material Symbols Outlined';
+  //  font-weight: normal;
+  //  font-style: normal;
+  //  font-size: 24px;  /* Preferred icon size */
+  //  display: inline-block;
+  //  line-height: 1;
+  //  text-transform: none;
+  //  letter-spacing: normal;
+  //  word-wrap: normal;
+  //  white-space: nowrap;
+  //  direction: ltr;
+  //}
 
   return (
     <>
       <span
         aria-hidden="true"
-        className={cx(style, className)}
-        {...restProps}
+        className={cx(fontSize, 'material-symbols-outlined', className)}
+        {...rest}
         ref={ref}
       >
-        {icon}
+        {icon ?? children}
       </span>
-      <span className="sr-only">{srText}</span>
+      <span className="sr-only">{altText}</span>
     </>
   )
 })

diff --git a/packages/core/src/components/Link.tsx b/packages/core/src/components/Link.tsx
@@ -1,4 +1,11 @@
-import { type ComponentWithAs, cx, forwardRef } from '@sakura-ui/helper'
+import {
+  type ComponentWithAs,
+  cx,
+  forwardRef,
+  styleUnderline,
+  styleFocusRoundedWithBg
+} from '@sakura-ui/helper'
+import { Icon } from './Icon'
 
 // biome-ignore lint/suspicious/noEmptyInterface:
 export interface LinkProps {}
@@ -13,54 +20,42 @@ export const Link: ComponentWithAs<'a', LinkProps> = forwardRef(
       ...restProps
     } = props
 
-    const styleUnderLine = `
-      underline
-      underline-offset-[0.1875rem]
-      hover:decoration-4
-    `
-
     // Make lines break at each word
     const style = `
       cursor-pointer
       text-blue-1000
       active:text-orange-700
       visited:text-magenta-900
-      focus:outline
-      focus:outline-2
-      focus:outline-wood-500
+      ${styleFocusRoundedWithBg}
+      ${styleUnderline}
       disabled:border-sumi-500
       [overflow-wrap:anywhere]
     `
 
-    const styleIcon = `
-      inline
-      align-middle
-      font-icon
-      font-light
-      antialiased
-    `
-
-    if (href?.startsWith('http')) {
+    if (href?.startsWith('http') || props.target === '_blank') {
       return (
         <Component
-          className={cx(style, styleUnderLine, className)}
+          className={cx(style, className)}
           href={href}
           target="_blank"
           rel="noopener noreferrer"
           {...restProps}
           ref={ref}
         >
-          <span>{children}</span>&nbsp;
-          <span className={cx(styleIcon)} aria-hidden="true">
+          <span>{children}</span>
+          <Icon
+            opticalSize={16}
+            altText="Opens in new tab"
+            className="ml-0.5 !leading-7 align-middle"
+          >
             open_in_new
-          </span>
-          <span className="sr-only">Opens in new tab</span>
+          </Icon>
         </Component>
       )
     }
     return (
       <Component
-        className={cx(style, styleUnderLine, className)}
+        className={cx(style, className)}
         href={href}
         {...restProps}
         ref={ref}

diff --git a/packages/core/src/components/LinkCard.tsx b/packages/core/src/components/LinkCard.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { cx } from '@sakura-ui/helper'
+import { cx, styleFocusRounded } from '@sakura-ui/helper'
 import { Card, CardHeader } from './Card'
 import { Icon } from './Icon'
 
@@ -24,9 +24,8 @@ export const LinkCard = ({
     outline-offset-4
     rounded-2xl
     sm:rounded-3xl
-    focus:outline-2
-    focus:outline-wood-600
     w-full h-full
+    ${styleFocusRounded}
   `
 
   const styleHover = `

diff --git a/packages/core/src/components/buttonStyle.ts b/packages/core/src/components/buttonStyle.ts
@@ -1,4 +1,15 @@
-export type ButtonVariant = 'primary' | 'secondary' | 'tertiary'
+import {
+  styleFocusRounded,
+  styleFocusRoundedWithBg,
+  styleHoverUnderline,
+  styleUnderlineNoDeco
+} from '@sakura-ui/helper'
+
+// Deprecated, replace to ButtonVariantV2
+export type ButtonVariantV1 = 'primary' | 'secondary' | 'tertiary'
+export type ButtonVariantV2 = 'solid-fill' | 'outline' | 'text'
+export type ButtonVariant = ButtonVariantV1 | ButtonVariantV2
+
 export type ButtonSize = 'lg' | 'md' | 'sm' | 'xs'
 
 export const base = `
@@ -15,49 +26,54 @@ export const base = `
   border-blue-900
   hover:border-blue-1000
   active:border-blue-1200
-  focus:outline
-  focus:outline-2
-  focus:outline-wood-600
   disabled:border-sumi-500
   disabled:cursor-not-allowed
 `
 
-const primary = `
+const solidFill = `
   text-white
   bg-blue-900
   hover:bg-blue-1000
   active:bg-blue-1200
   disabled:bg-sumi-500
   disabled:text-white
+  ${styleHoverUnderline}
+  ${styleFocusRounded}
 `
 
-const secondary = `
+const outline = `
   text-blue-900
   hover:text-blue-1000
   active:text-blue-1200
   bg-transparent
   hover:bg-blue-200
   active:bg-blue-300
-  disabled:text-sumi-500
   disabled:bg-transparent
+  disabled:text-sumi-500
+  ${styleHoverUnderline}
+  ${styleFocusRounded}
 `
 
-const tertiary = `
+const text = `
   bg-transparent
   text-blue-900
   hover:text-blue-1000
   active:text-blue-1200
-  underline
   hover:bg-blue-200
   active:bg-blue-300
   disabled:bg-transparent
   disabled:text-sumi-500
+  ${styleUnderlineNoDeco}
+  ${styleFocusRoundedWithBg}
 `
 
 const styles: { [key in ButtonVariant]: string } = {
-  primary: primary,
-  secondary: secondary,
-  tertiary: tertiary
+  primary: solidFill,
+  secondary: outline,
+  tertiary: text,
+  'solid-fill': solidFill,
+  outline: outline,
+  text: text
 }
 
 const params: { [key in ButtonSize]: string } = {

diff --git a/packages/forms/src/components/Checkbox.tsx b/packages/forms/src/components/Checkbox.tsx
@@ -49,7 +49,7 @@ export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
       peer-disabled:border-sumi-500
       peer-focus-visible:ring-2
       peer-focus-visible:ring-offset-2
-      peer-focus-visible:ring-wood-500
+      peer-focus-visible:ring-wood-600
     `
 
     return (

diff --git a/packages/forms/src/components/Radio.tsx b/packages/forms/src/components/Radio.tsx
@@ -41,7 +41,7 @@ export const Radio = React.forwardRef<HTMLInputElement, RadioProps>(
       peer-disabled:border-sumi-500
       peer-focus-visible:ring-2
       peer-focus-visible:ring-offset-2
-      peer-focus-visible:ring-wood-500
+      peer-focus-visible:ring-wood-600
     `
 
     const radioSizes: { [key in InputSize]: string } = {

diff --git a/packages/helper/package.json b/packages/helper/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@sakura-ui/helper",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "license": "MIT",
   "main": "dist/index.cjs.js",
   "types": "dist/types/index.d.ts",

diff --git a/packages/helper/src/index.ts b/packages/helper/src/index.ts
@@ -2,3 +2,16 @@ export { cx } from './cx'
 export { forwardRef } from './forward-ref'
 export type { ComponentWithAs } from './types/component'
 export { treefy } from './treefy'
+export {
+  styleClickable,
+  styleFocusRect,
+  styleFocusRounded,
+  styleFocusRectWithBg,
+  styleFocusRoundedWithBg,
+  styleHoverUnderline,
+  styleUnderline,
+  styleUnderlineNoDeco,
+  stylePopover,
+  stylePopoverPositionBottomRight,
+  stylePopoverPositionBottomLeft
+} from './styles'