fix: box tranparency setting improved

Author: gureckis

components/Box.vue

@@ -4,7 +4,7 @@ import { resolveColor } from '../layoutHelper'
 const props = defineProps({
   shape: {
     type: String,
-    default: 's-s-2-0',
+    default: 's-s-2-100',
   },
   color: {
     type: String,
@@ -76,15 +76,11 @@ const style = computed(() => {
   // add custom class
   s += props.custom
 
-  // bg opacity
-  s += ` opacity-${parts[3]} `
-
-  console.log(s)
   return s
 })
 
 const trans = computed(() => {
-  const val = 100 - parseInt(props.shape.split('-')[3])
+  const val = parseInt(props.shape.split('-')[3])
   return `${val}%`
 })
 </script>
@@ -93,7 +89,7 @@ const trans = computed(() => {
 </template>
 <style scoped>
 .binder {
-  --new-color: color-mix(in srgb, var(--neversink-bg-color), transparent v-bind(trans));
+  --new-color: color-mix(in srgb, var(--neversink-bg-color), v-bind(trans) transparent);
   border-color: var(--neversink-border-color);
   background-color: var(--new-color);
   color: var(--neversink-text-color);

docs/components/box.md

@@ -8,11 +8,10 @@ Draws an empty or filled box. Useful for highlighting and grouping things.
 
 The `Box` component is used to just draw a rectangle. It has the following props:
 
-- `shape` (optional) the shape of the box. There are four values connected with a kebob style notation. The first element is the shape which can be `s` (square), `r` (rounded) or `f` (full) which is practically a circle. The second element is the border type which can be `s` (solid), `d` (dashed) or `o` (dotted). The third element is the border radius in pixels. The fourth element is the opacity of the fill (0 = transparent, 100=opaque).
-  For example, the default is 's-s-2-0' which is a rounded rectangle with a 2px border and transparent fill. A few examples appear below.
+- `shape` (optional) the shape of the box. There are four values connected with a kebob style notation. The first element is the shape which can be `s` (square), `r` (rounded) or `f` (full) which is practically a circle. The second element is the border type which can be `s` (solid), `d` (dashed) or `o` (dotted). The third element is the border radius in pixels. The fourth element is the opacity of the fill (0 = opaque, 100=transparent). For example, the default is 's-s-2-100' which is a square rectangle with a 2px solid border and transparent fill. A few examples appear below.
 - `size` (optional) the size of the square. The default is '150px'.
 - `color` (optional) the color of the shape. It uses the color schemes in the theme. The default is 'white' (which means a black border and white fill).
-- `custom` (optional) any custom classes you want to add to the box. The default is none.
+- `custom` (optional) any custom classes you want to add to the box. The default is none. For example, opacity only applies to the fill not the border but you can change that using `custom` classes.
 
 ```md
 <Box v-drag />
@@ -33,18 +32,18 @@ But of course you can customise it:
 <Box shape='r-d-8-0' width='200px' custom='m-10 ' />
 
 ```md
-<Box shape='f-o-5-50' color='sky-light' custom='m-10' />
+<Box shape='f-o-5-0' color='sky-light' custom='m-10' />
 ```
 
-<Box shape='f-o-5-50' color='sky-light' custom='m-10' />
+<Box shape='f-o-5-0' color='sky-light' custom='m-10' />
 
 more transparent:
 
 ```md
-<Box shape='f-o-5-10' color='sky-light' custom='m-10' />
+<Box shape='f-o-5-75' color='sky-light' custom='m-10' />
 ```
 
-<Box shape='f-o-5-10' color='sky-light' custom='m-10' />
+<Box shape='f-o-5-75' color='sky-light' custom='m-10' />
 
 If can include text as well using a slot
 

uno.config.ts

@@ -194,6 +194,8 @@ export default defineConfig({
       'm-10',
       'w-150px',
       'h-150px',
+      'z-0',
+      'z-100',
     ] /* for the docs */,
   ],
   transformers: [transformerDirectives()],