Skip to content

Commit

Permalink
Merge remote-tracking branch 'origin/main'
Browse files Browse the repository at this point in the history
  • Loading branch information
itsJohnnyGrid committed Dec 26, 2024
2 parents 9fdc297 + 1cfd4fa commit 5b6df19
Show file tree
Hide file tree
Showing 9 changed files with 52 additions and 22 deletions.
8 changes: 5 additions & 3 deletions docs/customization/rounding.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,18 +3,20 @@
You can specify rounding (border-radius) globally for all Vueless components. 

<pre class="language-js" data-title="vueless.config.js"><code class="lang-js">export default {
roundingSm: 2, /* default -> 4 (pixels) */
rounding: 6, /* default -> 8 (pixels) */
roundingLg: 8, /* default -> 16 (pixels) */
}<a data-footnote-ref href="#user-content-fn-1">;</a>
</code></pre>

It may be possible to set any of value in pixels but we highly recommend stick to the [Tailwind CSS border-radius](https://tailwindcss.com/docs/border-radius) values.
It may be possible to set any value in pixels but we highly recommend stick to the [Tailwind CSS border-radius](https://tailwindcss.com/docs/border-radius) values.

{% hint style="info" %}
We use `pixels` measurement unit in config to make the setting more straightforward for developers, but under the hood the value always converts into `rem`.
We use `pixels` measurement unit in config to make the setting more straightforward for developers, but under the hood the value is always converted into `rem`.
{% endhint %}

## Custom tailwind class

To implement dynamic rounding has been created custom Tailwind CSS class `rounded-dynamic`. So, feel free to add it into you components when you need to have same rounding somewhere in your project.
To implement dynamic rounding, custom Tailwind CSS classes `rounded-dynamic-sm, rounded-dynamic, rounded-dynamic-lg` have been created . So, feel free to add them into your components when you need to have same rounding somewhere in your project.

[^1]:
32 changes: 17 additions & 15 deletions src/constants.js
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,9 @@ export const DEFAULT_RING = 4; /* pixels */
export const DEFAULT_RING_OFFSET = 0; /* pixels */
export const DEFAULT_RING_OFFSET_COLOR_LIGHT = "#ffffff"; // white
export const DEFAULT_RING_OFFSET_COLOR_DARK = "#111827"; // gray-900
export const DEFAULT_ROUNDING_SM = 4; /* pixels */
export const DEFAULT_ROUNDING = 8; /* pixels */
export const DEFAULT_ROUNDING_LG = 16; /* pixels */

/* Vueless supported colors and shades */
export const COLOR_SHADES = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
Expand Down Expand Up @@ -171,21 +173,21 @@ export const TAILWIND_MERGE_EXTENSION = {
"ring-offset-w": [{ "ring-offset": ["dynamic"] }],
"ring-offset-color": [{ "ring-offset": ["color-dynamic"] }],
"font-size": [{ text: ["2xs"] }],
rounded: [{ rounded: ["dynamic", "inherit"] }],
"rounded-s": [{ "rounded-s": ["dynamic", "inherit"] }],
"rounded-e": [{ "rounded-e": ["dynamic", "inherit"] }],
"rounded-t": [{ "rounded-t": ["dynamic", "inherit"] }],
"rounded-r": [{ "rounded-r": ["dynamic", "inherit"] }],
"rounded-b": [{ "rounded-b": ["dynamic", "inherit"] }],
"rounded-l": [{ "rounded-l": ["dynamic", "inherit"] }],
"rounded-ss": [{ "rounded-ss": ["dynamic", "inherit"] }],
"rounded-se": [{ "rounded-se": ["dynamic", "inherit"] }],
"rounded-ee": [{ "rounded-ee": ["dynamic", "inherit"] }],
"rounded-es": [{ "rounded-es": ["dynamic", "inherit"] }],
"rounded-tl": [{ "rounded-tl": ["dynamic", "inherit"] }],
"rounded-tr": [{ "rounded-tr": ["dynamic", "inherit"] }],
"rounded-br": [{ "rounded-br": ["dynamic", "inherit"] }],
"rounded-bl": [{ "rounded-bl": ["dynamic", "inherit"] }],
rounded: [{ rounded: ["dynamic", "dynamic-sm", "dynamic-lg", "inherit"] }],
"rounded-s": [{ "rounded-s": ["dynamic", "dynamic-sm", "dynamic-lg", "inherit"] }],
"rounded-e": [{ "rounded-e": ["dynamic", "dynamic-sm", "dynamic-lg", "inherit"] }],
"rounded-t": [{ "rounded-t": ["dynamic", "dynamic-sm", "dynamic-lg", "inherit"] }],
"rounded-r": [{ "rounded-r": ["dynamic", "dynamic-sm", "dynamic-lg", "inherit"] }],
"rounded-b": [{ "rounded-b": ["dynamic", "dynamic-sm", "dynamic-lg", "inherit"] }],
"rounded-l": [{ "rounded-l": ["dynamic", "dynamic-sm", "dynamic-lg", "inherit"] }],
"rounded-ss": [{ "rounded-ss": ["dynamic", "dynamic-sm", "dynamic-lg", "inherit"] }],
"rounded-se": [{ "rounded-se": ["dynamic", "dynamic-sm", "dynamic-lg", "inherit"] }],
"rounded-ee": [{ "rounded-ee": ["dynamic", "dynamic-sm", "dynamic-lg", "inherit"] }],
"rounded-es": [{ "rounded-es": ["dynamic", "dynamic-sm", "dynamic-lg", "inherit"] }],
"rounded-tl": [{ "rounded-tl": ["dynamic", "dynamic-sm", "dynamic-lg", "inherit"] }],
"rounded-tr": [{ "rounded-tr": ["dynamic", "dynamic-sm", "dynamic-lg", "inherit"] }],
"rounded-br": [{ "rounded-br": ["dynamic", "dynamic-sm", "dynamic-lg", "inherit"] }],
"rounded-bl": [{ "rounded-bl": ["dynamic", "dynamic-sm", "dynamic-lg", "inherit"] }],
},
},
};
Expand Down
6 changes: 6 additions & 0 deletions src/preset-tailwind.js
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,9 @@ import {
GRAY_COLOR,
COOL_COLOR,
DARK_MODE_SELECTOR,
DEFAULT_ROUNDING_SM,
DEFAULT_ROUNDING,
DEFAULT_ROUNDING_LG,
DEFAULT_RING,
DEFAULT_RING_OFFSET,
DEFAULT_RING_OFFSET_COLOR_LIGHT,
Expand Down Expand Up @@ -88,7 +90,9 @@ export const vuelessTailwindConfig = {
},
borderRadius: {
inherit: "inherit",
"dynamic-sm": "var(--vl-rounding-sm)",
dynamic: "var(--vl-rounding)",
"dynamic-lg": "var(--vl-rounding-lg)",
},
ringWidth: {
dynamic: "var(--vl-ring)",
Expand All @@ -106,7 +110,9 @@ export const vuelessTailwindConfig = {
"var(--vl-ring)": DEFAULT_RING,
"var(--vl-ring-offset)": DEFAULT_RING_OFFSET,
"var(--vl-ring-offset-color)": DEFAULT_RING_OFFSET_COLOR_LIGHT,
"var(--vl-rounding-sm)": DEFAULT_ROUNDING_SM,
"var(--vl-rounding)": DEFAULT_ROUNDING,
"var(--vl-rounding-lg)": DEFAULT_ROUNDING_LG,
...getReplacementColors(GRAY_COLOR, grayColor),
...getReplacementColors(BRAND_COLOR, brandColor),
},
Expand Down
12 changes: 12 additions & 0 deletions src/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -77,11 +77,21 @@ export interface ThemeConfig {
*/
gray?: GrayColors;

/**
* Default components "sm" size rounding (border-radius).
*/
roundingSm?: number;

/**
* Default components rounding (border-radius).
*/
rounding?: number;

/**
* Default components "lg" size rounding (border-radius).
*/
roundingLg?: number;

/**
* Default components ring width.
*/
Expand Down Expand Up @@ -324,7 +334,9 @@ export interface VuelessCssVariables {
"--vl-ring": string;
"--vl-ring-offset": string;
"--vl-ring-offset-color": string;
"--vl-rounding-sm": string;
"--vl-rounding": string;
"--vl-rounding-lg": string;
/* Gray CSS variables */
"--vl-color-gray-50": string;
"--vl-color-gray-100": string;
Expand Down
2 changes: 1 addition & 1 deletion src/ui.container-card/config.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
export default /*tw*/ {
wrapper: "p-4 md:p-5 border rounded-dynamic border-gray-200 bg-white space-y-4 w-full",
wrapper: "p-4 md:p-5 border rounded-dynamic-lg border-gray-200 bg-white space-y-4 w-full",
header: "flex justify-between",
headerLeft: "flex items-center gap-2 w-fit",
headerLeftFallback: "flex flex-col w-fit",
Expand Down
4 changes: 2 additions & 2 deletions src/ui.form-checkbox/config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ export default /*tw*/ {
checkboxLabel: "{ULabel}",
checkbox: {
base: `
border rounded bg-white cursor-pointer transition checked:text-{color}-600
border rounded-dynamic-sm bg-white cursor-pointer transition checked:text-{color}-600
border-gray-300 hover:border-gray-400 focus:border-{color}-500 active:border-{color}-800
focus:ring-{color}-700/15 focus:ring-dynamic focus:ring-offset-dynamic
disabled:border-gray-300 disabled:bg-gray-100 disabled:cursor-not-allowed
Expand All @@ -23,7 +23,7 @@ export default /*tw*/ {
},
iconWrapper: {
base: `
flex items-center justify-center absolute rounded cursor-pointer transition
flex items-center justify-center absolute rounded-dynamic-sm cursor-pointer transition
bg-{color}-600 hover:bg-{color}-700 active:bg-{color}-800
`,
variants: {
Expand Down
2 changes: 1 addition & 1 deletion src/ui.form-select/config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -90,7 +90,7 @@ export default /*tw*/ {
],
},
toggle: "{>caret} mr-3",
toggleIcon: "{UIcon} {>selectIcon}",
toggleIcon: "{UIcon} {>selectIcon} transition duration-300 group-[]/active:rotate-180",
clear: "{>caret}",
clearIcon: "{UIcon} {>selectIcon}",
clearMultiple: "flex items-center",
Expand Down
6 changes: 6 additions & 0 deletions src/utils/theme.ts
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,9 @@ import {
GRAYSCALE_COLOR,
DEFAULT_RING,
DEFAULT_RING_OFFSET,
DEFAULT_ROUNDING_SM,
DEFAULT_ROUNDING,
DEFAULT_ROUNDING_LG,
DEFAULT_BRAND_COLOR,
DEFAULT_GRAY_COLOR,
DEFAULT_RING_OFFSET_COLOR_LIGHT,
Expand Down Expand Up @@ -98,7 +100,9 @@ export function setColorMode(colorMode: `${ColorMode}`) {
export function setTheme(config: Config = {}) {
setColorMode(config?.colorMode || vuelessConfig?.colorMode || ColorMode.Auto);

const roundingSm = config?.roundingSm ?? vuelessConfig?.roundingSm ?? DEFAULT_ROUNDING_SM;
const rounding = config?.rounding ?? vuelessConfig.rounding ?? DEFAULT_ROUNDING;
const roundingLg = config?.roundingLg ?? vuelessConfig?.roundingLg ?? DEFAULT_ROUNDING_LG;
const isDarkMode = document.documentElement.classList.contains(DARK_MODE_SELECTOR);

let brand: BrandColors | GrayColors | typeof GRAY_COLOR =
Expand Down Expand Up @@ -148,7 +152,9 @@ export function setTheme(config: Config = {}) {
const colors: DefaultColors = merge(tailwindColors, tailwindConfig?.theme?.extend?.colors || {});

const variables: Partial<VuelessCssVariables> = {
"--vl-rounding-sm": `${Number(roundingSm) / PX_IN_REM}rem`,
"--vl-rounding": `${Number(rounding) / PX_IN_REM}rem`,
"--vl-rounding-lg": `${Number(roundingLg) / PX_IN_REM}rem`,
"--vl-ring": `${ring}px`,
"--vl-ring-offset": `${ringOffset}px`,
"--vl-ring-offset-color": convertHexInRgb(defaultRingOffsetColor),
Expand Down
2 changes: 2 additions & 0 deletions vueless.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,9 @@ export default {
ringOffset: 0,
ringOffsetColorLight: "#ffffff", // white
ringOffsetColorDark: "#111827", // gray-900
roundingSm: 4,
rounding: 8,
roundingLg: 16,
darkMode: "auto",
directive: {
// directive configs
Expand Down

0 comments on commit 5b6df19

Please sign in to comment.