@melodicdev/components 1.4.0 → 1.5.0

package/lib/components/forms/toggle/toggle.styles.js

@@ -2,12 +2,51 @@ import { css } from '@melodicdev/core';
 export const toggleStyles = () => css `
 	:host {
 		display: block;
+
+		/* --- Track --- */
+		--ml-toggle-track-width: 2.75rem;
+		--ml-toggle-track-height: 1.5rem;
+		--ml-toggle-track-bg: var(--ml-color-toggle-off);
+		--ml-toggle-track-hover-bg: var(--ml-color-toggle-off-hover);
+		--ml-toggle-track-checked-bg: var(--ml-color-primary);
+		--ml-toggle-track-checked-hover-bg: var(--ml-color-primary-hover);
+		--ml-toggle-track-border-radius: var(--ml-radius-full);
+
+		/* --- Thumb --- */
+		--ml-toggle-thumb-size: 1.25rem;
+		--ml-toggle-thumb-bg: var(--ml-white);
+		--ml-toggle-thumb-border-radius: var(--ml-radius-full);
+		--ml-toggle-thumb-shadow: var(--ml-shadow-sm);
+		--ml-toggle-thumb-offset: 0.125rem;
+		--ml-toggle-thumb-translate: 1.25rem;
+
+		/* --- Focus --- */
+		--ml-toggle-focus-shadow: var(--ml-shadow-focus-ring);
+
+		/* --- Label --- */
+		--ml-toggle-label-font-size: var(--ml-text-sm);
+		--ml-toggle-label-font-weight: var(--ml-font-medium);
+		--ml-toggle-label-color: var(--ml-color-text-secondary);
+
+		/* --- Hint --- */
+		--ml-toggle-hint-font-size: var(--ml-text-sm);
+		--ml-toggle-hint-color: var(--ml-color-text-muted);
+
+		/* --- Gap --- */
+		--ml-toggle-gap: var(--ml-space-3);
+
+		/* --- Disabled --- */
+		--ml-toggle-disabled-opacity: 0.5;
+
+		/* --- Transition --- */
+		--ml-toggle-transition-duration: var(--ml-duration-200);
+		--ml-toggle-transition-easing: var(--ml-ease-in-out);
 	}
 
 	.ml-toggle {
 		display: inline-flex;
 		align-items: center;
-		gap: var(--ml-space-3);
+		gap: var(--ml-toggle-gap);
 		cursor: pointer;
 		user-select: none;
 	}
@@ -19,7 +58,7 @@ export const toggleStyles = () => css `
 
 	.ml-toggle--disabled .ml-toggle__track,
 	.ml-toggle--disabled .ml-toggle__label {
-		opacity: 0.5;
+		opacity: var(--ml-toggle-disabled-opacity);
 	}
 
 	.ml-toggle__input {
@@ -34,98 +73,89 @@ export const toggleStyles = () => css `
 		display: inline-flex;
 		align-items: center;
 		flex-shrink: 0;
-		background-color: var(--ml-color-toggle-off);
-		border-radius: var(--ml-radius-full);
+		width: var(--ml-toggle-track-width);
+		height: var(--ml-toggle-track-height);
+		background-color: var(--ml-toggle-track-bg);
+		border-radius: var(--ml-toggle-track-border-radius);
 		transition:
-			background-color var(--ml-duration-200) var(--ml-ease-in-out),
-			box-shadow var(--ml-duration-200) var(--ml-ease-in-out);
+			background-color var(--ml-toggle-transition-duration) var(--ml-toggle-transition-easing),
+			box-shadow var(--ml-toggle-transition-duration) var(--ml-toggle-transition-easing);
 	}
 
 	.ml-toggle__input:focus-visible + .ml-toggle__track {
-		box-shadow: var(--ml-shadow-focus-ring);
+		box-shadow: var(--ml-toggle-focus-shadow);
 	}
 
 	.ml-toggle--checked .ml-toggle__track {
-		background-color: var(--ml-color-primary);
+		background-color: var(--ml-toggle-track-checked-bg);
 	}
 
 	.ml-toggle:hover:not(.ml-toggle--disabled) .ml-toggle__track {
-		background-color: var(--ml-color-toggle-off-hover);
+		background-color: var(--ml-toggle-track-hover-bg);
 	}
 
 	.ml-toggle--checked:hover:not(.ml-toggle--disabled) .ml-toggle__track {
-		background-color: var(--ml-color-primary-hover);
+		background-color: var(--ml-toggle-track-checked-hover-bg);
 	}
 
 	.ml-toggle__thumb {
 		position: absolute;
-		background-color: var(--ml-white);
-		border-radius: var(--ml-radius-full);
-		box-shadow: var(--ml-shadow-sm);
-		transition: transform var(--ml-duration-200) var(--ml-ease-in-out);
+		width: var(--ml-toggle-thumb-size);
+		height: var(--ml-toggle-thumb-size);
+		left: var(--ml-toggle-thumb-offset);
+		background-color: var(--ml-toggle-thumb-bg);
+		border-radius: var(--ml-toggle-thumb-border-radius);
+		box-shadow: var(--ml-toggle-thumb-shadow);
+		transition: transform var(--ml-toggle-transition-duration) var(--ml-toggle-transition-easing);
 	}
 
-	.ml-toggle--sm .ml-toggle__track {
-		width: 2.25rem;
-		height: 1.25rem;
-	}
-
-	.ml-toggle--sm .ml-toggle__thumb {
-		width: 1rem;
-		height: 1rem;
-		left: 0.125rem;
+	/* --- Size variants --- */
+	.ml-toggle--sm {
+		--ml-toggle-track-width: 2.25rem;
+		--ml-toggle-track-height: 1.25rem;
+		--ml-toggle-thumb-size: 1rem;
+		--ml-toggle-thumb-translate: 1rem;
 	}
 
 	.ml-toggle--sm.ml-toggle--checked .ml-toggle__thumb {
-		transform: translateX(1rem);
-	}
-
-	.ml-toggle--md .ml-toggle__track {
-		width: 2.75rem;
-		height: 1.5rem;
+		transform: translateX(var(--ml-toggle-thumb-translate));
 	}
 
-	.ml-toggle--md .ml-toggle__thumb {
-		width: 1.25rem;
-		height: 1.25rem;
-		left: 0.125rem;
+	.ml-toggle--md {
+		--ml-toggle-track-width: 2.75rem;
+		--ml-toggle-track-height: 1.5rem;
+		--ml-toggle-thumb-size: 1.25rem;
+		--ml-toggle-thumb-translate: 1.25rem;
 	}
 
 	.ml-toggle--md.ml-toggle--checked .ml-toggle__thumb {
-		transform: translateX(1.25rem);
+		transform: translateX(var(--ml-toggle-thumb-translate));
 	}
 
-	.ml-toggle--lg .ml-toggle__track {
-		width: 3rem;
-		height: 1.75rem;
-	}
-
-	.ml-toggle--lg .ml-toggle__thumb {
-		width: 1.5rem;
-		height: 1.5rem;
-		left: 0.125rem;
+	.ml-toggle--lg {
+		--ml-toggle-track-width: 3rem;
+		--ml-toggle-track-height: 1.75rem;
+		--ml-toggle-thumb-size: 1.5rem;
+		--ml-toggle-thumb-translate: 1.25rem;
+		--ml-toggle-label-font-size: var(--ml-text-base);
 	}
 
 	.ml-toggle--lg.ml-toggle--checked .ml-toggle__thumb {
-		transform: translateX(1.25rem);
+		transform: translateX(var(--ml-toggle-thumb-translate));
 	}
 
 	.ml-toggle__label {
-		font-size: var(--ml-text-sm);
-		font-weight: var(--ml-font-medium);
-		color: var(--ml-color-text-secondary);
-	}
-
-	.ml-toggle--lg .ml-toggle__label {
-		font-size: var(--ml-text-base);
+		font-size: var(--ml-toggle-label-font-size);
+		font-weight: var(--ml-toggle-label-font-weight);
+		color: var(--ml-toggle-label-color);
 	}
 
 	.ml-toggle__hint {
 		display: block;
 		margin-top: var(--ml-space-1);
-		margin-left: calc(2.75rem + var(--ml-space-3));
-		font-size: var(--ml-text-sm);
-		color: var(--ml-color-text-muted);
+		margin-left: calc(var(--ml-toggle-track-width) + var(--ml-toggle-gap));
+		font-size: var(--ml-toggle-hint-font-size);
+		color: var(--ml-toggle-hint-color);
 		line-height: var(--ml-leading-tight);
 	}
 `;

package/lib/components/foundation/card/card.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"card.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/foundation/card/card.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,UAAU,iDAsEtB,CAAC"}
+{"version":3,"file":"card.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/foundation/card/card.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,UAAU,iDAqGtB,CAAC"}

