Merge pull request #17 from unify-ui-dev/preset-variant

Fix isssue with the preset variant

.github/ISSUE_TEMPLATE/🐞-bug-report.md

@@ -7,6 +7,17 @@ assignees: ''
 
 ---
 
+**Describe the bug**
+A clear and concise description of what the bug is.
+---
+name: "\U0001F41E Bug report"
+about: Create a report to help us improve the Themer
+title: ''
+labels: ''
+assignees: ''
+
+---
+
 **Describe the bug**
 A clear and concise description of what the bug is.
 
@@ -23,6 +34,20 @@ A clear and concise description of what you expected to happen.
 **Screenshots**
 If applicable, add screenshots to help explain your problem.
 
+**Desktop (please complete the following information):**
+ - OS: [e.g. iOS]
+ - Browser [e.g. chrome, safari]
+ - Version [e.g. 22]
+
+**Smartphone (please complete the following information):**
+ - Device: [e.g. iPhone6]
+ - OS: [e.g. iOS8.1]
+ - Browser [e.g. stock browser, safari]
+ - Version [e.g. 22]
+
+**Screenshots**
+If applicable, add screenshots to help explain your problem.
+
 **Desktop (please complete the following information):**
  - OS: [e.g. iOS]
  - Browser [e.g. chrome, safari]

.github/ISSUE_TEMPLATE/🚀-new-feature-proposal.md

@@ -1,6 +1,6 @@
 ---
-name: "\U0001F680 New feature proposal"
-about: Propose a new feature to be addedd
+name: "\U0001F680 New feature(Feature, Components, Variants and improvements) proposal"
+about: Suggest a new feature to be addedd
 title: ''
 labels: ''
 assignees: ''

packages/unify-preset/build.config.ts

@@ -14,7 +14,6 @@ export default defineBuildConfig({
                 "@/utils": resolve(__dirname, './src/utils/')
             }
         },
-        inlineDependencies: true
     },
 
     failOnWarn: false,

packages/unify-preset/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unifydev/unify-preset",
-  "version": "0.0.0",
+  "version": "0.0.1",
   "description": "UnoCSS Theming Toolkit, create modern and beautifull Web Ui",
   "publishConfig": {
     "access": "public"
@@ -21,8 +21,6 @@
   },
   "files": [
     "dist",
-    "!dist/index.d.cts",
-    "!dist/index.d.mts",
     "README.md",
     "favicon-dark.png",
     "package.json",
@@ -32,10 +30,12 @@
   ],
   "author": "Johnkat MJ",
   "license": "MIT",
