More stuff

Author: deminearchiver

.changeset/six-lions-wonder.md

@@ -0,0 +1,7 @@
+---
+"@star4/react": patch
+---
+
+- added disabled button and radio button styles
+- added Material Symbol icon component
+- dialog styling changes

examples/react/src/app.tsx

@@ -1,4 +1,4 @@
-import { Dialog, FocusRing, Ripple, Button, Radio } from "@star4/react";
+import { Dialog, FocusRing, Ripple, Button, Radio, MaterialSymbol } from "@star4/react";
 import { forwardRef, useRef, useState, type FC } from "react";
 
 export const App: FC = () => {
@@ -10,12 +10,13 @@ export const App: FC = () => {
     <div>
       <Button
         variant="filled"
-        onClick={() => setOpen(true)} disabled={open}
+        onClick={() => setOpen(true)}
+        disabled={open}
         label="Open" />
       <Dialog
         open={open}
         onCancel={() => setOpen(false)}
-        icon={"Delete"}
+        icon={<MaterialSymbol name="delete" />}
         headline="Permanently delete?"
         content="Deleting the selected photos will also remove them from all synced devices."
         actions={
@@ -35,6 +36,12 @@ export const App: FC = () => {
       <Radio groupValue={value} value={2} onChange={setValue as any} />
       <Radio groupValue={value} value={3} onChange={setValue as any} />
       <Radio groupValue={value} value={4} onChange={setValue as any} />
+
+      <Radio disabled groupValue={value} value={0} />
+      <Radio disabled groupValue={value} value={1} />
+      <Radio disabled groupValue={value} value={2} />
+      <Radio disabled groupValue={value} value={3} />
+      <Radio disabled groupValue={value} value={4} />
     </div>
   );
 }

packages/react/src/button/button.css.ts

@@ -23,6 +23,7 @@ const container = recipe({
     background: "transparent",
     border: "none",
     outline: "none",
+    userSelect: "none",
 
     position: "relative",
     minWidth: 64,
@@ -42,6 +43,11 @@ const container = recipe({
     transitionDuration: "280ms",
     transitionTimingFunction: THEME.motion.easing.emphasized,
 
+    vars: {
+      [THEME.component.icon.size]: "18px",
+      [THEME.component.materialSymbol.opticalSize]: "18",
+    },
+
     // Touch target
     "::before": {
       content: "",
@@ -136,6 +142,59 @@ const container = recipe({
       },
     },
   },
+  compoundVariants: [
+    {
+      variants: {
+        variant: "elevated",
+        disabled: true,
+      },
+      style: {
+        backgroundColor: `color-mix(in srgb, transparent, ${THEME.color.onSurface} 12%)`,
+        color: `color-mix(in srgb, transparent, ${THEME.color.onSurface} 38%)`,
+
+      },
+    },
+    {
+      variants: {
+        variant: "filled",
+        disabled: true,
+      },
+      style: {
+        backgroundColor: `color-mix(in srgb, transparent, ${THEME.color.onSurface} 12%)`,
+        color: `color-mix(in srgb, transparent, ${THEME.color.onSurface} 38%)`,
+
+      },
+    },
+    {
+      variants: {
+        variant: "filledTonal",
+        disabled: true,
+      },
+      style: {
+        backgroundColor: `color-mix(in srgb, transparent, ${THEME.color.onSurface} 12%)`,
+        color: `color-mix(in srgb, transparent, ${THEME.color.onSurface} 38%)`,
+
+      },
+    },
+    {
+      variants: {
+        variant: "outlined",
+        disabled: true,
+      },
+      style: {
+        color: `color-mix(in srgb, transparent, ${THEME.color.onSurface} 38%)`,
+      },
+    },
+    {
+      variants: {
+        variant: "text",
+        disabled: true,
+      },
+      style: {
+        color: `color-mix(in srgb, transparent, ${THEME.color.onSurface} 38%)`,
+      },
+    },
+  ],
   defaultVariants: {
     disabled: false,
   },
@@ -151,7 +210,7 @@ const outline = recipe({
   },
   variants: {
     disabled: {
-
+      borderColor: `color-mix(in srgb, transparent, ${THEME.color.onSurface} 12%)`,
     },
   },
 });

packages/react/src/button/button.tsx

@@ -44,6 +44,7 @@ export const Button = forwardRef<Button.Element, Button.Props>(
         className={clsx(
           styles.container({
             variant,
+            disabled,
           }),
           className,
         )}

packages/react/src/dialog/dialog.css.ts

@@ -15,19 +15,23 @@ const enter = keyframes({
     transform: "translateY(-50px)",
     clipPath: `inset(0 0 100% 0 round ${THEME.shape.corner.extraLarge})`,
   },
+  to: {
+    clipPath: `inset(0 0 0 0 round ${THEME.shape.corner.extraLarge})`,
+  },
 });
 const exit = keyframes({
+  from: {
+    clipPath: `inset(0 0 0 0 round ${THEME.shape.corner.extraLarge})`,
+  },
   to: {
     transform: "translateY(-50px)",
     clipPath: `inset(0 0 65% 0 round ${THEME.shape.corner.extraLarge})`,
   },
 });
 const fadeIn = keyframes({
   from: { opacity: 0 },
-  // to: { opacity: 1 },
 });
 const fadeOut = keyframes({
-  // from: { opacity: 1 },
   to: { opacity: 0 },
 });
 
@@ -36,6 +40,24 @@ const scrim = recipe({
     backgroundColor: THEME.color.scrim,
     opacity: 0.32,
   },
+  variants: {
+    entering: {
+      true: {
+        animationName: fadeIn,
+        animationDuration: THEME.motion.duration.long2,
+        animationTimingFunction: THEME.motion.easing.linear,
+        animationFillMode: "both",
+      },
+    },
+    exiting: {
+      true: {
+        animationName: fadeOut,
+        animationDuration: THEME.motion.duration.short3,
+        animationTimingFunction: THEME.motion.easing.linear,
+        animationFillMode: "forwards",
+      },
+    },
+  },
 });
 
 const container = recipe({
@@ -53,9 +75,10 @@ const container = recipe({
     flexDirection: "column",
     overflow: "hidden",
 
+    borderRadius: THEME.shape.corner.extraLarge,
     backgroundColor: THEME.color.surfaceContainerHighest,
 
-    clipPath: `inset(0 0 0 0 round ${THEME.shape.corner.extraLarge})`,
+    // clipPath: `inset(0 0 0 0 round ${THEME.shape.corner.extraLarge})`,
 
     // TODO: doesn't work because of clip-path
     // boxShadow: `
@@ -93,6 +116,7 @@ const headline = recipe({
     display: "flex",
     flexDirection: "column",
     alignItems: "center",
+    paddingBlockEnd: 16,
 
     ...THEME.typescale.headline.small,
     color: THEME.color.onSurface,
@@ -147,8 +171,19 @@ const headlineText = style({
 
 const content = recipe({
   base: {
+    position: "relative",
+    height: "min-content",
+    flex: 1,
+
+    paddingInline: 24,
+
     ...THEME.typescale.body.medium,
     color: THEME.color.onSurfaceVariant,
+
+
+    // flex: 1;
+    // height: min-content; // Needed for Safari
+    // position: relative;
   },
   variants: {
     entering: {
@@ -192,7 +227,7 @@ const actions = recipe({
     gap: 8,
 
     paddingInline: 24,
-    paddingBlock: "16px 24px",
+    paddingBlock: 24,
   },
   variants: {
     entering: {

packages/react/src/dialog/dialog.tsx

@@ -38,7 +38,7 @@ export const Dialog: FC<Dialog.Props> = ({
 
   return (
     <Modal open={isMounted} onCancel={onCancel} className={styles.modal()}>
-      <Modal.Backdrop className={styles.scrim()} />
+      <Modal.Backdrop className={styles.scrim({ entering, exiting })} />
       <div
         className={
           styles.container({ entering, exiting })
@@ -51,14 +51,14 @@ export const Dialog: FC<Dialog.Props> = ({
             {headline && (
               <h2 className={styles.headlineText}>{headline}</h2>
             )}
-            <Divider />
+            {/* <Divider /> */}
           </div>
           <div className={styles.content({ entering, exiting })}>
             {content}
           </div>
           {actions && (
             <div className={styles.actions({ entering, exiting })}>
-              <Divider />
+              {/* <Divider /> */}
               {actions}
             </div>
           )}

packages/react/src/icon/index.ts

@@ -0,0 +1 @@
+export * from "./material-symbol";

packages/react/src/icon/material-symbol.css.ts

@@ -0,0 +1,49 @@
+import { THEME } from "@star4/vanilla-extract";
+import { createThemeContract, fallbackVar, style } from "@vanilla-extract/css";
+
+const fontVariationSettings = (values: Record<string, string | number>) => {
+  return Object.entries(values)
+    .map(([axis, value]) => `"${axis}" ${value}`)
+    .join(",");
+}
+
+const icon = style({
+  fontFamily: fallbackVar(THEME.component.materialSymbol.font, `"Material Symbols Outlined"`),
+  fontSize: fallbackVar(THEME.component.icon.size, "24px"),
+
+  fontWeight: "normal",
+  fontStyle: "normal",
+  lineHeight: 1,
+  letterSpacing: "normal",
+  textTransform: "none",
+  display: "inline-block",
+  whiteSpace: "nowrap",
+  wordWrap: "normal",
+  direction: "ltr",
+  WebkitFontSmoothing: "antialiased",
+  fontFeatureSettings: `"liga"`,
+
+  fontOpticalSizing: "auto",
+
+  color: "currentcolor",
+
+  inlineSize: fallbackVar(THEME.component.icon.size, "24px"),
+  blockSize: fallbackVar(THEME.component.icon.size, "24px"),
+  userSelect: "none",
+
+  transitionProperty: "font-variation-settings",
+  transitionDuration: "inherit",
+  transitionDelay: "inherit",
+  transitionTimingFunction: "inherit",
+
+  fontVariationSettings: fontVariationSettings({
+    FILL: fallbackVar(THEME.component.materialSymbol.fill, "0"),
+    wght: fallbackVar(THEME.component.materialSymbol.weight, "400"),
+    GRAD: fallbackVar(THEME.component.materialSymbol.grade, "0"),
+    // opsz: fallbackVar(THEME.component.materialSymbol.opticalSize, "24"),
+  }),
+});
+
+export const styles = {
+  icon,
+} as const;

packages/react/src/icon/material-symbol.tsx

@@ -0,0 +1,27 @@
+import { forwardRef, type HTMLAttributes } from "react";
+import clsx from "clsx/lite";
+import { styles } from "./material-symbol.css";
+
+export namespace MaterialSymbol {
+  export type Props =
+    & Omit<
+      HTMLAttributes<HTMLElement>,
+      "children"
+    >
+    & {
+      name: string;
+    };
+  export interface Element extends HTMLElement {}
+}
+
+export const MaterialSymbol = forwardRef<MaterialSymbol.Element, MaterialSymbol.Props>(
+  ({ name, className, ...rest }, forwardedRef) => {
+    return (
+      <span
+        ref={forwardedRef}
+        className={clsx(styles.icon, className)}
+        {...rest}
+        children={name} />
+    )
+  },
+);

packages/react/src/index.ts

@@ -5,6 +5,7 @@ export * from "./radio";
 export * from "./dialog";
 export * from "./focus";
 export * from "./ripple";
+export * from "./icon";
 
 // Utility components
 export * from "./modal";