@unifiedsoftware/styles 1.0.3 → 1.0.5

package/scss/components/_button.scss

@@ -1,5 +1,6 @@
 @use '../variables' as *;
 @use '../mixins/overlay' as *;
+@use '../mixins/outline' as *;
 
 .#{$prefix}button {
 	position: relative;
@@ -7,19 +8,37 @@
 	padding: var(--#{$prefix}button-padding-y) var(--#{$prefix}button-padding-x);
 	font-size: var(--#{$prefix}button-font-size);
 	font-weight: var(--#{$prefix}button-font-weight);
+	font-family: var(--#{$prefix}button-font-family);
 	border: none;
 	outline: none;
 	border-radius: var(--#{$prefix}button-border-radius);
 	cursor: pointer;
 	color: var(--#{$prefix}button-color);
 	background-color: var(--#{$prefix}button-background);
-	display: flex;
+	display: inline-flex;
 	align-items: center;
 	gap: var(--#{$prefix}button-gap);
 	user-select: none;
 	-webkit-tap-highlight-color: transparent;
 
+	&:hover {
+		text-decoration: none;
+	}
+
 	@include overlay();
+	@include outline();
+
+	&--disabled {
+		opacity: 0.6;
+		pointer-events: none;
+	}
+
+	&--icon-only {
+		width: var(--#{$prefix}button-height);
+		padding: 0;
+		border-radius: 9999px;
+		justify-content: center;
+	}
 
 	&__outline {
 		position: absolute;
@@ -30,8 +49,8 @@
 		pointer-events: none;
 	}
 
-	&__prefix,
-	&__suffix,
+	&__start-icon,
+	&__end-icon,
 	&__content {
 		position: relative;
 		display: flex;

package/scss/components/_chip.scss

@@ -0,0 +1,21 @@
+@use '../variables' as *;
+@use '../mixins/overlay' as *;
+@use '../mixins/outline' as *;
+
+.#{$prefix}chip {
+	position: relative;
+	height: var(--#{$prefix}chip-height);
+	padding: var(--#{$prefix}chip-padding-y) var(--#{$prefix}chip-padding-x);
+	font-size: var(--#{$prefix}chip-font-size);
+	font-weight: var(--#{$prefix}chip-font-weight);
+	font-family: var(--#{$prefix}chip-font-family);
+	border-radius: var(--#{$prefix}chip-border-radius);
+	color: var(--#{$prefix}chip-color);
+	background-color: var(--#{$prefix}chip-background);
+	display: inline-flex;
+	align-items: center;
+	gap: var(--#{$prefix}chip-gap);
+
+	@include overlay();
+	@include outline();
+}

package/scss/components/_index.scss

@@ -1,6 +1,9 @@
+@use 'badge';
+
 @use 'collapse';
 @use 'icon';
 
+@use 'chip';
 @use 'button';
 
 @use 'menu';

package/scss/components/_menu.scss

@@ -3,7 +3,7 @@
 
 .#{$prefix}menu {
 	margin: 0;
-	padding: 0;
+	padding: var(--#{$prefix}menu-padding-y) var(--#{$prefix}menu-padding-x);
 	color: var(--#{$prefix}menu-color);
 	background-color: var(--#{$prefix}menu-background);
 
@@ -13,6 +13,7 @@
 		padding: var(--#{$prefix}menu-item-padding-y) var(--#{$prefix}menu-item-padding-x);
 		font-size: var(--#{$prefix}menu-item-font-size);
 		font-weight: var(--#{$prefix}menu-item-font-weight);
+		border-radius: var(--#{$prefix}menu-item-border-radius);
 		text-decoration: none;
 		cursor: pointer;
 		display: flex;
@@ -74,6 +75,7 @@
 		font-weight: var(--#{$prefix}menu-group-font-weight);
 		text-decoration: none;
 		border-bottom: var(--#{$prefix}menu-group-border-width) solid var(--#{$prefix}menu-group-border-color);
+		border-radius: var(--#{$prefix}menu-group-border-radius);
 		display: flex;
 		align-items: center;
 		color: var(--#{$prefix}menu-group-color);
@@ -94,15 +96,6 @@
 			align-items: center;
 		}
 
-		&--selected &__icon {
-			--#{$prefix}menu-group-icon-color: var(--#{$prefix}_active-menu-item-icon-color);
-		}
-
-		&__icon .#{$prefix}icon {
-			--#{$prefix}icon-font-size: var(--#{$prefix}menu-group-icon-font-size);
-			--#{$prefix}icon-color: var(--#{$prefix}menu-group-icon-color);
-		}
-
 		&__content {
 			flex-grow: 1;
 			z-index: 1;

package/scss/components/_tabs.scss

@@ -3,8 +3,30 @@
 
 .#{$prefix}tabs {
 	width: 100%;
+	white-space: nowrap;
+	overflow: hidden;
 	display: flex;
 	align-items: center;
+
+	&--start {
+		justify-content: flex-start;
+	}
+
+	&--center {
+		justify-content: center;
+	}
+
+	&--end {
+		justify-content: flex-end;
+	}
+
+	&--stretch .#{$prefix}tab {
+		flex-grow: 1;
+	}
+
+	@media (max-width: 767px) and (hover: none) {
+		overflow: auto;
+	}
 }
 
 .#{$prefix}tab {
@@ -12,6 +34,7 @@
 	padding: 0px 16px;
 	font-size: var(--#{$prefix}tab-font-size);
 	font-weight: var(--#{$prefix}tab-font-weight);
+	text-decoration: none;
 	vertical-align: middle;
 	z-index: 1;
 	color: var(--#{$prefix}tab-color);
@@ -21,11 +44,20 @@
 	user-select: none;
 	-webkit-tap-highlight-color: transparent;
 
+	&:hover {
+		text-decoration: none;
+	}
+
 	@include overlay();
 
+	&--disabled {
+		opacity: 0.6;
+		pointer-events: none;
+	}
+
 	&__content {
 		position: relative;
-		height: 48px;
+		height: 40px;
 		display: inline-flex;
 		flex-direction: row;
 		justify-content: center;
@@ -36,7 +68,7 @@
 	&__indicator {
 		position: absolute;
 		height: var(--#{$prefix}tab-indicator-height);
-		border-radius: 0;
+		border-radius: var(--#{$prefix}tab-indicator-border-radius);
 		inset: auto 0px 0px;
 		opacity: 0;
 		z-index: -1;
@@ -44,10 +76,6 @@
 		transform-origin: left bottom;
 	}
 
-	&--selected {
-		// color: var(--#{$prefix}_active-tab-color);
-	}
-
 	&--selected &__indicator {
 		opacity: 1;
 	}

package/scss/mixins/_button.scss

@@ -0,0 +1,16 @@
+@use '../variables' as *;
+
+@mixin button-size($name, $height, $padding-y, $padding-x, $font-size, $border-radius, $gap, $icon-font-size) {
+	&--#{$name} {
+		--#{$prefix}button-height: #{$height};
+		--#{$prefix}button-padding-y: #{$padding-y};
+		--#{$prefix}button-padding-x: #{$padding-x};
+		--#{$prefix}button-font-size: #{$font-size};
+		--#{$prefix}button-border-radius: #{$border-radius};
+		--#{$prefix}button-gap: #{$gap};
+
+		.#{$prefix}icon {
+			--#{$prefix}icon-font-size: #{$icon-font-size};
+		}
+	}
+}

package/scss/mixins/_chip.scss

@@ -0,0 +1,16 @@
+@use '../variables' as *;
+
+@mixin chip-size($name, $height, $padding-y, $padding-x, $font-size, $border-radius, $gap, $icon-font-size) {
+	&--#{$name} {
+		--#{$prefix}chip-height: #{$height};
+		--#{$prefix}chip-padding-y: #{$padding-y};
+		--#{$prefix}chip-padding-x: #{$padding-x};
+		--#{$prefix}chip-font-size: #{$font-size};
+		--#{$prefix}chip-border-radius: #{$border-radius};
+		--#{$prefix}chip-gap: #{$gap};
+
+		.#{$prefix}icon {
+			--#{$prefix}icon-font-size: #{$icon-font-size};
+		}
+	}
+}

package/scss/mixins/_outline.scss

@@ -0,0 +1,11 @@
+@use '../variables' as *;
+
+@mixin outline {
+	& > .#{$prefix}outline {
+		position: absolute;
+		inset: 0px;
+		border-radius: inherit;
+		overflow: hidden;
+		border: var(--#{$prefix}outline-border-width) solid var(--#{$prefix}outline-border-color);
+	}
+}

package/scss/mixins/_overlay.scss

@@ -1,52 +1,51 @@
 @use '../variables' as *;
 
-@mixin overlay {
-	position: relative;
-
-	& .#{$prefix}overlay {
+@mixin overlay() {
+	& > .#{$prefix}overlay {
 		position: absolute;
 		inset: 0px;
 		border-radius: inherit;
 		overflow: hidden;
-		color: inherit;
-
-		&__surface {
-			position: absolute;
-			inset: 0px;
-			color: var(--#{$prefix}overlay-color);
-			opacity: var(--#{$prefix}overlay-opacity);
-			background-color: currentColor;
-			z-index: 0;
-		}
-
-		&::before {
-			content: '';
-			position: absolute;
-			inset: 0px;
-			opacity: 0;
-			background-color: currentColor;
-			transition:
-				opacity 15ms linear,
-				background-color 15ms linear;
-		}
+		color: var(--#{$prefix}overlay-color);
+		opacity: var(--#{$prefix}overlay-opacity);
+		background-color: currentColor;
+		transition:
+			opacity 15ms linear,
+			background-color 15ms linear;
+	}
 
-		&::after {
-			content: '';
-			position: absolute;
-			inset: 0px;
-			opacity: 0;
-			color: var(--#{$prefix}_active-overlay-color);
-			background-color: currentColor;
-			transition: opacity 30ms linear;
-		}
+	&:hover > .#{$prefix}overlay {
+		color: var(--#{$prefix}_hover-overlay-color, var(--#{$prefix}overlay-color));
+		opacity: var(--#{$prefix}_hover-overlay-opacity, var(--#{$prefix}overlay-opacity));
+		transition: opacity 30ms linear;
 	}
 
-	&:hover .#{$prefix}overlay::before {
-		color: var(--#{$prefix}_hover-overlay-color);
-		opacity: var(--#{$prefix}_hover-overlay-opacity);
+	&:active > .#{$prefix}overlay {
+		color: var(
+			--#{$prefix}_active-overlay-color,
+			var(--#{$prefix}_hover-overlay-color, var(--#{$prefix}overlay-color)),
+		);
+		opacity: var(
+			--#{$prefix}_active-overlay-opacity,
+			var(--#{$prefix}_hover-overlay-opacity, var(--#{$prefix}overlay-opacity)),
+		);
 	}
+}
 
-	&:active .#{$prefix}overlay::after {
-		opacity: var(--#{$prefix}_active-overlay-opacity);
+@mixin outline-styles(
+	$color: null,
+	$opacity: null,
+	$hover-color: initial,
+	$hover-opacity: initial,
+	$active-color: initial,
+	$active-opacity: initial
+) {
+	& > .#{$prefix}overlay {
+		--#{$prefix}overlay-color: #{$color};
+		--#{$prefix}overlay-opacity: #{$opacity};
+		--#{$prefix}_hover-overlay-color: #{$hover-color};
+		--#{$prefix}_hover-overlay-opacity: #{$hover-opacity};
+		--#{$prefix}_active-overlay-color: #{$active-color};
+		--#{$prefix}_active-overlay-opacity: #{$active-opacity};
 	}
 }

package/scss/themes/default/_tokens.scss

@@ -9,4 +9,7 @@
 	--#{$prefix}danger-color: #ff0017;
 	--#{$prefix}black-color: #000;
 	--#{$prefix}white-color: #fff;
+
+	--#{$prefix}font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
+		Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 }

package/scss/themes/default/components/_badge.scss

@@ -0,0 +1,21 @@
+@use '../../../variables' as *;
+
+.#{$prefix}badge {
+	--#{$prefix}badge-padding-y: 0.125rem;
+	--#{$prefix}badge-padding-x: 0.325rem;
+	--#{$prefix}badge-font-size: 0.75rem;
+	--#{$prefix}badge-font-weight: 700;
+	--#{$prefix}badge-border-radius: 9999px;
+	--#{$prefix}badge-border-width: 2px;
+	--#{$prefix}badge-border-color: var(--#{$prefix}white-color);
+	--#{$prefix}badge-color: var(--#{$prefix}white-color);
+	--#{$prefix}badge-background: var(--#{$prefix}primary-color);
+
+	/* Overlay */
+	--#{$prefix}overlay-color: inherit;
+	--#{$prefix}overlay-opacity: 0.08;
+	--#{$prefix}_hover-overlay-color: inherit;
+	--#{$prefix}_hover-overlay-opacity: 0.08;
+	--#{$prefix}_active-overlay-color: inherit;
+	--#{$prefix}_active-overlay-opacity: 0.12;
+}

package/scss/themes/default/components/_button.scss

@@ -1,19 +1,84 @@
 @use '../../../variables' as *;
+@use '../../../mixins/button' as *;
 
 .#{$prefix}button {
 	--#{$prefix}button-font-weight: 500;
-	--#{$prefix}button-border-radius: 4px;
+	--#{$prefix}button-font-family: var(--#{$prefix}font-sans);
 
 	/* Overlay */
-	--#{$prefix}_hover-overlay-color: inherit;
+	--#{$prefix}overlay-color: inherit;
+	--#{$prefix}overlay-opacity: 0;
+	--#{$prefix}_hover-overlay-opacity: 0;
 	--#{$prefix}_hover-overlay-opacity: 0.08;
-	--#{$prefix}_active-overlay-color: inherit;
 	--#{$prefix}_active-overlay-opacity: 0.12;
 
+	/* Outline */
+	--#{$prefix}outline-border-width: 1px;
+	--#{$prefix}outline-border-color: transparent;
+
+	@include button-size(
+		$name: 'xs',
+		$height: 20px,
+		$padding-y: 0,
+		$padding-x: 0.5rem,
+		$font-size: 0.625rem,
+		$border-radius: 4px,
+		$gap: 0.25rem,
+		$icon-font-size: 0.75rem
+	);
+
+	@include button-size(
+		$name: 'sm',
+		$height: 28px,
+		$padding-y: 0,
+		$padding-x: 0.75rem,
+		$font-size: 0.75rem,
+		$border-radius: 4px,
+		$gap: 0.375rem,
+		$icon-font-size: 1rem
+	);
+
+	@include button-size(
+		$name: 'md',
+		$height: 36px,
+		$padding-y: 0,
+		$padding-x: 1rem,
+		$font-size: 0.875rem,
+		$border-radius: 4px,
+		$gap: 0.5rem,
+		$icon-font-size: 1.125rem
+	);
+
+	@include button-size(
+		$name: 'lg',
+		$height: 44px,
+		$padding-y: 0,
+		$padding-x: 1.25rem,
+		$font-size: 1rem,
+		$border-radius: 4px,
+		$gap: 0.625rem,
+		$icon-font-size: 1.25rem
+	);
+
+	@include button-size(
+		$name: 'xl',
+		$height: 52px,
+		$padding-y: 0,
+		$padding-x: 1.5rem,
+		$font-size: 1rem,
+		$border-radius: 4px,
+		$gap: 0.75rem,
+		$icon-font-size: 1.5rem
+	);
+
 	&--filled {
 		--#{$prefix}button-border-width: 1px;
 		--#{$prefix}button-border-color: transparent;
 		--#{$prefix}button-color: var(--#{$prefix}white-color);
+
+		.#{$prefix}chip {
+			--#{$prefix}chip-background: var(--#{$prefix}white-color);
+		}
 	}
 
 	&--filled#{&}--primary {
@@ -42,15 +107,8 @@
 	}
 
 	&--outlined {
-		--#{$prefix}button-border-width: 1px;
-		--#{$prefix}button-border-color: currentColor;
-
-		--#{$prefix}button-elevation-opacity: 0;
-		--#{$prefix}_hover-button-elevation-opacity: 0.08;
-		--#{$prefix}_active-button-elevation-opacity: 0.12;
-
-		--#{$prefix}button-outline-border-width: 1px;
-		--#{$prefix}button-outline-border-color: currentColor;
+		/* Outline */
+		--#{$prefix}outline-border-color: currentColor;
 	}
 
 	&--outlined#{&}--primary {
@@ -77,14 +135,8 @@
 		--#{$prefix}button-color: var(--#{$prefix}danger-color);
 	}
 
-	&--text {
-		--#{$prefix}button-border-width: 1px;
-		--#{$prefix}button-border-color: transparent;
-
-		--#{$prefix}button-elevation-opacity: 0;
-		--#{$prefix}_hover-button-elevation-opacity: 0.08;
-		--#{$prefix}_active-button-elevation-opacity: 0.12;
-	}
+	// &--text {
+	// }
 
 	&--text#{&}--primary {
 		--#{$prefix}button-color: var(--#{$prefix}primary-color);
@@ -109,34 +161,4 @@
 	&--text#{&}--danger {
 		--#{$prefix}button-color: var(--#{$prefix}danger-color);
 	}
-
-	&--sm {
-		--#{$prefix}button-height: 32px;
-		--#{$prefix}button-padding-y: 0;
-		--#{$prefix}button-padding-x: 0.75rem;
-		--#{$prefix}button-font-size: 14px;
-		--#{$prefix}button-gap: 0.375rem;
-
-		--#{$prefix}icon-font-size: 1.125rem;
-	}
-
-	&--md {
-		--#{$prefix}button-height: 36px;
-		--#{$prefix}button-padding-y: 0;
-		--#{$prefix}button-padding-x: 1rem;
-		--#{$prefix}button-font-size: 14px;
-		--#{$prefix}button-gap: 0.5rem;
-
-		--#{$prefix}icon-font-size: 1.25rem;
-	}
-
-	&--lg {
-		--#{$prefix}button-height: 40px;
-		--#{$prefix}button-padding-y: 0;
-		--#{$prefix}button-padding-x: 1.25rem;
-		--#{$prefix}button-font-size: 1rem;
-		--#{$prefix}button-gap: 0.5rem;
-
-		--#{$prefix}icon-font-size: 1.5rem;
-	}
 }

package/scss/themes/default/components/_chip.scss

@@ -0,0 +1,165 @@
+@use '../../../variables' as *;
+@use '../../../mixins/chip' as *;
+@use '../../../mixins/overlay' as *;
+
+.#{$prefix}chip {
+	--#{$prefix}chip-padding-y: 0.125rem;
+	--#{$prefix}chip-padding-x: 0.5rem;
+	--#{$prefix}chip-font-size: 0.75rem;
+	--#{$prefix}chip-font-weight: 700;
+	--#{$prefix}chip-border-radius: 9999px;
+	--#{$prefix}chip-color: var(--#{$prefix}primary-color);
+	--#{$prefix}chip-background: transparent;
+
+	/* Overlay */
+	--#{$prefix}overlay-color: inherit;
+	--#{$prefix}overlay-opacity: 0;
+
+	@include outline-styles($color: inherit, $opacity: 0);
+
+	/* Outline */
+	--#{$prefix}outline-border-width: 1px;
+	--#{$prefix}outline-border-color: transparent;
+
+	@include chip-size(
+		$name: 'xs',
+		$height: 28px,
+		$padding-y: 0,
+		$padding-x: 0.5rem,
+		$font-size: 0.75rem,
+		$border-radius: 9999px,
+		$gap: 0.375rem,
+		$icon-font-size: 0.75rem
+	);
+
+	@include chip-size(
+		$name: 'sm',
+		$height: 32px,
+		$padding-y: 0,
+		$padding-x: 0.75rem,
+		$font-size: 14px,
+		$border-radius: 9999px,
+		$gap: 0.375rem,
+		$icon-font-size: 0.875rem
+	);
+
+	@include chip-size(
+		$name: 'md',
+		$height: 40px,
+		$padding-y: 0,
+		$padding-x: 1rem,
+		$font-size: 14px,
+		$border-radius: 9999px,
+		$gap: 0.5rem,
+		$icon-font-size: 1rem
+	);
+
+	@include chip-size(
+		$name: 'lg',
+		$height: 48px,
+		$padding-y: 0,
+		$padding-x: 1.5rem,
+		$font-size: 1rem,
+		$border-radius: 9999px,
+		$gap: 0.5rem,
+		$icon-font-size: 1.125rem
+	);
+
+	@include chip-size(
+		$name: 'xl',
+		$height: 48px,
+		$padding-y: 0,
+		$padding-x: 1.5rem,
+		$font-size: 1rem,
+		$border-radius: 9999px,
+		$gap: 0.5rem,
+		$icon-font-size: 1.25rem
+	);
+
+	&--filled {
+		--#{$prefix}chip-border-width: 1px;
+		--#{$prefix}chip-border-color: transparent;
+		--#{$prefix}chip-color: var(--#{$prefix}white-color);
+	}
+
+	&--filled#{&}--primary {
+		--#{$prefix}chip-background: var(--#{$prefix}primary-color);
+	}
+
+	&--filled#{&}--secondary {
+		--#{$prefix}chip-color: var(--#{$prefix}black-color);
+		--#{$prefix}chip-background: var(--#{$prefix}secondary-color);
+	}
+
+	&--filled#{&}--success {
+		--#{$prefix}chip-background: var(--#{$prefix}success-color);
+	}
+
+	&--filled#{&}--info {
+		--#{$prefix}chip-background: var(--#{$prefix}info-color);
+	}
+
+	&--filled#{&}--warning {
+		--#{$prefix}chip-background: var(--#{$prefix}warning-color);
+	}
+
+	&--filled#{&}--danger {
+		--#{$prefix}chip-background: var(--#{$prefix}danger-color);
+	}
+
+	&--outlined {
+		/* Outline */
+		--#{$prefix}outline-border-color: currentColor;
+	}
+
+	&--outlined#{&}--primary {
+		--#{$prefix}chip-color: var(--#{$prefix}primary-color);
+	}
+
+	&--outlined#{&}--secondary {
+		--#{$prefix}chip-color: var(--#{$prefix}black-color);
+	}
+
+	&--outlined#{&}--success {
+		--#{$prefix}chip-color: var(--#{$prefix}success-color);
+	}
+
+	&--outlined#{&}--info {
+		--#{$prefix}chip-color: var(--#{$prefix}info-color);
+	}
+
+	&--outlined#{&}--warning {
+		--#{$prefix}chip-color: var(--#{$prefix}warning-color);
+	}
+
+	&--outlined#{&}--danger {
+		--#{$prefix}chip-color: var(--#{$prefix}danger-color);
+	}
+
+	// &--text {
+	// }
+
+	&--text#{&}--primary {
+		--#{$prefix}chip-color: var(--#{$prefix}primary-color);
+	}
+
+	&--text#{&}--secondary {
+		--#{$prefix}chip-color: var(--#{$prefix}black-color);
+	}
+
+	&--text#{&}--success {
+		--#{$prefix}button-color: var(--#{$prefix}success-color);
+	}
+
+	&--text#{&}--info {
+		--#{$prefix}chip-color: var(--#{$prefix}info-color);
+	}
+
+	&--text#{&}--warning {
+		--#{$prefix}chip-color: var(--#{$prefix}warning-color);
+	}
+
+	&--text#{&}--danger {
+		--#{$prefix}chip-color: var(--#{$prefix}danger-color);
+	}
+}