🐛 fix(global): components design improvements.

.prettierignore

@@ -5,3 +5,5 @@ coverage
 # Ignore minified files:
 *.min.js
 *.min.css
+*.md
+*.mdx

packages/assets/css/src/scss/_components/_avatar/_elements/_build-status.scss

@@ -22,7 +22,7 @@
 				position: absolute;
 				right: $avatar-status-margin-md;
 				bottom: $avatar-status-margin-md;
-				padding: $spacing-xs;
+				padding: $spacing-2xs;
 				border-radius: 100%;
 				background: $color-extended-neutral-100;
 			}

packages/assets/css/src/scss/_components/_avatar/_modifiers/_build-size.scss

@@ -26,7 +26,7 @@
 				@include modifies-element(status) {
 					right: $avatar-status-margin-sm;
 					bottom: $avatar-status-margin-sm;
-					padding: $spacing-xs;
+					padding: $spacing-2xs;
 				}
 
 				@include modifies-element(status-icon) {

packages/assets/css/src/scss/_core/_typography.scss

@@ -21,6 +21,7 @@
 		font-weight: $body-font-weight;
 		line-height: $body-font-height;
 		letter-spacing: $body-font-spacing;
+		color: $color-extended-neutral-50;
 
 		small {
 			font-size: $body-sm-font-size;
@@ -41,6 +42,14 @@
 		}
 	}
 
+	h1,
+	h2,
+	h3,
+	h4,
+	h5 {
+		color: $color-extended-neutral-10;
+	}
+
 	@include block(heading) {
 		margin: 0;
 		padding: 0;
@@ -76,6 +85,10 @@
 			line-height: $heading-five-font-height;
 			letter-spacing: $heading-five-font-spacing;
 		}
+
+		@include modifier(h1, h2, h3, h4, h5) {
+			color: $color-extended-neutral-10;
+		}
 	}
 
 	@include block(label) {
@@ -120,20 +133,6 @@
 	}
 }
 
