@teammodlr/ui-kit 1.0.6 → 2.0.0

package/src/components/button/style/Button.css.ts

@@ -0,0 +1,585 @@
+import {createVar, globalKeyframes, globalStyle, style, styleVariants} from "@vanilla-extract/css";
+import { themeVars } from "../../../styles/theme.css";
+import { fonts } from "../../../styles/typography.css";
+
+const sizes = {
+    xs: '22px',
+    sm: '28px',
+    md: '36px',
+    lg: '40px',
+    xl: '45px',
+};
+
+const borderRadiuses = {
+    xs: '2px',
+    sm: '3px',
+    md: '4px',
+    lg: '6px',
+    xl: '8px',
+};
+
+const padding = {
+    xs: `0 ${themeVars.space[1]}`,
+    sm: `0 ${themeVars.space[2]}`,
+    md: `0 ${themeVars.space[3]}`,
+    lg: `0 ${themeVars.space[3]}`,
+    xl: `0 ${themeVars.space[4]}`,
+}
+
+export const vars = {
+    height: createVar(),
+    radius: createVar(),
+    padding: createVar(),
+    backgroundColor: createVar(),
+    borderColor: createVar(),
+    boxShadowColor: createVar(),
+    color: createVar(),
+}
+
+export const base = style({
+    alignItems: 'center',
+    boxSizing: 'border-box',
+    display: 'inline-flex',
+    fontSize: themeVars.fontSize.base,
+    fontVariationSettings: `"wght" ${fonts.INTER.wghts[500]}`,
+    maxWidth: '100%',
+    width: 'auto',
+    position: 'relative',
+    textAlign: 'center',
+    textDecoration: 'none',
+    verticalAlign: 'middle',
+    whiteSpace: 'nowrap',
+    justifyContent: 'center',
+    height: vars.height,
+    lineHeight: vars.height,
+    borderRadius: vars.radius,
+    padding: vars.padding,
+    zIndex: "auto",
+    backgroundColor: vars.backgroundColor,
+    border: 0,
+    color: vars.color,
+    transition: `color .3s ${themeVars.transition.default},
+        background-color .3s ${themeVars.transition.default},
+        box-shadow .3s ${themeVars.transition.default},
+        border-color .3s ${themeVars.transition.default}`,
+    fontFamily: 'inherit',
+    ':hover': {
+        cursor: 'pointer',
+    },
+    ':focus': {
+        outline: 'none',
+    }
+});
+
+export const variant = styleVariants({
+    primary: {
+        vars: {
+            [vars.backgroundColor]: themeVars.color.blue[500],
+            [vars.borderColor]: themeVars.color.blue[500],
+            [vars.boxShadowColor]: themeVars.color.blue[500],
+            [vars.color]: '#FFFFFF',
+        },
+        ':hover': {
+            vars: {
+                [vars.backgroundColor]: themeVars.color.blue[600],
+                [vars.borderColor]: themeVars.color.blue[600],
+            },
+        },
+        ':focus': {
+            vars: {
+                [vars.borderColor]: themeVars.color.blue[500],
+            }
+        }
+    },
+    default: {
+        vars: {
+            [vars.color]: themeVars.color.gray[600],
+            [vars.backgroundColor]: 'white',
+            [vars.boxShadowColor]: themeVars.color.blue[500],
+            [vars.borderColor]: themeVars.color.gray[200],
+        },
+        ':hover': {
+            vars: {
+                [vars.color]: themeVars.color.blue[500],
+                [vars.borderColor]: themeVars.color.blue[500]
+            },
+        },
+        ':focus': {
+            vars: {
+                [vars.color]: themeVars.color.blue[500],
+                [vars.borderColor]: themeVars.color.blue[500],
+            }
+        }
+    },
+    tertiary: {
+        vars: {
+            [vars.color]: themeVars.color.gray[400],
+            [vars.backgroundColor]: 'white',
+            [vars.boxShadowColor]: themeVars.color.blue[500],
+            [vars.borderColor]: themeVars.color.gray[200],
+        },
+        ':hover': {
+            vars: {
+                [vars.color]: themeVars.color.blue[500],
+                [vars.borderColor]: themeVars.color.blue[500]
+            },
+        },
+        ':focus': {
+            vars: {
+                [vars.color]: themeVars.color.blue[500],
+                [vars.borderColor]: themeVars.color.blue[500],
+            }
+        }
+    },
+    success: {
+        vars: {
+            [vars.backgroundColor]: themeVars.color.green[500],
+            [vars.borderColor]: themeVars.color.green[500],
+            [vars.boxShadowColor]: themeVars.color.green[500],
+            [vars.color]: '#FFFFFF',
+        },
+        ':hover': {
+            vars: {
+                [vars.backgroundColor]: themeVars.color.green[600],
+                [vars.borderColor]: themeVars.color.green[600],
+                [vars.color]: '#FFFFFF',
+            },
+        },
+        ':focus': {
+            vars: {
+                [vars.borderColor]: themeVars.color.green[600],
+                [vars.backgroundColor]: themeVars.color.green[600],
+            }
+        }
+    },
+    warning: {
+        vars: {
+            [vars.backgroundColor]: themeVars.color.amber[400],
+            [vars.borderColor]: themeVars.color.amber[400],
+            [vars.boxShadowColor]: themeVars.color.amber[400],
+            [vars.color]: themeVars.color.gray[800],
+        },
+        ':hover': {
+            vars: {
+                [vars.backgroundColor]: themeVars.color.amber[500],
+                [vars.borderColor]: themeVars.color.amber[500],
+                [vars.color]: themeVars.color.gray[900],
+            },
+        },
+        ':focus': {
+            vars: {
+                [vars.borderColor]: themeVars.color.amber[500],
+                [vars.backgroundColor]: themeVars.color.amber[500],
+            }
+        }
+    },
+    error: {
+        vars: {
+            [vars.backgroundColor]: themeVars.color.red[500],
+            [vars.borderColor]: themeVars.color.red[500],
+            [vars.boxShadowColor]: themeVars.color.red[500],
+            [vars.color]: '#FFFFFF',
+        },
+        ':hover': {
+            vars: {
+                [vars.backgroundColor]: themeVars.color.red[600],
+                [vars.borderColor]: themeVars.color.red[600],
+            },
+        },
+        ':focus': {
+            vars: {
+                [vars.borderColor]: themeVars.color.red[600],
+                [vars.backgroundColor]: themeVars.color.red[600],
+            }
+        }
+    },
+});
+
+export const secondary = styleVariants({
+    primary: {
+        vars: {
+            [vars.backgroundColor]: themeVars.color.blue[100],
+            [vars.borderColor]: themeVars.color.blue[100],
+            [vars.color]: themeVars.color.blue[500],
+        },
+        ':hover': {
+            vars: {
+                [vars.backgroundColor]: themeVars.color.blue[200],
+                [vars.borderColor]: themeVars.color.blue[200],
+                [vars.color]: themeVars.color.blue[600],
+            },
+        },
+        ':focus': {
+            vars: {
+                [vars.backgroundColor]: themeVars.color.blue[200],
+                [vars.borderColor]: themeVars.color.blue[200],
+                [vars.color]: themeVars.color.blue[600],
+            },
+        }
+    },
+    default: {
+        vars: {
+            [vars.backgroundColor]: themeVars.color.gray[100],
+            [vars.borderColor]: themeVars.color.gray[100],
+            [vars.color]: themeVars.color.gray[500],
+        },
+        ':hover': {
+            vars: {
+                [vars.backgroundColor]: themeVars.color.gray[200],
+                [vars.borderColor]: themeVars.color.gray[200],
+                [vars.color]: themeVars.color.gray[600],
+            },
+        },
+        ':focus': {
+            vars: {
+                [vars.backgroundColor]: themeVars.color.gray[200],
+                [vars.borderColor]: themeVars.color.gray[200],
+                [vars.color]: themeVars.color.gray[600],
+            },
+        }
+    },
+    tertiary: {
+        vars: {
+            [vars.backgroundColor]: themeVars.color.gray[100],
+            [vars.borderColor]: themeVars.color.gray[100],
+            [vars.color]: themeVars.color.gray[400],
+        },
+        ':hover': {
+            vars: {
+                [vars.backgroundColor]: themeVars.color.gray[200],
+                [vars.borderColor]: themeVars.color.gray[200],
+                [vars.color]: themeVars.color.gray[500],
+            },
+        },
+        ':focus': {
+            vars: {
+                [vars.backgroundColor]: themeVars.color.gray[200],
+                [vars.borderColor]: themeVars.color.gray[200],
+                [vars.color]: themeVars.color.gray[500],
+            },
+        }
+    },
+    success: {
+        vars: {
+            [vars.backgroundColor]: themeVars.color.green[100],
+            [vars.borderColor]: themeVars.color.green[100],
+            [vars.color]: themeVars.color.green[600],
+        },
+        ':hover': {
+            vars: {
+                [vars.backgroundColor]: themeVars.color.green[200],
+                [vars.borderColor]: themeVars.color.green[200],
+                [vars.color]: themeVars.color.green[700],
+            },
+        },
+        ':focus': {
+            vars: {
+                [vars.backgroundColor]: themeVars.color.green[200],
+                [vars.borderColor]: themeVars.color.green[200],
+                [vars.color]: themeVars.color.green[700],
+            },
+        }
+    },
+    warning: {
+        vars: {
+            [vars.backgroundColor]: themeVars.color.amber[100],
+            [vars.borderColor]: themeVars.color.amber[100],
+            [vars.color]: themeVars.color.amber[600],
+        },
+        ':hover': {
+            vars: {
+                [vars.backgroundColor]: themeVars.color.amber[200],
+                [vars.borderColor]: themeVars.color.amber[200],
+                [vars.color]: themeVars.color.amber[700],
+            },
+        },
+        ':focus': {
+            vars: {
+                [vars.backgroundColor]: themeVars.color.amber[200],
+                [vars.borderColor]: themeVars.color.amber[200],
+                [vars.color]: themeVars.color.amber[700],
+            },
+        }
+    },
+    error: {
+        vars: {
+            [vars.backgroundColor]: themeVars.color.red[100],
+            [vars.borderColor]: themeVars.color.red[100],
+            [vars.color]: themeVars.color.red[500],
+        },
+        ':hover': {
+            vars: {
+                [vars.backgroundColor]: themeVars.color.red[200],
+                [vars.borderColor]: themeVars.color.red[200],
+                [vars.color]: themeVars.color.red[600],
+            },
+        },
+        ':focus': {
+            vars: {
+                [vars.backgroundColor]: themeVars.color.red[200],
+                [vars.borderColor]: themeVars.color.red[200],
+                [vars.color]: themeVars.color.red[600],
+            },
+        }
+    },
+});
+
+export const link = styleVariants({
+    primary: {
+        vars: {
+            [vars.backgroundColor]: 'transparent',
+            [vars.borderColor]: 'transparent',
+            [vars.color]: themeVars.color.blue[500],
+        },
+        ':hover': {
+            vars: {
+                [vars.backgroundColor]: 'transparent',
+                [vars.borderColor]: 'transparent',
+                [vars.color]: themeVars.color.blue[600],
+            },
+            textDecoration: 'underline',
+        }
+    },
+    default: {
+        vars: {
+            [vars.backgroundColor]: 'transparent',
+            [vars.borderColor]: 'transparent',
+            [vars.color]: themeVars.color.gray[500],
+        },
+        ':hover': {
+            vars: {
+                [vars.backgroundColor]: 'transparent',
+                [vars.borderColor]: 'transparent',
+                [vars.color]: themeVars.color.gray[600],
+            },
+            textDecoration: 'underline',
+        }                
+    },
+    tertiary: {
+        vars: {
+            [vars.backgroundColor]: 'transparent',
+            [vars.borderColor]: 'transparent',
+            [vars.color]: themeVars.color.gray[400],
+        },
+        ':hover': {
+            vars: {
+                [vars.backgroundColor]: 'transparent',
+                [vars.borderColor]: 'transparent',
+                [vars.color]: themeVars.color.gray[500],
+            },
+            textDecoration: 'underline',
+        }     
+    },
+    success: {
+        vars: {
+            [vars.backgroundColor]: 'transparent',
+            [vars.borderColor]: 'transparent',
+            [vars.color]: themeVars.color.green[500],
+        },
+        ':hover': {
+            vars: {
+                [vars.backgroundColor]: 'transparent',
+                [vars.borderColor]: 'transparent',
+                [vars.color]: themeVars.color.green[600],
+            },
+            textDecoration: 'underline',
+        }
+    },
+    warning: {
+        vars: {
+            [vars.backgroundColor]: 'transparent',
+            [vars.borderColor]: 'transparent',
+            [vars.color]: themeVars.color.amber[600],
+        },
+        ':hover': {
+            vars: {
+                [vars.backgroundColor]: 'transparent',
+                [vars.borderColor]: 'transparent',
+                [vars.color]: themeVars.color.amber[700],
+            },
+            textDecoration: 'underline',
+        }
+    },
+    error: {
+        vars: {
+            [vars.backgroundColor]: 'transparent',
+            [vars.borderColor]: 'transparent',
+            [vars.color]: themeVars.color.red[500],
+        },
+        ':hover': {
+            vars: {
+                [vars.backgroundColor]: 'transparent',
+                [vars.borderColor]: 'transparent',
+                [vars.color]: themeVars.color.red[600],
+            },
+            textDecoration: 'underline',
+        }
+    },
+});
+
+export const size = styleVariants({
+    xs: {
+        vars: {
+            [vars.height]: sizes.xs,
+            [vars.radius]: borderRadiuses.xs,
+            [vars.padding]: padding.xs,
+        },
+        fontSize: themeVars.fontSize.small,
+    },
+    sm: {
+        vars: {
+            [vars.height]: sizes.sm,
+            [vars.radius]: borderRadiuses.sm,
+            [vars.padding]: padding.sm,
+        },
+        fontSize: themeVars.fontSize.small,
+    },
+    md: {
+        vars: {
+            [vars.height]: sizes.md,
+            [vars.radius]: borderRadiuses.md,
+            [vars.padding]: padding.md,
+        },
+    },
+    lg: {
+        vars: {
+            [vars.height]: sizes.lg,
+            [vars.radius]: borderRadiuses.lg,
+            [vars.padding]: padding.lg,
+        },
+        fontSize: themeVars.fontSize.large,
+    },
+    xl: {
+        vars: {
+            [vars.height]: sizes.xl,
+            [vars.radius]: borderRadiuses.xl,
+            [vars.padding]: padding.xl,
+        },
+        fontSize: themeVars.fontSize.large,
+    },
+});
+
+const baseBorder = style({
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    bottom: 0,
+    right: 0,
+    pointerEvents: 'none',
+    borderRadius: 'inherit',
+    transition: 'border-color 0.2s ease-in-out',
+});
+
+export const border = style([
+    baseBorder,
+    {
+        border: `1px solid ${vars.borderColor}`,
+    }
+]);
+
+export const borderState = style([
+    baseBorder,
+    {
+        border: `1px solid transparent`,
+        zIndex: 1
+    }
+]);
+
+globalStyle(`${base}:hover ${border}, ${base}:focus ${border}`, {
+    borderColor: "transparent",
+});
+
+globalStyle(`${base}:hover ${borderState}, ${base}:focus ${borderState}`, {
+    borderColor: vars.borderColor,
+});
+
+export const wave = style({
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    bottom: 0,
+    right: 0,
+    pointerEvents: 'none',
+    borderRadius: 'inherit',
+    animationIterationCount: 1,
+    animationDuration: '0.5s',
+    zIndex: 1,
+    animationTimingFunction: 'cubic-bezier(0.4, 0, 0.15, 1), cubic-bezier(0.4, 0, 0.4, 1)',
+});
+
+const buttonWaveGrow = 'button-wave-grow';
+
+globalKeyframes(buttonWaveGrow, {
+    'from': {
+        boxShadow: `0 0 0.5px 0 ${vars.boxShadowColor}`
+    },
+    'to': {
+        boxShadow: `0 0 0.5px 4.4px ${vars.boxShadowColor}`
+    }
+});
+
+const buttonWaveOpacity = 'button-wave-opacity';
+
+globalKeyframes(buttonWaveOpacity, {
+    '0%': {
+        opacity: 0.5
+    },
+    '90%': {
+        opacity: 0
+    },
+    '100%': {
+        opacity: 0
+    }
+});
+
+export const waveActive = style({
+    zIndex: 1,
+    animationName: `${buttonWaveGrow}, ${buttonWaveOpacity}`,
+});
+
+export const iconButton = style({
+    display: 'flex',
+    flexGrow: 0,
+    flexShrink: 0,
+    fontSize: 0,
+    lineHeight: 0,
+    userSelect: 'none',
+    padding: 'initial',
+    height: vars.height,
+    width: vars.height,
+});
+
+export const icon = style({
+    display: 'flex',
+    flexGrow: 0,
+    flexShrink: 0,
+    fontSize: 0,
+    lineHeight: 0,
+    userSelect: 'none'
+});
+
+globalStyle(`${icon} > svg`, {
+    overflow: 'hidden',
+    pointerEvents: 'none',
+    maxWidth: '100%',
+    maxHeight: '100%',
+    verticalAlign: 'middle'
+});
+
+export const iconLeft = style([icon, {
+    marginRight: themeVars.space[2],
+    position: 'relative'
+}]);
+
+export const iconRight = style({
+    marginLeft: themeVars.space[2],
+});
+
+export const rounded = style({
+    borderRadius: '9999px',
+});
+
+export const block = style({
+    display: 'flex',
+    width: '100%',
+});