package/lib/components/foundation/card/card.styles.js

@@ -2,43 +2,74 @@ import { css } from '@melodicdev/core';
 export const cardStyles = () => css `
 	:host {
 		display: block;
+
+		/* Background */
+		--ml-card-bg: var(--ml-color-surface);
+		--ml-card-footer-bg: transparent;
+
+		/* Border */
+		--ml-card-border-width: var(--ml-border);
+		--ml-card-border-color: var(--ml-color-border);
+		--ml-card-border-radius: var(--ml-radius-lg);
+
+		/* Shadow */
+		--ml-card-shadow: none;
+
+		/* Spacing */
+		--ml-card-header-padding-y: var(--ml-space-4);
+		--ml-card-header-padding-x: var(--ml-space-5);
+		--ml-card-body-padding: var(--ml-space-5);
+		--ml-card-footer-padding-y: var(--ml-space-4);
+		--ml-card-footer-padding-x: var(--ml-space-5);
+
+		/* Hover state */
+		--ml-card-hover-border-color: var(--ml-color-border-strong);
+		--ml-card-hover-shadow: var(--ml-shadow-md);
+
+		/* Focus state */
+		--ml-card-focus-border-color: var(--ml-color-primary);
+		--ml-card-focus-shadow: var(--ml-shadow-focus-ring);
+
+		/* Transition */
+		--ml-card-transition-duration: var(--ml-duration-200);
+		--ml-card-transition-easing: var(--ml-ease-in-out);
 	}
 
 	.ml-card {
-		background-color: var(--ml-card-bg, var(--ml-color-surface));
-		border-radius: var(--ml-radius-lg);
+		background-color: var(--ml-card-bg);
+		border-radius: var(--ml-card-border-radius);
 		overflow: hidden;
 		height: 100%;
 	}
 
 	.ml-card--default {
-		border: var(--ml-border) solid var(--ml-color-border);
+		border: var(--ml-card-border-width) solid var(--ml-card-border-color);
 		box-shadow: var(--ml-shadow-xs);
 	}
 
 	.ml-card--outlined {
-		border: var(--ml-border) solid var(--ml-color-border);
+		border: var(--ml-card-border-width) solid var(--ml-card-border-color);
 	}
 
 	.ml-card--elevated {
-		border: var(--ml-border) solid var(--ml-color-border-muted);
+		border: var(--ml-card-border-width) solid var(--ml-color-border-muted);
 		box-shadow: var(--ml-shadow-md);
 	}
 
 	.ml-card--filled {
 		background-color: var(--ml-color-surface-raised);
-		border: var(--ml-border) solid transparent;
+		border: var(--ml-card-border-width) solid transparent;
 	}
 
 	.ml-card--hoverable {
 		transition:
-			box-shadow var(--ml-duration-200) var(--ml-ease-in-out),
-			border-color var(--ml-duration-200) var(--ml-ease-in-out);
+			box-shadow var(--ml-card-transition-duration) var(--ml-card-transition-easing),
+			border-color var(--ml-card-transition-duration) var(--ml-card-transition-easing);
 	}
 
 	.ml-card--hoverable:hover {
-		border-color: var(--ml-color-border-strong);
-		box-shadow: var(--ml-shadow-md);
+		border-color: var(--ml-card-hover-border-color);
+		box-shadow: var(--ml-card-hover-shadow);
 	}
 
 	.ml-card--clickable {
@@ -47,13 +78,13 @@ export const cardStyles = () => css `
 
 	.ml-card--clickable:focus-visible {
 		outline: none;
-		border-color: var(--ml-color-primary);
-		box-shadow: var(--ml-shadow-focus-ring);
+		border-color: var(--ml-card-focus-border-color);
+		box-shadow: var(--ml-card-focus-shadow);
 	}
 
 	.ml-card__header {
-		padding: var(--ml-space-4) var(--ml-space-5);
-		border-bottom: var(--ml-border) solid var(--ml-color-border);
+		padding: var(--ml-card-header-padding-y) var(--ml-card-header-padding-x);
+		border-bottom: var(--ml-card-border-width) solid var(--ml-card-border-color);
 	}
 
 	.ml-card__header ::slotted(*) {
@@ -61,12 +92,12 @@ export const cardStyles = () => css `
 	}
 
 	.ml-card__body {
-		padding: var(--ml-space-5);
+		padding: var(--ml-card-body-padding);
 	}
 
 	.ml-card__footer {
-		padding: var(--ml-space-4) var(--ml-space-5);
-		border-top: var(--ml-border) solid var(--ml-color-border);
+		padding: var(--ml-card-footer-padding-y) var(--ml-card-footer-padding-x);
+		border-top: var(--ml-card-border-width) solid var(--ml-card-border-color);
 		background-color: var(--ml-card-footer-bg);
 	}
 `;

package/lib/components/foundation/divider/divider.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"divider.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/foundation/divider/divider.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,aAAa,iDAsEzB,CAAC"}
+{"version":3,"file":"divider.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/foundation/divider/divider.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,aAAa,iDAkFzB,CAAC"}