+  "dependencies": {
+    "@unifydev/unify-variant": "^0.0.1"
+  },
   "devDependencies": {
     "@biomejs/biome": "1.6.2",
     "@types/node": "^20.11.27",
-    "@unifydev/unify-variant": "latest",
     "rimraf": "^5.0.5",
     "ts-node": "^10.9.2",
     "typescript": "^5.4.2",

packages/unify-preset/src/rules/utils.ts

@@ -15,10 +15,19 @@ export const getRadius = (val: string) => {
     return radius[val]
 }
 
+const extractRgbaIfContainsAlphaValue = (input: string | undefined) => {
+    const regex = /var\((.*?)\)/;
+    const match = input?.match(regex);
+    return match ? match[1] : null;
+}
+
 export const getVariableBgValue = (body: string, theme: Theme) => {
     const color = parseColor(body, theme)
+    const extractedColor = extractRgbaIfContainsAlphaValue(color?.color)
     if (color?.cssColor?.type === 'rgb' && color.cssColor.components)
         return `rgb(${color.cssColor.components.join(',')})`
+    if (color?.cssColor?.type === 'rgba' && color.cssColor.components && extractedColor)
+        return `var(${extractedColor})`
     return color?.color
 }
 

packages/unify-preset/src/shortcuts/button/const.ts

@@ -165,7 +165,7 @@ const btnIconSizes: BtnIconSizes = {
 
 const ringBase:RingBase = {
     size: 2,
-    offset: 4,
+    offset: 2,
 }
 const ringConfig: RingColorShades = {
     light: "600",

packages/unify-preset/src/shortcuts/button/index.ts

@@ -2,9 +2,9 @@ import type { BtnIconBase, BtnSizeBase, Button } from "./types"
 import { genBtnVariantOutline, genBtnVariantSolid, genBtnVariantSoft, genBtnVariantGhost, genBtnVariantWhite, genBtnVariantSolidGradient } from "./helpers"
 import { getConfigValue } from "@/utils"
 import { btnCongig } from "./const"
-import { genFocusVisibleRing, getRingBase } from "../shortcut_helper"
+import { genFocusVisibleOutline } from "../shortcut_helper"
 
-import type { SharedFormConfig, UiConfig } from "@/types"
+import type { RingColorShades, SharedFormConfig, UiConfig } from "@/types"
 import type { Shortcut } from "unocss"
 import { isValidColor } from "@/utils/colors-utils"
 
@@ -36,8 +36,7 @@ const getBtnShortcuts = ({ button, uiConfig, formConfig }: { button?: Button, fo
 
 
     const btns = {
-        // biome-ignore lint/complexity/useLiteralKeys: <explanation>
-        'btn': "flex items-center disabled-opacity-50 disabled-cursor-not-allowed disabled-hover-opacity-70 outline-0 outline-transparent",
+        btn: "flex items-center disabled-opacity-50 disabled-cursor-not-allowed disabled-hover-opacity-70 outline-0 outline-transparent",
         'btn-xs': `${getBtnSizeInfo(xs as BtnSizeBase)}`,
         'btn-sm': `${getBtnSizeInfo(sm as BtnSizeBase)}`,
         'btn-md': `${getBtnSizeInfo(md as BtnSizeBase)}`,
@@ -51,33 +50,34 @@ const getBtnShortcuts = ({ button, uiConfig, formConfig }: { button?: Button, fo
         'btn-white': `${genBtnVariantWhite({ solid: btnWhite, appearance })}`
     }
 
-    const getRing = (color: string) => `${getRingBase(appearance, ringBase.size, ringBase.offset)} ${genFocusVisibleRing(color, appearance, focusRing, focusRingGray)}`
-
+    const getOutlineOnSolid = (color: string, ringVal: RingColorShades) => `focus-visible-outline focus-visible-outline-offset-${ringBase.offset} focus-visible-outline-${getConfigValue(ringBase.size)} ${genFocusVisibleOutline(color, appearance, ringVal)}`
     const dynamicBtns: Shortcut[] = [
         [/^btn-solid(-(\S+))?$/, ([, , color = 'primary'], { theme }) => {
             const shades = color === "gray" ? graySolid : solidShade
-            if (isValidColor(color, theme)) return `${genBtnVariantSolid({ color, shades: shades, appearance })} ${getRing(color)}`
+            const ringVal = color === "gray" ? focusRingGray : focusRing
+            if (isValidColor(color, theme)) return `${getOutlineOnSolid(color, ringVal)} ${genBtnVariantSolid({ color, shades: shades, appearance })}`
         }, { autocomplete: ['btn-solid', 'btn-solid-(primary|secondary|accent|success|warning|info|danger|gray|neutral)'] }],
         [/^btn-outline(-(\S+))?$/, ([, , color = 'primary'], { theme }) => {
             const shades = color === 'gray' ? outlineBtnGray : outlineBtn
-            if (isValidColor(color, theme)) return `${getRing(color)} ${genBtnVariantOutline({ color, appearance, outlineShades:shades })}`
+            const ringVal = color === "gray" ? focusRingGray : focusRing
+            if (isValidColor(color, theme)) return `${getOutlineOnSolid(color, ringVal)} ${genBtnVariantOutline({ color, appearance, outlineShades: shades })}`
         }, { autocomplete: ['btn-outline', 'btn-outline-(primary|secondary|accent|success|warning|info|danger|gray|neutral)'] }],
         [/^btn-soft(-(\S+))?$/, ([, , color = 'primary'], { theme }) => {
             const softShades = color === "gray" ? graySoft : soft
-            if (isValidColor(color, theme)) return `${getRing(color)} ${genBtnVariantSoft({ color, appearance, ghostOrSoft: softShades })}`
+            const ringVal = color === "gray" ? focusRingGray : focusRing
+            if (isValidColor(color, theme)) return `${getOutlineOnSolid(color, ringVal)} ${genBtnVariantSoft({ color, appearance, ghostOrSoft: softShades })}`
         }, { autocomplete: ['btn-soft', 'btn-soft-(primary|secondary|accent|success|warning|info|danger|gray|neutral)'] }],
         [/^btn-ghost(-(\S+))?$/, ([, , color = 'primary'], { theme }) => {
-            const ghostShades = color==="gray" ? grayGhost : ghost
-            if (isValidColor(color, theme)) return `${getRing(color)} ${genBtnVariantGhost({ color, appearance, ghost: ghostShades })}`
+            const ghostShades = color === "gray" ? grayGhost : ghost
+            const ringVal = color === "gray" ? focusRingGray : focusRing
+            if (isValidColor(color, theme)) return `${getOutlineOnSolid(color, ringVal)} ${genBtnVariantGhost({ color, appearance, ghost: ghostShades })}`
         }, { autocomplete: ['btn-ghost', 'btn-ghost-(primary|secondary|accent|success|warning|info|danger|gray|neutral)'] }],
         [/^btn-gradient(-(\S+))?$/, ([, , color = 'primary'], { theme }) => {
             const gradientShades = color === "gray" ? grayGradient : gradient
-            if (isValidColor(color, theme)) return `${getRing(color)} ${genBtnVariantSolidGradient({ color, gradientShades, appearance })}`
+            const ringVal = color === "gray" ? focusRingGray : focusRing
+            if (isValidColor(color, theme)) return `${getOutlineOnSolid(color, ringVal)} ${genBtnVariantSolidGradient({ color, gradientShades, appearance })}`
         }, { autocomplete: ['btn-gradient', 'btn-gradient-(primary|secondary|accent|success|warning|info|danger|gray|neutral)'] }],
-        // [/^btn-radial(-(\S+))?$/, ([, , color = 'primary']) => `${genBtnVariantSoft({ color, appearance, ghostOrSoft: soft, graySoft })}`],
-        // [/^btn-ss(-(\S+))?$/, ([, , color = 'primary']) => `${genBtnVariantGhost({ color, appearance, ghost: ghost, grayGhost })}`],
-        // [/^btn-metal(-(\S+))?$/, ([, , color = 'primary']) => `${genBtnVariantOutline({ color, appearance, outlineBtn, outlineBtnGray })}`],
-
+
     ]
 
     return [

packages/unify-preset/src/shortcuts/checkbox/index.ts

@@ -1,26 +1,21 @@
-import type { SharedFormConfig, UiConfig } from "@/types"
-import { genFocusVisibleRing, getRingBase } from "../shortcut_helper"
+import type {  UiConfig } from "@/types"
+import { getRingOffsetBg } from "../shortcut_helper"
 import type { Checkbox } from "./types"
 import { getChecboxBase } from "./helper"
-import { helperDefaultValues } from "../helpers"
 import type { Shortcut } from "unocss"
 import { isValidColor } from "@/utils/colors-utils"
-import { checkboxCongig } from "./const"
 
 
-const getFormCheckboxShortcuts = ({ checkbox, formConfig, uiConfig }: { checkbox?: Checkbox, formConfig?: SharedFormConfig, uiConfig: UiConfig }) => {
+const getFormCheckboxShortcuts = ({ uiConfig }: { uiConfig: UiConfig }) => {
 
     const appearance = uiConfig.appearance
 
-    const ring = checkbox?.ring || formConfig?.ring || checkboxCongig.ringConfig || helperDefaultValues.ringConfig
-    const ringGray = checkbox?.ring || formConfig?.grayRing ||checkboxCongig.ringGrayConfig  || helperDefaultValues.ringGrayConfig
-    const ringBase = checkbox?.ringBase || formConfig?.ringBase || checkboxCongig.ringBase || helperDefaultValues.ringBase
-
-    const baseUtilities = `disabled-op50 disabled-cursor-not-allowed ${getRingBase(appearance, ringBase.size, ringBase.offset)} focus:ring-0 outline-0 focus-outline-none`
-
+    const baseUtilities = `disabled-op50 disabled-cursor-not-allowed outline-0 outline-transparent focus-visible:ring-1 focus-visible:ring-current focus:ring-0 focus:ring-transparent focus:ring-offset-transparent ${getRingOffsetBg(appearance)}
+    focus-visible:ring-offset-2`
+
     const dynamicCheckboxes: Shortcut[] = [
         [/^form-checkbox(-(\S+))?$/, ([, , color = 'primary'], { theme }) => {
-            if (isValidColor(color, theme)) return `${baseUtilities} ${getChecboxBase(appearance, color)} ${genFocusVisibleRing(color, appearance, ring, ringGray)}`
+            if (isValidColor(color, theme)) return `${baseUtilities} ${getChecboxBase(appearance, color)}`
         },{autocomplete:['form-checkbox','form-checkbox-(primary|secondary|accent|success|warning|info|danger|gray|neutral)']}],
     ]
     return [

packages/unify-preset/src/shortcuts/checkbox/types.ts

@@ -1,8 +1,8 @@
 import type { RingBase, RingColorShades} from "@/types"
 
 export type Checkbox = {
-    ring?:RingColorShades,
-    ringBase?:RingBase,
+    focusVisibleOutline?:RingColorShades,
+    outlineBase?:RingBase,
     size?:{
         sm?:number | string,
         md?:number | string,

packages/unify-preset/src/shortcuts/index.ts

@@ -34,15 +34,15 @@ export const getAllShortcut = ({ components, sharedElementVariant, baseUI, form,
     const aspectRatio = getAspectRatioShortcuts()
     const avatar = getAvatarShortcuts(components?.avatar, sharedElementVariant, { appearance, })
     const card = getCardShortcuts(components?.card, sharedElementVariant, baseUI, { appearance })
-    const checkbox = getFormCheckboxShortcuts({ checkbox: components?.checbox, uiConfig: { appearance }, formConfig: form })
+    const checkbox = getFormCheckboxShortcuts({  uiConfig: { appearance } })
     const divider = getDividerShortcuts({ divider: components?.divider, appearance })
     const dropdown = getDropdownShortcuts({ dropdown: components?.drodpown, sharedConfig: sharedElementVariant, baseUI: baseUI, uiConfig: { appearance } })
     const inputForm = getFormInputShortcuts({ input: components?.input, uiConfig: { appearance } })
     const kbd = getKdbShortcuts({ kdb: components?.kbd, sharedConfig: sharedElementVariant, uiConfig: { appearance } })
 
     const meter = getMeterShortcuts()
     const progress = getProgressBarShortcuts()
-    const radio = getFormRadioShortcuts({ input: components?.radio, uiConfig: { appearance }, formConfig: form })
+    const radio = getFormRadioShortcuts({ uiConfig: { appearance } })
     const range = getRangeSlideShortcuts()
     const switchShortcuts = getSwitchShortcuts({ appearance })
     const shortcuts = [

packages/unify-preset/src/shortcuts/radio/index.ts

@@ -1,32 +1,25 @@
-import type { SharedFormConfig, UiConfig } from "@/types"
-import { genFocusVisibleRing, getRingBase } from "../shortcut_helper"
-import type { Radio } from "./types"
+import type { UiConfig } from "@/types"
+import { getRingOffsetBg } from "../shortcut_helper"
 import { getRadioBase } from "./helper"
-import { helperDefaultValues } from "../helpers"
-import { radioCongig } from "./const"
+import type { Shortcut } from "unocss"
+import { isValidColor } from "@/utils/colors-utils"
 
 
-const getFormRadioShortcuts = ({ input, formConfig, uiConfig }: { input?: Radio, formConfig?: SharedFormConfig, uiConfig: UiConfig }) => {
-
+const getFormRadioShortcuts = ({ uiConfig }: { uiConfig: UiConfig }) => {
     const appearance = uiConfig.appearance
 
-    const ring = input?.ring || formConfig?.ring || radioCongig.ringConfig || helperDefaultValues.ringConfig
-    const ringGray = input?.ring || formConfig?.grayRing || radioCongig.ringGrayConfig ||helperDefaultValues.ringGrayConfig
-    const ringSize = input?.ringBase || formConfig?.ringBase || radioCongig.ringBase || helperDefaultValues.ringBase
-
-    const baseUtilities = `disabled-op50 disabled-cursor-not-allowed ${getRingBase(appearance, ringSize.size, ringSize.offset)} focus:ring-0 outline-0 focus-outline-none`
-    const checkboxes = {
-
-    }
+    const baseUtilities = `disabled-op50 disabled-cursor-not-allowed outline-0 outline-transparent focus-visible:ring-2 focus-visible:ring-current focus:ring-0 focus:ring-transparent focus:ring-offset-transparent ${getRingOffsetBg(appearance)}
+    focus-visible:ring-offset-2`
 
 
-    const dynamicCheckboxes: [RegExp, (params: RegExpExecArray) => string][] = [
-        [/^form-radio(-(\S+))?$/, ([, , color = 'primary']) => `${baseUtilities} ${getRadioBase(appearance, color)} ${genFocusVisibleRing(color, appearance, ring, ringGray)}`],
+    const dynamicRadio: Shortcut[] = [
+        [/^form-radio(-(\S+))?$/, ([, , color = 'primary'], { theme }) => {
+            if (isValidColor(color, theme)) return `${baseUtilities} ${getRadioBase(appearance, color)}`
+        }],
     ]
     return [
-        checkboxes,
-        ...dynamicCheckboxes
+        ...dynamicRadio
     ]
 }
 
-export { getFormRadioShortcuts, type Radio }
+export { getFormRadioShortcuts }

packages/unify-preset/src/shortcuts/range/index.ts

@@ -18,7 +18,8 @@ const getRangeSlideShortcuts = () => {
                      slider-runnable-track:bg-[--range-track-bg]  
                      slider-runnable-track:h-[--range-track-height]
                      moz-range-thumb:moz-range-slide-thumb 
-                     moz-range-track:moz-range-slide-track`,
+                     moz-range-track:moz-range-slide-track outline-0 outline-transparent focus-visible-outline focus-visible:outline-2 focus-visible:outline-current outline-transparent 
+                     focus-visible:outline-offset-2`,
     }
     return [
         ranges