-// Theme: None
-// RTL: True
-// Set dark color for global elements
-@include sui-class($rtl: true, $theme: false) {
-	h1,
-	h2,
-	h3,
-	h4,
-	h5,
-	p {
-		font-family: $font-family-default;
-	}
-}
-
 // Theme: Dark
 // Set dark color for global elements
 @include sui-class($rtl: false, $theme: dark) {

packages/assets/css/src/scss/_utils/_tokens.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Fri, 27 Oct 2023 00:34:06 GMT
+// Generated on Thu, 02 Nov 2023 05:17:03 GMT
 
 $accordion-border-radius-sm: 10px;
 $advanced-banner-background: linear-gradient(90deg, #222 0%, #383323 48.96%, #514524 100%);
@@ -9,10 +9,10 @@ $avatar-container-size-sm: 24px;
 $avatar-container-size-md: 32px;
 $avatar-icon-size-sm: 14px;
 $avatar-icon-size-md: 20px;
-$avatar-status-margin-sm: -2px;
+$avatar-status-margin-sm: -1px;
 $avatar-status-margin-md: -3px;
-$avatar-status-size-sm: 10px;
-$avatar-status-size-md: 14px;
+$avatar-status-size-sm: 12px;
+$avatar-status-size-md: 16px;
 $banner-font-size-lg: 40px;
 $banner-font-height-lg: 48px;
 $banner-font-spacing: 1px;
@@ -293,6 +293,7 @@ $color-alpha-black-0: rgba(0, 0, 0, 0);
 $color-shadow-light: rgba(115, 115, 115, 0.05);
 $color-shadow-default: rgba(115, 115, 115, 0.08);
 $color-shadow-dark: rgba(115, 115, 115, 0.1);
+$spacing-2xs: 1px;
 $spacing-xs: 2px;
 $spacing-sm: 4px;
 $spacing-md: 8px;

packages/assets/css/src/tokens/avatar.json

@@ -37,11 +37,11 @@
 			},
 			"size": {
 				"sm": {
-					"value": "10px",
+					"value": "12px",
 					"type": "sizing"
 				},
 				"md": {
-					"value": "14px",
+					"value": "16px",
 					"type": "sizing"
 				}
 			}

packages/assets/css/src/tokens/core.json

@@ -838,6 +838,11 @@
 		}
 	},
 	"spacing": {
+		"2xs": {
+			"value": "1px",
+			"type": "spacing",
+			"description": "1 points grid system."
+		},
 		"xs": {
 			"value": "2px",
 			"type": "spacing",

packages/assets/icons/stories/IconsPack.stories.js

@@ -556,18 +556,29 @@ Page.args = {
 Page.argTypes = {
 	category: {
 		name: "Category",
+		options: [
+			"all",
+			"products",
+			"summary-box",
+			"status",
+			"action",
+			"state",
+			"navigation",
+			"social",
+			"global",
+		],
 		control: {
 			type: "select",
-			options: {
-				"All Categories": "all",
-				Products: "products",
-				"Summary Box": "summary-box",
-				Status: "status",
-				Action: "action",
-				State: "state",
-				Navigation: "navigation",
-				"Social Media": "social",
-				Global: "global",
+			labels: {
+				all: "All Categories",
+				products: "Products",
+				"summary-box": "Summary Box",
+				status: "Status",
+				action: "Action",
+				state: "State",
+				navigation: "Navigation",
+				social: "Social Media",
+				global: "Global",
 			},
 		},
 	},

packages/docs/src/components/list/list.scss

@@ -13,6 +13,7 @@
 		padding-left: 16px;
 		font-size: 14px;
 		line-height: 20px;
+		color: #737373;
 
 		&:before {
 			content: " ";
@@ -23,7 +24,7 @@
 			left: 0;
 			display: block;
 			border-radius: 6px;
-			background: #286EF1;
+			background: #286ef1;
 		}
 
 		&:last-child {
@@ -41,9 +42,8 @@
 		}
 
 		li {
-
 			&:before {
-				border: 1px solid #286EF1;
+				border: 1px solid #286ef1;
 				background: transparent;
 			}
 		}

packages/docs/src/components/page/page.scss

@@ -72,9 +72,10 @@ $breakpoints: (
 
 	p {
 		margin: 0 0 24px;
-		font-size: 16px;
+		font-size: 15px;
 		font-weight: 400;
 		line-height: 24px;
+		color: #737373;
 
 		strong {
 			font-weight: 700;
@@ -90,5 +91,6 @@ $breakpoints: (
 		font-size: 20px;
 		font-weight: 700;
 		line-height: 32px;
+		color: #1a1a1a;
 	}
 }

packages/ui/button/stories/ReactButton.mdx

@@ -6,19 +6,15 @@ import TabCode from "./tabs/TabCode.mdx"
 import TabExamples from "./tabs/TabExamples.mdx"
 
 <Unstyled>
-	<Page.Tabs
-		title="Button"
-		subtitle="Buttons serve as a means to perform various interface actions, spanning from saving settings to initiating a modal. They offer diverse variations tailored to specific design requirements, enhancing the overall user experience."
-    	status="draft"
-    >
-    		<div id="usage" label="Usage">
-    			<TabUsage />
-    		</div>
-			<div id="code" label="Code">
-    			<TabCode />
-    		</div>
-			<div id="examples" label="Examples">
-    			<TabExamples />
-    		</div>
-    </Page.Tabs>
+	<Page.Tabs title="Button" status="draft">
+		<div id="usage" label="Usage">
+			<TabUsage />
+		</div>
+		<div id="code" label="Code">
+			<TabCode />
+		</div>
+		<div id="examples" label="Examples">
+			<TabExamples />
+		</div>
+	</Page.Tabs>
 </Unstyled>

packages/ui/button/stories/tabs/TabUsage.mdx

@@ -15,8 +15,9 @@ import WrongIcon from "../images/wrong-icon.svg"
 import CorrectEmphasis from "../images/correct-emphasis.svg"
 import WrongEmphasis from "../images/wrong-emphasis.svg"
 
-<Section title="Anatomy" style={{ paddingTop: 20 }}>
-	<img src={Anatomy} alt="Button Anatomy" style={{ marginBottom: 20 }} />
+<Section title="Buttons" style={{ paddingTop: 20 }}>
+	<p>Buttons are actions that encourage users to perform an action.</p>
+	<img src={Anatomy} alt="Buttons" style={{ marginBottom: 20 }} />
 </Section>
 
 <Section title="Basic Variations" style={{ paddingTop: 20 }}>

packages/ui/search/src/search.tsx

@@ -14,6 +14,7 @@ const Search: React.FC<SearchProps> = ({
 	id,
 	className,
 	variation = "",
+	placeholder = "",
 	defaultValue,
 	options = [],
 	onChange = () => {},
@@ -122,6 +123,7 @@ const Search: React.FC<SearchProps> = ({
 				allowClear={allowClear}
 				disableInteractions={true}
 				isDisabled={isDisabled}
+				placeholder={placeholder}
 				{...inputProps}
 			/>
 			{isPopoverVisible && "smart" === variation && (

packages/ui/search/src/search.types.ts

@@ -15,6 +15,10 @@ interface SearchBaseProps {
 	 * Custom default value
 	 */
 	defaultValue?: string
+	/**
+	 * Placeholder for search
+	 */
+	placeholder?: string
 	/**
 	 * Callback function to be invoked upon text change
 	 */

packages/ui/search/stories/search.stories.js

@@ -35,6 +35,7 @@ const Search = ({ ...props }) => {
 // Set story arguments.
 Search.args = {
 	variation: "basic",
+	placeholder: "Search",
 	allowClear: true,
 	searchMinChars: 2,
 	defaultValue: "",
@@ -54,6 +55,12 @@ Search.argTypes = {
 			},
 		},
 	},
+	placeholder: {
+		name: "Placeholder",
+		control: {
+			type: "text",
+		},
+	},
 	defaultValue: {
 		name: "Default Value",
 		control: {