package/lib/components/foundation/divider/divider.styles.js

@@ -2,6 +2,18 @@ import { css } from '@melodicdev/core';
 export const dividerStyles = () => css `
 	:host {
 		display: block;
+
+		/* Color */
+		--ml-divider-color: var(--ml-color-border);
+
+		/* Label */
+		--ml-divider-label-font-size: var(--ml-text-sm);
+		--ml-divider-label-font-weight: var(--ml-font-medium);
+		--ml-divider-label-color: var(--ml-color-text-muted);
+		--ml-divider-label-padding: var(--ml-space-4);
+
+		/* Vertical label */
+		--ml-divider-vertical-label-padding: var(--ml-space-3);
 	}
 
 	:host([orientation='vertical']) {
@@ -17,7 +29,7 @@ export const dividerStyles = () => css `
 	.ml-divider--horizontal {
 		width: 100%;
 		height: 1px;
-		background-color: var(--ml-color-border);
+		background-color: var(--ml-divider-color);
 	}
 
 	.ml-divider--horizontal.ml-divider--with-label {
@@ -30,14 +42,14 @@ export const dividerStyles = () => css `
 		content: '';
 		flex: 1;
 		height: 1px;
-		background-color: var(--ml-color-border);
+		background-color: var(--ml-divider-color);
 	}
 
 	.ml-divider--horizontal .ml-divider__label {
-		padding: 0 var(--ml-space-4);
-		font-size: var(--ml-text-sm);
-		font-weight: var(--ml-font-medium);
-		color: var(--ml-color-text-muted);
+		padding: 0 var(--ml-divider-label-padding);
+		font-size: var(--ml-divider-label-font-size);
+		font-weight: var(--ml-divider-label-font-weight);
+		color: var(--ml-divider-label-color);
 		white-space: nowrap;
 	}
 
@@ -46,7 +58,7 @@ export const dividerStyles = () => css `
 		width: 1px;
 		min-height: 1rem;
 		height: 100%;
-		background-color: var(--ml-color-border);
+		background-color: var(--ml-divider-color);
 	}
 
 	.ml-divider--vertical.ml-divider--with-label {
@@ -59,14 +71,14 @@ export const dividerStyles = () => css `
 		content: '';
 		flex: 1;
 		width: 1px;
-		background-color: var(--ml-color-border);
+		background-color: var(--ml-divider-color);
 	}
 
 	.ml-divider--vertical .ml-divider__label {
-		padding: var(--ml-space-3) 0;
-		font-size: var(--ml-text-sm);
-		font-weight: var(--ml-font-medium);
-		color: var(--ml-color-text-muted);
+		padding: var(--ml-divider-vertical-label-padding) 0;
+		font-size: var(--ml-divider-label-font-size);
+		font-weight: var(--ml-divider-label-font-weight);
+		color: var(--ml-divider-label-color);
 		writing-mode: vertical-rl;
 	}
 `;

package/lib/components/general/icon/icon.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"icon.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/general/icon/icon.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,UAAU,iDA2BtB,CAAC"}
+{"version":3,"file":"icon.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/general/icon/icon.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,UAAU,iDAkCtB,CAAC"}

