spoko-design-system 0.4.4 → 0.4.5

package/icon.config.ts

@@ -231,7 +231,9 @@ export const iconConfig: IconConfig = {
       "x-outline",
       "messages-outline",
       "arrow-down-to-bracket-outline",
-      "check-outline"
+      "check-outline",
+      "plus-outline",
+      "edit-outline",
     ],
 
     ph: [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "spoko-design-system",
-  "version": "0.4.4",
+  "version": "0.4.5",
   "private": false,
   "main": "./index.ts",
   "module": "./index.ts",
@@ -40,7 +40,7 @@
     "spoko design system"
   ],
   "dependencies": {
-    "@algolia/client-search": "^5.20.2",
+    "@algolia/client-search": "^5.20.3",
     "@astrojs/mdx": "^4.0.8",
     "@astrojs/node": "^9.1.0",
     "@astrojs/sitemap": "^3.2.1",
@@ -67,20 +67,20 @@
     "@iconify-json/noto-v1": "^1.2.1",
     "@iconify-json/octicon": "^1.2.4",
     "@iconify-json/ph": "^1.2.2",
-    "@iconify-json/simple-icons": "^1.2.24",
+    "@iconify-json/simple-icons": "^1.2.25",
     "@iconify-json/system-uicons": "^1.2.2",
     "@iconify-json/uil": "^1.2.3",
-    "@iconify/json": "^2.2.307",
+    "@iconify/json": "^2.2.308",
     "@iconify/vue": "^4.3.0",
     "@playform/compress": "^0.1.7",
     "@playform/inline": "^0.1.1",
-    "@unocss/astro": "^65.5.0",
-    "@unocss/preset-attributify": "^65.5.0",
-    "@unocss/preset-typography": "^65.5.0",
-    "@unocss/preset-uno": "^65.5.0",
-    "@unocss/preset-web-fonts": "^65.5.0",
-    "@unocss/preset-wind": "^65.5.0",
-    "@unocss/reset": "^65.5.0",
+    "@unocss/astro": "^66.0.0",
+    "@unocss/preset-attributify": "^66.0.0",
+    "@unocss/preset-typography": "^66.0.0",
+    "@unocss/preset-uno": "^66.0.0",
+    "@unocss/preset-web-fonts": "^66.0.0",
+    "@unocss/preset-wind": "^66.0.0",
+    "@unocss/reset": "^66.0.0",
     "@vite-pwa/astro": "^0.5.0",
     "@vueuse/core": "^12.7.0",
     "astro-i18next": "1.0.0-beta.21",
@@ -96,13 +96,13 @@
     "i18next-http-backend": "^3.0.2",
     "i18next-vue": "^5.1.0",
     "swiper": "^11.2.4",
-    "unocss": "^65.5.0",
+    "unocss": "^66.0.0",
     "vue": "^3.5.13"
   },
   "devDependencies": {
     "@types/gtag.js": "^0.0.20",
     "@types/node": "^22.13.4",
-    "@unocss/transformer-variant-group": "^65.5.0",
+    "@unocss/transformer-variant-group": "^66.0.0",
     "@vitejs/plugin-vue": "^5.2.1",
     "@vue/compiler-sfc": "^3.5.13",
     "astro": "^5.3.0",

package/src/components/Button.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-
 const props = defineProps<{
   href?: string;
   title?: string;
@@ -18,8 +17,16 @@ const props = defineProps<{
   lightHover?: boolean;
   mediumHover?: boolean;
   darkHover?: boolean;
+  circle?: boolean;
 }>();
 
+// Check if we should add a default mediumHover for tertiary
+const shouldAddDefaultMediumHover = props.tertiary || props.tertiaryOutline && 
+  !props.whiteHover && 
+  !props.lightHover && 
+  !props.mediumHover && 
+  !props.darkHover;
+
 const tag = props.href && props.href.length ? 'a' : 'button'
 const classes = {
   "btn-primary": props.primary,
@@ -34,9 +41,10 @@ const classes = {
   "btn-xs": props.small,
   "btn-normal": !props.small && !props.medium,
   "rounded-full": props.rounded,
+  "btn-circle": props.circle,
   "btn-white-hover": props.whiteHover,
   "btn-light-hover": props.lightHover,
-  "btn-medium-hover": props.mediumHover,
+  "btn-medium-hover": props.mediumHover || shouldAddDefaultMediumHover,
   "btn-dark-hover": props.darkHover
 };
 </script>
@@ -61,4 +69,20 @@ const classes = {
   }
 }
 
+/* Circle button styles */
+.btn-circle.btn-normal {
+  @apply w-12;
+}
+
+.btn-circle.btn-sm {
+  @apply w-9.5;
+}
+
+.btn-circle.btn-xs {
+  @apply w-7;
+}
+
+.btn-circle svg {
+  margin: 0;
+}
 </style>

package/src/pages/components/buttons.mdx

@@ -3,7 +3,7 @@ title: "Buttons"
 layout: "../../layouts/MainLayout.astro"
 ---
 import Button from '../../components/Button.vue'
-import ButtonCopy from '../../components/ButtonCopy.vue'
+import ButtonCopy from '../../components/ButtonCopy.astro'
 import { Icon } from 'astro-icon/components';
 import { t } from "i18next";
 
@@ -113,34 +113,34 @@ Text buttons are used for actions that do not require a primary or secondary but
 <div class="component-preview">
     <Button tertiary href="#">
         Read more
-        <Icon name="flowbite:arrow-right-outline" class="ml-2 text-2xl -my-1 -mr-1" />
+        <Icon name="la:arrow-right" class="ml-2 text-2xl -my-1 -mr-1" />
     </Button>
 
     <Button tertiary href="#" medium>
         Read more
-        <Icon name="flowbite:arrow-right-outline" class="ml-2 text-2xl -my-1 -mr-1" />
+        <Icon name="la:arrow-right" class="ml-2 text-2xl -my-1 -mr-1" />
     </Button>
 
     <Button tertiary href="#" small class="px-5">
         Read more
-        <Icon name="flowbite:arrow-right-outline" class="ml-2 text-2xl -my-1 -mr-1" />
+        <Icon name="la:arrow-right" class="ml-2 text-2xl -my-1 -mr-1" />
     </Button>
 </div>
 
 ```html
     <Button tertiary href="#">
         Read more
-        <Icon name="flowbite:arrow-right-outline" class="ml-2 text-2xl -my-1 -mr-1" />
+        <Icon name="la:arrow-right" class="ml-2 text-2xl -my-1 -mr-1" />
     </Button>
 
     <Button tertiary href="#" medium>
         Read more
-        <Icon name="flowbite:arrow-right-outline" class="ml-2 text-2xl -my-1 -mr-1" />
+        <Icon name="la:arrow-right" class="ml-2 text-2xl -my-1 -mr-1" />
     </Button>
 
     <Button tertiary href="#" small class="px-5">
         Read more
-        <Icon name="flowbite:arrow-right-outline" class="ml-2 text-2xl -my-1 -mr-1" />
+        <Icon name="la:arrow-right" class="ml-2 text-2xl -my-1 -mr-1" />
     </Button>
 
 ```
@@ -251,3 +251,107 @@ Text buttons are used for actions that do not require a primary or secondary but
 ```js
 <Button primary href="#" title="Title">Text button</Button>
 ```
+
+## Circle button
+
+Circle buttons are perfect for icon-only actions, maintaining equal width and height.
+
+<div class="component-preview flex-wrap">
+    <div class="flex w-full gap-4 items-center">
+        <Button primary circle>
+            <Icon name="la:arrow-right" />
+        </Button>
+        <Button secondary circle>
+            <Icon name="la:arrow-right" />
+        </Button>
+        <Button tertiary circle>
+            <Icon name="la:arrow-right" />
+        </Button>
+    </div>
+    <div class="flex w-full gap-4 items-center">
+        <Button primary medium circle>
+            <Icon name="la:arrow-right" class="text-xl" />
+        </Button>
+        <Button secondary medium circle>
+            <Icon name="la:arrow-right" class="text-xl" />
+        </Button>
+        <Button tertiary medium circle>
+            <Icon name="la:arrow-right" class="text-xl" />
+        </Button>
+    </div>
+    <div class="flex w-full gap-4 items-center">
+        <Button primary small circle>
+            <Icon name="la:arrow-right" class="text-lg" />
+        </Button>
+        <Button secondary small circle>
+            <Icon name="la:arrow-right" class="text-lg" />
+        </Button>
+        <Button tertiary small circle>
+            <Icon name="la:arrow-right" class="text-lg" />
+        </Button>
+    </div>
+</div>
+
+```js
+<Button primary circle>
+    <Icon name="la:arrow-right" />
+</Button>
+<Button secondary circle>
+    <Icon name="la:arrow-right" />
+</Button>
+<Button tertiary circle>
+    <Icon name="la:arrow-right" />
+</Button>
+
+<Button primary medium circle>
+    <Icon name="la:arrow-right" class="text-xl" />
+</Button>
+<Button secondary medium circle>
+    <Icon name="la:arrow-right" class="text-xl" />
+</Button>
+<Button tertiary medium circle>
+    <Icon name="la:arrow-right" class="text-xl" />
+</Button>
+
+
+
+<Button primary small circle>
+    <Icon name="la:arrow-right" class="text-lg" />
+</Button>
+<Button secondary small circle>
+    <Icon name="la:arrow-right" class="text-lg" />
+</Button>
+<Button tertiary small circle>
+    <Icon name="la:arrow-right" class="text-lg" />
+</Button>
+```
+
+### Circle outline buttons
+
+Circle buttons are also available in outline variants.
+
+<div class="component-preview">
+    <Button primary-outline circle>
+        <Icon name="la:arrow-right" class="text-2xl" />
+    </Button>
+
+    <Button secondary-outline circle>
+        <Icon name="la:arrow-right" class="text-2xl" />
+    </Button>
+
+    <Button tertiary-outline circle>
+        <Icon name="la:arrow-right" class="text-2xl" />
+    </Button>
+</div>
+
+```js
+    <Button primary-outline circle>
+        <Icon name="la:arrow-right" class="text-2xl" />
+    </Button>
+    <Button secondary-outline circle>
+        <Icon name="la:arrow-right" class="text-2xl" />
+    </Button>
+    <Button tertiary-outline circle>
+        <Icon name="la:arrow-right" class="text-2xl" />
+    </Button>
+```

package/uno-config/theme/shortcuts/buttons.ts

@@ -5,19 +5,19 @@ const { base, sizes, variants, hover } = BUTTON_STYLES
 
 export const buttonShortcuts = [
     // Base buttons
-    ['btn', `px-4 py-1 rounded inline-block bg-teal-600 text-white cursor-pointer hover:bg-teal-700 disabled:(cursor-default bg-gray-600 opacity-50)`],
+    ['btn', `px-4 py-1 rounded inline-block bg-teal-600 text-white cursor-pointer hover:bg-teal-700 disabled:(cursor-default bg-gray-600 opacity-50) ${TRANSITIONS.base}`],
     ['icon-btn', `text-[0.9em] inline-block cursor-pointer select-none opacity-75 ${TRANSITIONS.base} hover:(opacity-100 text-teal-600)`],
 
     // Primary buttons
-    ['btn-primary', `${base.layout} ${base.text} ${variants.primary.solid}`],
-    ['btn-primary-outline', `${base.layout} ${base.text} ${variants.primary.outline} ${TRANSITIONS.base}`],
+    ['btn-primary', `${base.layout} ${base.text} ${variants.primary.solid} ${TRANSITIONS.base}`],
+    ['btn-primary-outline', `${base.layout} ${base.text} ${variants.primary.outline} ${TRANSITIONS.base} ${TRANSITIONS.base}`],
     
     // Secondary buttons
-    ['btn-secondary', `${base.layout} ${base.text} ${variants.secondary.solid}`],
-    ['btn-secondary-outline', `${base.layout} ${base.text} ${variants.secondary.outline}`],
+    ['btn-secondary', `${base.layout} ${base.text} ${variants.secondary.solid} ${TRANSITIONS.base}`],
+    ['btn-secondary-outline', `${base.layout} ${base.text} ${variants.secondary.outline} ${TRANSITIONS.base}`],
     
     // Tertiary buttons
-    ['btn-tertiary', `${base.layout} ${base.text} ${variants.tertiary.solid}`],
+    ['btn-tertiary', `${base.layout} ${base.text} ${variants.tertiary.solid} ${TRANSITIONS.base}`],
     ['btn-tertiary-outline', `${base.layout} border ${base.text} ${variants.tertiary.outline} ${TRANSITIONS.base}`],
     
     // Utility buttons
@@ -36,6 +36,7 @@ export const buttonShortcuts = [
     ['btn-dark-hover', hover.dark],
 
     // Special buttons
+    ['btn-circle', `rounded-full !p-0 aspect-square inline-flex`],
     ['btn-copy', `leading-none opacity-10 hover:opacity-80 ml-auto w-6 h-6 -right-7 sm:(h-4 w-4 -right-5) ${LAYOUT.position.absolute}`],
     ['btn-copy-text', 'shadow-sm py-0.5 px-1 bg-gray-100 -ml-1 -mt-4 text-xxs whitespace-nowrap'],
     ['btn-prcode', `${LAYOUT.position.relative} inline-block text-center leading-none px-1 py-0.5 mr-1 cursor-pointer font-mono border-solid border-1 border-gray-200 select-none text-gray-500 last:mr-0 not-last:mr-2 not-last:after:content-[+] after:(text-blue-darker ${LAYOUT.position.absolute} w-4 pl-0.5)`]

package/uno-config/theme/shortcuts/constants.ts

@@ -63,22 +63,22 @@ export const LAYOUT = {
 
 // Common transitions
 export const TRANSITIONS = {
-  base: 'transition-all duration-300 ease-linear',
+  base: 'transition-all duration-100 ease-linear',
   transform: 'transition-transform-300',
-  hover: 'transition duration-200 ease-in-out',
+  hover: 'transition duration-100 ease-in-out',
 } as const
 
 // Button base styles
 export const BUTTON_STYLES = {
   base: {
     layout: 'inline-flex items-center justify-center',
-    text: 'text-base font-medium text-center',
+    text: 'text-base font-medium text-center leading-4.5',
     transition: 'transition-all duration-200 ease-in-out',
   },
   sizes: {
-    normal: 'md:px-10 md:py-2 md:text-lg px-8 py-3 whitespace-nowrap',
-    sm: 'px-6 py-2 text-sm whitespace-nowrap',
-    xs: 'px-4 py-1 text-sm whitespace-nowrap',
+    normal: 'md:px-10 md:py-2 md:text-lg px-8 py-3 whitespace-nowrap h-12',
+    sm: 'px-6 py-2 text-sm whitespace-nowrap h-9.5',
+    xs: 'px-4 py-1 text-sm whitespace-nowrap ',
   },
   variants: {
     primary: {
@@ -110,10 +110,10 @@ export const TYPOGRAPHY = {
     light: 'font-headlight font-300 tracking-tight',
   },
   text: {
-    xs: 'text-xs',
-    sm: 'text-sm',
-    base: 'text-base',
-    lg: 'text-lg',
+    xs: 'text-3',
+    sm: 'text 3.5',
+    base: 'text-4',
+    lg: 'text-4.5',
   },
 } as const