feat(block): new outline, strong, inset styles

src/react/components/Block.jsx

@@ -4,6 +4,7 @@ import { cls } from '../../shared/cls.js';
 import { BlockColors } from '../../shared/colors/BlockColors.js';
 import { useDarkClasses } from '../shared/use-dark-classes.js';
 import { useThemeClasses } from '../shared/use-theme-classes.js';
+import { useTheme } from '../shared/use-theme.js';
 
 const Block = forwardRef((props, ref) => {
   const {
@@ -12,11 +13,17 @@ const Block = forwardRef((props, ref) => {
     colors: colorsProp,
 
     margin = 'my-8',
-    strong,
     inset,
-    nested,
+    insetIos,
+    insetMaterial,
+    strong,
+    strongIos,
+    strongMaterial,
+    outline,
+    outlineIos,
+    outlineMaterial,
 
-    hairlines = true,
+    nested,
 
     ios,
     material,
@@ -40,24 +47,52 @@ const Block = forwardRef((props, ref) => {
     ...rest,
   };
 
+  const theme = useTheme({ ios, material });
   const themeClasses = useThemeClasses({ ios, material });
   const dark = useDarkClasses();
 
   const colors = BlockColors(colorsProp, dark);
 
+  const isStrong =
+    typeof strong === 'undefined'
+      ? theme === 'ios'
+        ? strongIos
+        : strongMaterial
+      : strong;
+
+  const isOutline =
+    typeof outline === 'undefined'
+      ? theme === 'ios'
+        ? outlineIos
+        : outlineMaterial
+      : outline;
+  const isInset =
+    typeof inset === 'undefined'
+      ? theme === 'ios'
+        ? insetIos
+        : insetMaterial
+      : inset;
+
   const c = themeClasses(
-    BlockClasses({ ...props, margin, hairlines }, colors, className)
+    BlockClasses(
+      {
+        ...props,
+        margin,
+        inset: isInset,
+        strong: isStrong,
+        outline: isOutline,
+      },
+      colors,
+      className
+    )
   );
 
   const classes = cls(
     // base
     c.base,
 
-    // strong
-    strong && c.strong,
-
     // inset
-    inset && c.inset,
+    isInset && c.inset,
 
     className
   );

src/react/components/List.jsx

@@ -26,8 +26,6 @@ const List = forwardRef((props, ref) => {
     outlineIos,
     outlineMaterial,
 
-    // hairlines = true,
-
     ios,
     material,
 

src/shared/classes/BlockClasses.js

@@ -2,24 +2,27 @@ import { cls } from '../cls.js';
 import { positionClass } from '../position-class.js';
 
 export const BlockClasses = (props, colors, classes) => {
-  const { inset, nested, margin, hairlines } = props;
+  const { inset, nested, margin, strong, outline } = props;
   return {
     base: {
       common: cls(
         `text-sm z-10`,
         positionClass('relative', classes),
+        !inset && !nested && outline && 'hairline-t hairline-b',
+        inset && outline && 'border',
         inset && 'px-4',
         !inset && 'pl-4-safe pr-4-safe',
-        !nested && margin
+        !nested && margin,
+        (strong || outline) && 'py-4'
       ),
-    },
-    strong: {
-      common: cls(
-        `py-4`,
-        !inset && !nested && hairlines && 'hairline-t hairline-b'
+      ios: cls(
+        strong && colors.strongBgIos,
+        inset && outline && colors.outlineIos
+      ),
+      material: cls(
+        strong && colors.strongBgMaterial,
+        inset && outline && colors.outlineMaterial
       ),
-      ios: colors.strongBgIos,
-      material: colors.strongBgMaterial,
     },
     inset: {
       common: `ml-4-safe mr-4-safe overflow-hidden`,

src/shared/colors/BlockColors.js

@@ -2,6 +2,14 @@ import { cls } from '../cls.js';
 
 export const BlockColors = (colorsProp = {}, dark) => {
   return {
+    outlineIos: cls(
+      'border-black border-opacity-20',
+      dark('dark:border-white dark:border-opacity-15')
+    ),
+    outlineMaterial: cls(
+      'border-md-light-outline',
+      dark('border-md-dark-outline')
+    ),
     strongBgIos: cls(
       `bg-block-strong-light`,
       dark('dark:bg-block-strong-dark')

src/svelte/components/Block.svelte

@@ -3,6 +3,7 @@
   import { BlockColors } from '../../shared/colors/BlockColors.js';
   import { cls } from '../../shared/cls.js';
   import { useDarkClasses } from '../shared/use-dark-classes.js';
+  import { useTheme } from '../shared/use-theme.js';
   import { useThemeClasses } from '../shared/use-theme-classes.js';
 
   let className = undefined;
@@ -13,20 +14,48 @@
   export let material = undefined;
 
   export let margin = 'my-8';
-  export let strong = undefined;
   export let inset = undefined;
+  export let insetIos = undefined;
+  export let insetMaterial = undefined;
+  export let strong = undefined;
+  export let strongIos = undefined;
+  export let strongMaterial = undefined;
+  export let outline = undefined;
+  export let outlineIos = undefined;
+  export let outlineMaterial = undefined;
   export let nested = undefined;
 
-  export let hairlines = true;
+  let theme;
+  theme = useTheme({}, (v) => (theme = v));
 
   const dark = useDarkClasses();
 
+  $: isStrong =
+    typeof strong === 'undefined'
+      ? theme === 'ios'
+        ? strongIos
+        : strongMaterial
+      : strong;
+
+  $: isOutline =
+    typeof outline === 'undefined'
+      ? theme === 'ios'
+        ? outlineIos
+        : outlineMaterial
+      : outline;
+  $: isInset =
+    typeof inset === 'undefined'
+      ? theme === 'ios'
+        ? insetIos
+        : insetMaterial
+      : inset;
+
   $: colors = BlockColors(colorsProp, dark);
 
   $: c = useThemeClasses(
     { ios, material },
     BlockClasses(
-      { margin, strong, inset, nested, hairlines },
+      { margin, nested, inset: isInset, outline: isOutline, strong: isStrong },
       colors,
       className
     ),
@@ -38,11 +67,8 @@
     // base
     c.base,
 
-    // strong
-    strong && c.strong,
-
     // inset
-    inset && c.inset,
+    isInset && c.inset,
 
     className
   );

src/svelte/components/List.svelte

@@ -13,9 +13,6 @@
   export let ios = undefined;
   export let material = undefined;
 
-  let theme;
-  theme = useTheme({}, (v) => (theme = v));
-
   export let margin = 'my-8';
   export let inset = undefined;
   export let insetIos = undefined;
@@ -29,7 +26,11 @@
   export let nested = false;
   export let menuList = false;
 
+  let theme;
+  theme = useTheme({}, (v) => (theme = v));
+
   const dark = useDarkClasses();
+
   $: isStrong =
     typeof strong === 'undefined'
       ? theme === 'ios'

src/vue/components/Block.vue

@@ -5,6 +5,7 @@
 </template>
 <script>
   import { computed } from 'vue';
+  import { useTheme } from '../shared/use-theme.js';
   import { useThemeClasses } from '../shared/use-theme-classes.js';
   import { useDarkClasses } from '../shared/use-dark-classes.js';
   import { cls } from '../../shared/cls.js';
@@ -30,30 +31,67 @@
         default: undefined,
       },
       margin: { type: String, default: 'my-8' },
-      strong: { type: Boolean, default: false },
-      inset: { type: Boolean, default: false },
+      inset: { type: Boolean, default: undefined },
+      insetIos: { type: Boolean, default: false },
+      insetMaterial: { type: Boolean, default: false },
+      strong: { type: Boolean, default: undefined },
+      strongIos: { type: Boolean, default: false },
+      strongMaterial: { type: Boolean, default: false },
+      outline: { type: Boolean, default: undefined },
+      outlineIos: { type: Boolean, default: false },
+      outlineMaterial: { type: Boolean, default: false },
       nested: { type: Boolean, default: false },
-      hairlines: { type: Boolean, default: true },
     },
     setup(props, ctx) {
       const colors = computed(() =>
         BlockColors(props.colors || {}, useDarkClasses)
       );
 
+      const theme = useTheme();
+
+      const isStrong = computed(() =>
+        typeof props.strong === 'undefined'
+          ? theme.value === 'ios'
+            ? props.strongIos
+            : props.strongMaterial
+          : props.strong
+      );
+
+      const isOutline = computed(() =>
+        typeof props.outline === 'undefined'
+          ? theme.value === 'ios'
+            ? props.outlineIos
+            : props.outlineMaterial
+          : props.outline
+      );
+      const isInset = computed(() =>
+        typeof props.inset === 'undefined'
+          ? theme.value === 'ios'
+            ? props.insetIos
+            : props.insetMaterial
+          : props.inset
+      );
+
       const c = useThemeClasses(props, () =>
-        BlockClasses(props, colors.value, ctx.attrs.class)
+        BlockClasses(
+          {
+            ...props,
+            inset: isInset.value,
+            strong: isStrong.value,
+            outline: isOutline.value,
+          },
+          colors.value,
+          ctx.attrs.class
+        )
       );
 
       const classes = computed(() =>
         cls(
           // base
           c.value.base,
 
-          // strong
-          props.strong && c.value.strong,
-
           // inset
-          props.inset && c.value.inset
+          isInset.value && c.value.inset
         )
       );
       return {