package/lib/components/general/icon/icon.styles.js

@@ -4,7 +4,14 @@ export const iconStyles = () => css `
 		display: inline-flex;
 		align-items: center;
 		justify-content: center;
-		color: var(--ml-icon-color, currentColor);
+
+		/* Color — defaults to inherited text color */
+		--ml-icon-color: currentColor;
+
+		/* Size — default 24px (md) */
+		--ml-icon-size: 24px;
+
+		color: var(--ml-icon-color);
 	}
 
 	:host([size='xs']) {
@@ -24,6 +31,6 @@ export const iconStyles = () => css `
 	}
 
 	i {
-		font-size: var(--ml-icon-size, 24px);
+		font-size: var(--ml-icon-size);
 	}
 `;

package/lib/components/navigation/breadcrumb/breadcrumb.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"breadcrumb.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/breadcrumb/breadcrumb.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,gBAAgB,iDAc5B,CAAC"}
+{"version":3,"file":"breadcrumb.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/breadcrumb/breadcrumb.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,gBAAgB,iDAiB5B,CAAC"}

package/lib/components/navigation/breadcrumb/breadcrumb.styles.js

@@ -1,6 +1,9 @@
 import { css } from '@melodicdev/core';
 export const breadcrumbStyles = () => css `
 	:host {
+		/* Gap between breadcrumb items */
+		--ml-breadcrumb-gap: var(--ml-space-1);
+
 		display: block;
 	}
 
