feat(list): new outline & strong styles

src/react/components/List.jsx

@@ -3,6 +3,7 @@ import { cls } from '../../shared/cls.js';
 import { ListClasses } from '../../shared/classes/ListClasses.js';
 import { useDarkClasses } from '../shared/use-dark-classes.js';
 import { useThemeClasses } from '../shared/use-theme-classes.js';
+import { useTheme } from '../shared/use-theme.js';
 import { ListColors } from '../../shared/colors/ListColors.js';
 
 const List = forwardRef((props, ref) => {
@@ -12,11 +13,20 @@ const List = forwardRef((props, ref) => {
     colors: colorsProp,
 
     margin = 'my-8',
-    inset,
     nested,
     menuList,
 
-    hairlines = true,
+    inset,
+    insetIos,
+    insetMaterial,
+    strong,
+    strongIos,
+    strongMaterial,
+    outline,
+    outlineIos,
+    outlineMaterial,
+
+    // hairlines = true,
 
     ios,
     material,
@@ -39,20 +49,50 @@ const List = forwardRef((props, ref) => {
   const attrs = {
     ...rest,
   };
-
+  const theme = useTheme();
   const themeClasses = useThemeClasses({ ios, material });
   const dark = useDarkClasses();
 
+  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 colors = ListColors(colorsProp, dark);
 
   const c = themeClasses(
-    ListClasses({ ...props, margin, hairlines }, colors, className)
+    ListClasses(
+      {
+        ...props,
+        margin,
+        inset: isInset,
+        strong: isStrong,
+        outline: isOutline,
+      },
+      colors,
+      className
+    )
   );
 
   const classes = cls(
     c.base,
 
-    inset && c.inset,
+    isInset && c.inset,
 
     menuList && c.menuList,
 

src/shared/classes/ListClasses.js

@@ -2,17 +2,24 @@ import { cls } from '../cls.js';
 import { positionClass } from '../position-class.js';
 
 export const ListClasses = (props, colors, classes) => {
-  const { nested, margin, inset, hairlines } = props;
+  const { nested, margin, inset, strong, outline } = props;
   return {
     base: {
       common: cls(
         !nested && margin,
-        !inset && !nested && hairlines && 'hairline-t hairline-b',
+        !inset && !nested && outline && 'hairline-t hairline-b',
+        inset && outline && 'border',
         positionClass('relative', classes),
         'z-10'
       ),
-      ios: colors.bgIos,
-      material: colors.bgMaterial,
+      ios: cls(
+        strong && colors.strongBgIos,
+        inset && outline && colors.outlineIos
+      ),
+      material: cls(
+        strong && colors.strongBgMaterial,
+        inset && outline && colors.outlineMaterial
+      ),
     },
     ul: {
       common: cls(inset && 'no-safe-areas', 'last-child-hairline-b-none'),

src/shared/colors/ListColors.js

@@ -2,8 +2,22 @@ import { cls } from '../cls.js';
 
 export const ListColors = (colorsProp = {}, dark) => {
   return {
-    bgIos: cls(`bg-block-strong-light`, dark('dark:bg-block-strong-dark')),
-    bgMaterial: cls('bg-md-light-surface-1', dark('dark:bg-md-dark-surface-1')),
+    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')
+    ),
+    strongBgMaterial: cls(
+      'bg-md-light-surface-1',
+      dark('dark:bg-md-dark-surface-1')
+    ),
     ...colorsProp,
   };
 };

src/svelte/components/List.svelte

@@ -4,6 +4,7 @@
   import { ListColors } from '../../shared/colors/ListColors.js';
   import { useDarkClasses } from '../shared/use-dark-classes.js';
   import { useThemeClasses } from '../shared/use-theme-classes.js';
+  import { useTheme } from '../shared/use-theme.js';
 
   let className = undefined;
   export { className as class };
@@ -12,28 +13,60 @@
   export let ios = undefined;
   export let material = undefined;
 
+  let theme;
+  theme = useTheme({}, (v) => (theme = v));
+
   export let margin = 'my-8';
-  export let inset = false;
+  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 = false;
   export let menuList = false;
 
-  export let hairlines = true;
-
   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 = ListColors(colorsProp, dark);
 
   $: c = useThemeClasses(
     { ios, material },
-    ListClasses({ nested, margin, inset, hairlines }, colors, className),
+    ListClasses(
+      { nested, margin, inset: isInset, outline: isOutline, strong: isStrong },
+      colors,
+      className
+    ),
     '',
     (v) => (c = v)
   );
 
   $: classes = cls(
     c.base,
 
-    inset && c.inset,
+    isInset && c.inset,
 
     menuList && c.menuList,
 

src/vue/components/List.vue

@@ -12,6 +12,7 @@
   import { ListColors } from '../../shared/colors/ListColors.js';
   import { useDarkClasses } from '../shared/use-dark-classes.js';
   import { useThemeClasses } from '../shared/use-theme-classes.js';
+  import { useTheme } from '../shared/use-theme.js';
 
   export default {
     name: 'k-list',
@@ -32,26 +33,66 @@
         default: undefined,
       },
       margin: { type: String, default: 'my-8' },
-      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 },
       menuList: { type: Boolean, default: false },
-
-      hairlines: { type: Boolean, default: true },
     },
     setup(props, ctx) {
+      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 colors = computed(() =>
         ListColors(props.colors || {}, useDarkClasses)
       );
 
       const c = useThemeClasses(props, () =>
-        ListClasses(props, colors.value, ctx.attrs.class)
+        ListClasses(
+          {
+            ...props,
+            inset: isInset.value,
+            strong: isStrong.value,
+            outline: isOutline.value,
+          },
+          colors.value,
+          ctx.attrs.class
+        )
       );
 
       const classes = computed(() =>
         cls(
           c.value.base,
 
-          props.inset && c.value.inset,
+          isInset.value && c.value.inset,
 
           props.menuList && c.value.menuList
         )