package/src/components/button/style/index.ts

@@ -0,0 +1 @@
+export * from './Button.css';

package/src/components/buttongroup/ButtonGroup.vue

@@ -1,47 +1,36 @@
-<template>
-    <component
-        :is="tag"
-        :class="computedClasses"
-    >
-        <slot />
-    </component>
-</template>
-
-<script lang="ts">
-import type { Size } from '../../types/props';
-import { defineComponent, provide, type PropType, computed } from 'vue';
-
-export default defineComponent({
-    name: "MButtonGroup",
-    props: {
-        tag: {
-            type: String,
-            default: 'div'
-        },
-        size: {
-            type: String as PropType<Size>,
-            default: 'md'
-        }
-    },
-    setup(props) {
-
-        provide('buttonGroup', {
-            groupProps: props,
-            isGroup: true
-        });
-
-        const computedClasses = computed(() => {
-            return [
-                'm-button-group',
-                {
-                    [`m-button-group--${props.size}`]: props.size
-                }
-            ]
-        });
-
-        return {
-            computedClasses
-        }
-    }
-})
-</script>
+<template>
+    <div
+            :class="classes"
+    >
+        <slot/>
+    </div>
+</template>
+
+<script lang="ts">
+import type {Size} from '../../types/props';
+import {defineComponent, type PropType, provide, reactive, toRef} from 'vue';
+import * as style from "./style";
+import type {ButtonGroupState} from "./symbol";
+import {BUTTON_GROUP_STATE} from "./symbol";
+
+export default defineComponent({
+    name: "MButtonGroup",
+    props: {
+        size: {
+            type: String as PropType<Size>,
+            default: 'md'
+        }
+    },
+    setup(props) {
+        const state: ButtonGroupState = reactive({
+            size: toRef(props, 'size')
+        });
+
+        provide(BUTTON_GROUP_STATE, state);
+
+        return {
+            classes: style.base
+        }
+    }
+})
+</script>