@@ -8,7 +11,7 @@ export const breadcrumbStyles = () => css `
 		display: flex;
 		align-items: center;
 		flex-wrap: wrap;
-		gap: var(--ml-space-1);
+		gap: var(--ml-breadcrumb-gap);
 		list-style: none;
 		margin: 0;
 		padding: 0;

package/lib/components/navigation/pagination/pagination.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"pagination.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/pagination/pagination.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,gBAAgB,iDA0E5B,CAAC"}
+{"version":3,"file":"pagination.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/pagination/pagination.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,gBAAgB,iDA8G5B,CAAC"}

package/lib/components/navigation/pagination/pagination.styles.js

@@ -1,6 +1,42 @@
 import { css } from '@melodicdev/core';
 export const paginationStyles = () => css `
 	:host {
+		/* Layout */
+		--ml-pagination-gap: var(--ml-space-3);
+		--ml-pagination-pages-gap: var(--ml-space-1);
+
+		/* Button base */
+		--ml-pagination-btn-padding-y: var(--ml-space-2);
+		--ml-pagination-btn-padding-x: var(--ml-space-3);
+		--ml-pagination-btn-font-size: var(--ml-text-sm);
+		--ml-pagination-btn-font-weight: var(--ml-font-medium);
+		--ml-pagination-btn-color: var(--ml-color-text-secondary);
+		--ml-pagination-btn-bg: transparent;
+		--ml-pagination-btn-radius: var(--ml-radius-md);
+		--ml-pagination-btn-transition: var(--ml-duration-150) var(--ml-ease-in-out);
+
+		/* Button hover */
+		--ml-pagination-btn-hover-bg: var(--ml-color-surface-hover);
+		--ml-pagination-btn-hover-color: var(--ml-color-text);
+
+		/* Button page size */
+		--ml-pagination-btn-page-size: 40px;
+
+		/* Nav button */
+		--ml-pagination-nav-font-weight: var(--ml-font-semibold);
+
+		/* Active state */
+		--ml-pagination-active-bg: var(--ml-color-primary);
+		--ml-pagination-active-color: var(--ml-color-text-inverse);
+		--ml-pagination-active-font-weight: var(--ml-font-semibold);
+
+		/* Disabled state */
+		--ml-pagination-disabled-opacity: 0.5;
+
+		/* Ellipsis */
+		--ml-pagination-ellipsis-font-size: var(--ml-text-sm);
+		--ml-pagination-ellipsis-color: var(--ml-color-text-tertiary);
+
 		display: block;
 	}
 
