pinceau/playground/theme/components/TestNuxt.vue at b1d6884fe20611b5e6855a9893cc032242238e9c · Tahul/pinceau · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<script setup lang="ts">
import { computedStyle } from 'pinceau/runtime'

defineProps({
  color: computedStyle('color', 'pink'),
  ...variants,
})
</script>

<template>
  <button class="big-button">
    <span>Hello Nuxt Nation 👋</span>
    <slot />
  </button>
</template>

<style scoped lang="ts">
const test = keyFrames({
    from: { transform: 'scale(1)' },
    to: { transform: 'scale(1.5)' }
})

css({
    variants: {
        padded: {
            sm: {
                span: {
                    padding: '{space.4} {space.8}',
                }
            },
            md: {
                span: {
                    padding: '{space.8} {space.16}',
                }
            },
            lg: {
                span: {
                    padding: '{space.16} {space.32}',
                }
            },
            xl: {
                span: {
                    padding: '{space.32} {space.64}',
                }
            },
            options: {
                default: 'md'
            },
        },
    },
    '.big-button': {
        display: 'inline-block',
        borderRadius: '{radii.xl}',
        transition: 'box-shadow .1 ease-in-out',
        color: '{color.white}',
        boxShadow: (props) => `0 8px 0 {color.${props.color}.600}, 0 12px 16px rgba(0, 0, 0, .35)`,
        animation: `${test} 1s linear infinite`,
        span: {
            fontFamily: '{font.secondary}',
            display: 'inline-block',
            borderRadius: '{radii.lg}',
            fontSize: '{fontSize.xl}',
            lineHeight: '1',
            transition: 'background-color .2s ease-in-out, transform .1s ease-in-out, text-shadow .1s ease-in-out, box-shadow .1s ease-in-out',
            boxShadow: 'inset 0 -1px 1px rgba(255, 255, 255, .15)',
            backgroundColor: (props) => `{color.${props.color}.500}`,
            backgroundImage: (props) => `linear-gradient(rgba({color.${props.color}.500}, .8), rgba({color.${props.color}.600}, .2))`,
            textShadow: (props) => `0 -1px 1px rgba({color.${props.color}.200}, .7)`,
        },
        '&:hover': {
            span: {
                backgroundColor: (props) => `{color.${props.color}.500}`,
                textShadow: (props) => `0 -1px 1px rgba({color.${props.color}.300}, .9), 0 0 5px rgba(255, 255, 255, .8)`
            }
        },
        '&:active': {
            boxShadow: (props) => `0 8px 0 {color.${props.color}.500}, 0 12px 10px rgba(0, 0, 0, .3)`,
            span: {
                transform: 'translate(0, 4px)'
            }
        }
    }
})
</style>