package/src/components/buttongroup/examples/basic.vue

@@ -3,7 +3,7 @@
         <MButton>Hello</MButton>
         <MButton>Hello</MButton>
         <MButton>Hello</MButton>
-        <MButton color="red" secondary>Hello</MButton>
-        <MButton color="green">Hello</MButton>
+        <MButton>Hello</MButton>
+        <MButton>Hello</MButton>
     </MButtonGroup>
 </template>

package/src/components/buttongroup/examples/icon-group.vue

@@ -0,0 +1,22 @@
+<template>
+    <MButtonGroup>
+        <MButton icon>
+            <svg width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5">
+                <path fill-rule="evenodd" d="M2 4.75A.75.75 0 012.75 4h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 4.75zm0 10.5a.75.75 0 01.75-.75h7.5a.75.75 0 010 1.5h-7.5a.75.75 0 01-.75-.75zM2 10a.75.75 0 01.75-.75h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 10z" clip-rule="evenodd" />
+            </svg>
+        </MButton>
+        <MButton icon>
+            <svg width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5">
+                <path fill-rule="evenodd" d="M2 4.75A.75.75 0 012.75 4h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 4.75zM2 10a.75.75 0 01.75-.75h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 10zm0 5.25a.75.75 0 01.75-.75h14.5a.75.75 0 010 1.5H2.75a.75.75 0 01-.75-.75z" clip-rule="evenodd" />
+            </svg>
+
+        </MButton>
+        <MButton icon>
+            <svg width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5">
+                <path fill-rule="evenodd" d="M2 4.75A.75.75 0 012.75 4h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 4.75zm7 10.5a.75.75 0 01.75-.75h7.5a.75.75 0 010 1.5h-7.5a.75.75 0 01-.75-.75zM2 10a.75.75 0 01.75-.75h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 10z" clip-rule="evenodd" />
+            </svg>
+        </MButton>
+    </MButtonGroup>
+</template>
+<script setup lang="ts">
+</script>