@@ -8,13 +44,13 @@ export const paginationStyles = () => css `
 		display: flex;
 		align-items: center;
 		justify-content: space-between;
-		gap: var(--ml-space-3);
+		gap: var(--ml-pagination-gap);
 	}
 
 	.ml-pagination__pages {
 		display: flex;
 		align-items: center;
-		gap: var(--ml-space-1);
+		gap: var(--ml-pagination-pages-gap);
 	}
 
 	.ml-pagination__btn {
@@ -22,45 +58,45 @@ export const paginationStyles = () => css `
 		align-items: center;
 		justify-content: center;
 		gap: var(--ml-space-2);
-		padding: var(--ml-space-2) var(--ml-space-3);
-		font-size: var(--ml-text-sm);
-		font-weight: var(--ml-font-medium);
-		color: var(--ml-color-text-secondary);
-		background: none;
+		padding: var(--ml-pagination-btn-padding-y) var(--ml-pagination-btn-padding-x);
+		font-size: var(--ml-pagination-btn-font-size);
+		font-weight: var(--ml-pagination-btn-font-weight);
+		color: var(--ml-pagination-btn-color);
+		background: var(--ml-pagination-btn-bg);
 		border: none;
-		border-radius: var(--ml-radius-md);
+		border-radius: var(--ml-pagination-btn-radius);
 		cursor: pointer;
 		user-select: none;
 		transition:
-			background-color var(--ml-duration-150) var(--ml-ease-in-out),
-			color var(--ml-duration-150) var(--ml-ease-in-out);
+			background-color var(--ml-pagination-btn-transition),
+			color var(--ml-pagination-btn-transition);
 	}
 
 	.ml-pagination__btn:hover:not(:disabled) {
-		background-color: var(--ml-color-surface-hover);
-		color: var(--ml-color-text);
+		background-color: var(--ml-pagination-btn-hover-bg);
+		color: var(--ml-pagination-btn-hover-color);
 	}
 
 	.ml-pagination__btn--nav {
-		font-weight: var(--ml-font-semibold);
+		font-weight: var(--ml-pagination-nav-font-weight);
 	}
 
 	.ml-pagination__btn--page {
-		min-width: 40px;
-		height: 40px;
+		min-width: var(--ml-pagination-btn-page-size);
+		height: var(--ml-pagination-btn-page-size);
 		padding: 0;
 	}
 
 	.ml-pagination__btn--active,
 	.ml-pagination__btn--active:hover {
-		background-color: var(--ml-color-primary);
-		color: var(--ml-color-text-inverse);
-		font-weight: var(--ml-font-semibold);
+		background-color: var(--ml-pagination-active-bg);
+		color: var(--ml-pagination-active-color);
+		font-weight: var(--ml-pagination-active-font-weight);
 	}
 
 	.ml-pagination__btn--disabled,
 	.ml-pagination__btn:disabled {
-		opacity: 0.5;
+		opacity: var(--ml-pagination-disabled-opacity);
 		cursor: not-allowed;
 	}
 
@@ -68,9 +104,9 @@ export const paginationStyles = () => css `
 		display: inline-flex;
 		align-items: center;
 		justify-content: center;
-		min-width: 40px;
-		height: 40px;
-		font-size: var(--ml-text-sm);
-		color: var(--ml-color-text-tertiary);
+		min-width: var(--ml-pagination-btn-page-size);
+		height: var(--ml-pagination-btn-page-size);
+		font-size: var(--ml-pagination-ellipsis-font-size);
+		color: var(--ml-pagination-ellipsis-color);
 	}
 `;

package/lib/components/navigation/sidebar/sidebar-item.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sidebar-item.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/sidebar/sidebar-item.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,iBAAiB,iDAoJ7B,CAAC"}
+{"version":3,"file":"sidebar-item.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/sidebar/sidebar-item.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,iBAAiB,iDAkM7B,CAAC"}