McPeakDev/Nychthemeron
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 2 Wiki Activity Actions

feat(button): Finished up button and CSS

Browse source
This commit is contained in:
Matthew McPeak 2026-05-21 22:16:15 -04:00
parent 9baf870446
commit e12785a056
Signed by: McPeakML
GPG key ID: 3D64A2E70F58D07C
5 changed files with 210 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

48
packages/library/src/assets/css/nychthemeron.css
View file

@ -23,30 +23,31 @@
/* primary */ /* primary */
--primary: #d4b278; --primary: #d4b278;
--primary-fg: #0e0c08; --primary-fg: #fff8e8;
/* semantic */ /* semantic */
--warn: #e08840; /* phlegethon */ --warn: #e08840; /* phlegethon */
--warn-subtle: #281808; --warn-subtle: #281808;
--warn-border: #4a2c10; --warn-border: #4a2c10;
--warn-fg: #fff8e8;
--danger: #9ab4c8; /* styx */ --danger: #7a1a1a; /* plague */
--danger-subtle: #141a22; --danger-subtle: #faeaea;
--danger-border: #2a3848; --danger-border: #c8a0a0;
--danger-fg: #fff8e8;
--info: #88aec8; /* cocytus */ --info: #88aec8; /* cocytus */
--info-subtle: #101e2c; --info-subtle: #101e2c;
--info-border: #1e3850; --info-border: #1e3850;
--info-fg: #fff8e8;
--muted: #c8c0a8; /* lethe */
--muted-subtle: #201e18;
--muted-border: #403c30;
--neutral: #7a6e60; /* acheron */ --neutral: #7a6e60; /* acheron */
--neutral-fg: #fff8e8;
--success: #6aaa7a; /* laurel */ --success: #6aaa7a; /* laurel */
--success-subtle: #0e2214; --success-subtle: #0e2214;
--success-border: #1e4228; --success-border: #1e4228;
--success-fg: #fff8e8;
/* text */ /* text */
--text-high: #f4f0e8; --text-high: #f4f0e8;
@ -59,7 +60,7 @@
--focus-ring: 0 0 0 3px rgba(212, 178, 120, 0.18); --focus-ring: 0 0 0 3px rgba(212, 178, 120, 0.18);
/* fonts */ /* fonts */
--font-serif: 'Cinzel', Georgia, serif; --font-serif: 'Cinzel', serif;
--font-sans: 'IBM Plex Sans', system-ui, sans-serif; --font-sans: 'IBM Plex Sans', system-ui, sans-serif;
--font-mono: 'IBM Plex Mono', monospace; --font-mono: 'IBM Plex Mono', monospace;
} }
@ -86,24 +87,25 @@
--warn: #9a6020; /* harmony */ --warn: #9a6020; /* harmony */
--warn-subtle: #fdf3e0; --warn-subtle: #fdf3e0;
--warn-border: #e8d0a0; --warn-border: #e8d0a0;
--warn-fg: #fff8e8;
--danger: #7a1a1a; /* plague */ --danger: #7a1a1a; /* plague */
--danger-subtle: #faeaea; --danger-subtle: #faeaea;
--danger-border: #c8a0a0; --danger-border: #c8a0a0;
--danger-fg: #fff8e8;
--info: #3a5a8a; /* oracle */ --info: #3a5a8a; /* oracle */
--info-subtle: #e8eef8; --info-subtle: #e8eef8;
--info-border: #b0c4e0; --info-border: #b0c4e0;
--info-fg: #fff8e8;
--muted: #a09080; /* lethe */
--muted-subtle: #ede8de;
--muted-border: #d4cdc0;
--neutral: #8a8070; /* marble */ --neutral: #8a8070; /* marble */
--neutral-fg: #fff8e8;
--success: #5a7a40; /* laurel */ --success: #5a7a40; /* laurel */
--success-subtle: #eef4e8; --success-subtle: #eef4e8;
--success-border: #c0d4a8; --success-border: #c0d4a8;
--success-fg: #fff8e8;
/* text */ /* text */
--text-high: #1a1610; --text-high: #1a1610;
@ -116,7 +118,7 @@
--focus-ring: 0 0 0 3px rgba(184, 134, 11, 0.12); --focus-ring: 0 0 0 3px rgba(184, 134, 11, 0.12);
/* fonts */ /* fonts */
--font-serif: 'Cinzel', Georgia, serif; --font-serif: 'Cinzel', serif;
--font-sans: 'IBM Plex Sans', system-ui, sans-serif; --font-sans: 'IBM Plex Sans', system-ui, sans-serif;
--font-mono: 'IBM Plex Mono', monospace; --font-mono: 'IBM Plex Mono', monospace;
} }
@ -131,19 +133,27 @@
} }
html { html {
font-family: var(--font-sans); font-family: var(--font-serif);
font-size: 14px; font-size: 14px;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }
body { body {
background-color: var(--surface-0); background-color: var(--surface-0) !important;
color: var(--text-body); color: var(--text-body);
min-height: 100vh; min-height: 100vh;
} }
*:focus-visible { @keyframes spin {
outline: none; from {
box-shadow: var(--focus-ring); transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.wreath {
transform-origin: 340px 180px;
animation: spin 2s linear infinite;
} }

91
packages/library/src/assets/theme/theme.css
View file

@ -1,6 +1,95 @@
@import url('../css/nychthemeron.css'); @import url('../css/nychthemeron.css');
.nych-button-primary { [class^='nych-'] {
font-family: var(--font-serif) !important;
}
[class^='nych-']:disabled {
cursor: not-allowed;
box-shadow: unset;
}
[class^='nych-button'] {
padding: 7px;
border-radius: 5px;
box-shadow: 2px 2px 10px var(--text-high);
border: none;
cursor: pointer;
}
[class^='nych-button']:hover:not(:disabled) {
box-shadow: 0px 0px 8px var(--text-high);
transition: box-shadow 0.3s ease;
}
[class^='nych-button'][data-p~='loading'] {
display: flex;
}
[class^='nych-button'][data-p~='loading'] span {
margin-top: 2px;
}
[class^='nych-'][class$='-primary'] {
background-color: var(--primary); background-color: var(--primary);
color: var(--primary-fg); color: var(--primary-fg);
} }
[class^='nych-'][class$='-secondary'],
[class^='nych-'][class$='-muted'] {
background-color: var(--neutral);
color: var(--neutral-fg);
}
[class^='nych-'][class$='-info'] {
background-color: var(--info);
color: var(--info-fg);
}
[class^='nych-'][class$='-success'] {
background-color: var(--success);
color: var(--success-fg);
}
[class^='nych-'][class$='-warning'] {
background-color: var(--warn);
color: var(--warn-fg);
}
[class^='nych-'][class$='-danger'],
[class^='nych-'][class$='-error'] {
background-color: var(--danger);
color: var(--danger-fg);
}
[class^='nych-'][class$='-large'] span {
font-size: 16pt;
}
.nych-loading-icon .wreath path {
fill: var(--primary-fg);
}
.nych-loading-icon .wreath line {
stroke: var(--text-high);
}
.nych-button-icon {
margin-right: 5px;
margin-top: 0px;
}
[class^='nych-'][data-p~='small'] * {
height: 15px;
font-size: 8pt;
}
[class^='nych-'][data-p~='normal'] * {
height: 25px;
font-size: 12pt;
}
[class^='nych-'][data-p~='large'] * {
height: 40px;
font-size: 20pt;
}

12
packages/library/src/components/NychButton.vue
View file

@ -1,10 +1,11 @@
<script setup lang="ts"> <script setup lang="ts">
import { Button } from 'primevue' import { Button } from 'primevue'
import { computed } from 'vue' import { computed } from 'vue'
import NychLoadingIcon from './NychLoadingIcon.vue'
interface Props { interface Props {
label?: string label?: string
variant?: 'primary' | 'secondary' | 'success' | 'warning' | 'danger' variant?: 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info'
size?: 'small' | 'normal' | 'large' size?: 'small' | 'normal' | 'large'
disabled?: boolean disabled?: boolean
loading?: boolean loading?: boolean
@ -25,6 +26,8 @@ const emit = defineEmits<{
const buttonClass = computed(() => ({ const buttonClass = computed(() => ({
[`nych-button-${props.variant}`]: true, [`nych-button-${props.variant}`]: true,
})) }))
</script> </script>
<template> <template>
@ -32,10 +35,15 @@ const buttonClass = computed(() => ({
unstyled unstyled
:label="label" :label="label"
:class="buttonClass" :class="buttonClass"
:size="size"
:disabled="disabled || loading" :disabled="disabled || loading"
:loading="loading" :loading="loading"
@click="emit('click', $event)" @click="emit('click', $event)"
/> >
<template #loadingicon>
<NychLoadingIcon class="nych-button-icon" />
</template>
</Button>
</template> </template>
<style lang="css"></style> <style lang="css"></style>

70
packages/library/src/components/NychLoadingIcon.vue Normal file
View file

@ -0,0 +1,70 @@
<template>
<svg class="nych-loading-icon" preserve-aspect-ratio="true" viewBox="226 66 228 228 ">
<g class="wreath">
<g transform="rotate(0,340,180)">
<path d="M340,70 C350,78 352,96 343,112 C339,107 332,93 335,76 Z" />
<line x1="340" y1="73" x2="343" y2="110" stroke-width="0.8" stroke-linecap="round" />
</g>
<g transform="rotate(22.5,340,180)">
<path d="M340,72 C350,80 352,97 343,113 C339,108 332,94 335,77 Z" />
<line x1="340" y1="75" x2="343" y2="111" stroke-width="0.8" stroke-linecap="round" />
</g>
<g transform="rotate(45,340,180)">
<path d="M340,70 C350,78 352,96 343,112 C339,107 332,93 335,76 Z" />
<line x1="340" y1="73" x2="343" y2="110" stroke-width="0.8" stroke-linecap="round" />
</g>
<g transform="rotate(67.5,340,180)">
<path d="M340,72 C350,80 352,97 343,113 C339,108 332,94 335,77 Z" />
<line x1="340" y1="75" x2="343" y2="111" stroke-width="0.8" stroke-linecap="round" />
</g>
<g transform="rotate(90,340,180)">
<path d="M340,70 C350,78 352,96 343,112 C339,107 332,93 335,76 Z" />
<line x1="340" y1="73" x2="343" y2="110" stroke-width="0.8" stroke-linecap="round" />
</g>
<g transform="rotate(112.5,340,180)">
<path d="M340,72 C350,80 352,97 343,113 C339,108 332,94 335,77 Z" />
<line x1="340" y1="75" x2="343" y2="111" stroke-width="0.8" stroke-linecap="round" />
</g>
<g transform="rotate(135,340,180)">
<path d="M340,70 C350,78 352,96 343,112 C339,107 332,93 335,76 Z" />
<line x1="340" y1="73" x2="343" y2="110" stroke-width="0.8" stroke-linecap="round" />
</g>
<g transform="rotate(157.5,340,180)">
<path d="M340,72 C350,80 352,97 343,113 C339,108 332,94 335,77 Z" />
<line x1="340" y1="75" x2="343" y2="111" stroke-width="0.8" stroke-linecap="round" />
</g>
<g transform="rotate(180,340,180)">
<path d="M340,70 C350,78 352,96 343,112 C339,107 332,93 335,76 Z" />
<line x1="340" y1="73" x2="343" y2="110" stroke-width="0.8" stroke-linecap="round" />
</g>
<g transform="rotate(202.5,340,180)">
<path d="M340,72 C350,80 352,97 343,113 C339,108 332,94 335,77 Z" />
<line x1="340" y1="75" x2="343" y2="111" stroke-width="0.8" stroke-linecap="round" />
</g>
<g transform="rotate(225,340,180)">
<path d="M340,70 C350,78 352,96 343,112 C339,107 332,93 335,76 Z" />
<line x1="340" y1="73" x2="343" y2="110" stroke-width="0.8" stroke-linecap="round" />
</g>
<g transform="rotate(247.5,340,180)">
<path d="M340,72 C350,80 352,97 343,113 C339,108 332,94 335,77 Z" />
<line x1="340" y1="75" x2="343" y2="111" stroke-width="0.8" stroke-linecap="round" />
</g>
<g transform="rotate(270,340,180)">
<path d="M340,70 C350,78 352,96 343,112 C339,107 332,93 335,76 Z" />
<line x1="340" y1="73" x2="343" y2="110" stroke-width="0.8" stroke-linecap="round" />
</g>
<g transform="rotate(292.5,340,180)">
<path d="M340,72 C350,80 352,97 343,113 C339,108 332,94 335,77 Z" />
<line x1="340" y1="75" x2="343" y2="111" stroke-width="0.8" stroke-linecap="round" />
</g>
<g transform="rotate(315,340,180)">
<path d="M340,70 C350,78 352,96 343,112 C339,107 332,93 335,76 Z" />
<line x1="340" y1="73" x2="343" y2="110" stroke-width="0.8" stroke-linecap="round" />
</g>
<g transform="rotate(337.5,340,180)">
<path d="M340,72 C350,80 352,97 343,113 C339,108 332,94 335,77 Z" />
<line x1="340" y1="75" x2="343" y2="111" stroke-width="0.8" stroke-linecap="round" />
</g>
</g>
</svg>
</template>

15
packages/playground/stories/Button.stories.ts
View file

@ -12,7 +12,7 @@ const meta = {
argTypes: { argTypes: {
variant: { variant: {
control: { type: 'select' }, control: { type: 'select' },
options: ['primary', 'secondary', 'success', 'warning', 'danger'], options: ['primary', 'secondary', 'info', 'success', 'warning', 'danger'],
description: 'Button variant style', description: 'Button variant style',
}, },
size: { size: {
@ -52,6 +52,13 @@ export const Secondary: Story = {
}, },
} }
export const Info: Story = {
args: {
label: 'Info Button',
variant: 'info',
},
}
export const Success: Story = { export const Success: Story = {
args: { args: {
label: 'Success Button', label: 'Success Button',
@ -95,9 +102,9 @@ export const Sizes: Story = {
}, },
template: ` template: `
<div class="flex gap-4 items-center"> <div class="flex gap-4 items-center">
<NychButton label="Small" size="small" /> <NychButton label="Small" size="small" loading="true"/>
<NychButton label="Normal" size="normal" /> <NychButton label="Normal" size="normal" loading="true" />
<NychButton label="Large" size="large" /> <NychButton label="Large" size="large" loading="true" />
</div> </div>
`, `,
}), }),