diff --git a/src/theme.css b/src/theme.css index cadfa5d..991c010 100644 --- a/src/theme.css +++ b/src/theme.css @@ -444,7 +444,9 @@ --sds-typography-body-size-lg: var(--sds-typography-scale-04); --sds-typography-body-size-md: var(--sds-typography-scale-03); --sds-typography-body-size-sm: var(--sds-typography-scale-02); - --sds-typography-body-weight-emphasis: var(--sds-typography-weight-regular-italic); + --sds-typography-body-weight-emphasis: var( + --sds-typography-weight-regular-italic + ); --sds-typography-body-weight-regular: var(--sds-typography-weight-regular); --sds-typography-body-weight-strong: var(--sds-typography-weight-semibold); --sds-typography-code-family: var(--sds-typography-family-mono); @@ -541,23 +543,60 @@ } /* styles */ :root { - --sds-font-body-strong: normal var(--sds-typography-body-weight-strong) var(--sds-typography-body-size-md) var(--sds-typography-body-family); - --sds-font-body-base: normal var(--sds-typography-body-weight-regular) var(--sds-typography-body-size-md) var(--sds-typography-body-family); - --sds-font-input: normal var(--sds-typography-input-weight) var(--sds-typography-input-size-md) var(--sds-typography-input-family); - --sds-font-utilities-component-notes-regular: normal var(--sds-typography-weight-regular) var(--sds-typography-scale-03) var(--sds-typography-family-mono); - --sds-font-subheading: normal var(--sds-typography-subheading-weight) var(--sds-typography-subheading-size-md) var(--sds-typography-subheading-family); - --sds-font-title-hero: normal var(--sds-typography-title-hero-weight) var(--sds-typography-title-hero-size) var(--sds-typography-title-hero-family); - --sds-font-body-code: normal var(--sds-typography-code-weight) var(--sds-typography-code-size-md) var(--sds-typography-code-family); - --sds-font-title-page: normal var(--sds-typography-title-page-weight) var(--sds-typography-title-page-size-md) var(--sds-typography-title-page-family); - --sds-font-subtitle: normal var(--sds-typography-subtitle-weight) var(--sds-typography-subtitle-size-md) var(--sds-typography-subtitle-family); - --sds-font-heading: normal var(--sds-typography-heading-weight) var(--sds-typography-heading-size-md) var(--sds-typography-heading-family); - --sds-font-body-emphasis: var(--sds-typography-body-weight-emphasis) var(--sds-typography-body-size-md) var(--sds-typography-body-family); - --sds-font-body-link: normal var(--sds-typography-body-weight-regular) var(--sds-typography-body-size-md) var(--sds-typography-body-family); - --sds-font-body-small: normal var(--sds-typography-body-weight-regular) var(--sds-typography-body-size-sm) var(--sds-typography-body-family); - --sds-effects-shadows-drop-shadow-200: var(--sds-size-depth-none) var(--sds-size-depth-xs) var(--sds-size-depth-sm) var(--sds-size-depth-none) var(--sds-color-black-100), var(--sds-size-depth-none) var(--sds-size-depth-xs) var(--sds-size-depth-sm) var(--sds-size-depth-none) var(--sds-color-black-200); - --sds-effects-shadows-drop-shadow-100: var(--sds-size-depth-none) var(--sds-size-depth-xs) var(--sds-size-depth-sm) var(--sds-size-depth-none) var(--sds-color-black-100); - --sds-effects-shadows-drop-shadow-300: var(--sds-size-depth-none) var(--sds-size-depth-sm) var(--sds-size-depth-sm) var(--sds-size-depth-negative-xs) var(--sds-color-black-100), var(--sds-size-depth-none) var(--sds-size-depth-sm) var(--sds-size-depth-md) var(--sds-size-depth-negative-xs) var(--sds-color-black-200); - --sds-effects-shadows-drop-shadow-400: var(--sds-size-depth-none) var(--sds-size-depth-sm) var(--sds-size-depth-md) var(--sds-size-depth-negative-sm) var(--sds-color-black-100), var(--sds-size-depth-none) var(--sds-size-depth-lg) var(--sds-size-depth-xl) var(--sds-size-depth-negative-sm) var(--sds-color-black-200); - --sds-effects-shadows-drop-shadow-500: var(--sds-size-depth-none) var(--sds-size-depth-sm) var(--sds-size-depth-md) var(--sds-size-depth-negative-sm) var(--sds-color-black-100), var(--sds-size-depth-none) var(--sds-size-depth-lg) var(--sds-size-depth-lg) var(--sds-size-depth-negative-md) var(--sds-color-black-200); - --sds-effects-shadows-drop-shadow-600: var(--sds-size-depth-none) var(--sds-size-depth-lg) var(--sds-size-depth-xl) var(--sds-size-depth-negative-md) var(--sds-color-black-400); -} \ No newline at end of file + --sds-font-body-strong: normal var(--sds-typography-body-weight-strong) + var(--sds-typography-body-size-md) var(--sds-typography-body-family); + --sds-font-body-base: normal var(--sds-typography-body-weight-regular) + var(--sds-typography-body-size-md) var(--sds-typography-body-family); + --sds-font-input: normal var(--sds-typography-input-weight) + var(--sds-typography-input-size-md) var(--sds-typography-input-family); + --sds-font-utilities-component-notes-regular: normal + var(--sds-typography-weight-regular) var(--sds-typography-scale-03) + var(--sds-typography-family-mono); + --sds-font-subheading: normal var(--sds-typography-subheading-weight) + var(--sds-typography-subheading-size-md) + var(--sds-typography-subheading-family); + --sds-font-title-hero: normal var(--sds-typography-title-hero-weight) + var(--sds-typography-title-hero-size) + var(--sds-typography-title-hero-family); + --sds-font-body-code: normal var(--sds-typography-code-weight) + var(--sds-typography-code-size-md) var(--sds-typography-code-family); + --sds-font-title-page: normal var(--sds-typography-title-page-weight) + var(--sds-typography-title-page-size-md) + var(--sds-typography-title-page-family); + --sds-font-subtitle: normal var(--sds-typography-subtitle-weight) + var(--sds-typography-subtitle-size-md) var(--sds-typography-subtitle-family); + --sds-font-heading: normal var(--sds-typography-heading-weight) + var(--sds-typography-heading-size-md) var(--sds-typography-heading-family); + --sds-font-body-emphasis: var(--sds-typography-body-weight-emphasis) + var(--sds-typography-body-size-md) var(--sds-typography-body-family); + --sds-font-body-link: normal var(--sds-typography-body-weight-regular) + var(--sds-typography-body-size-md) var(--sds-typography-body-family); + --sds-font-body-small: normal var(--sds-typography-body-weight-regular) + var(--sds-typography-body-size-sm) var(--sds-typography-body-family); + --sds-effects-shadows-drop-shadow-200: var(--sds-size-depth-none) + var(--sds-size-depth-xs) var(--sds-size-depth-sm) + var(--sds-size-depth-none) var(--sds-color-black-100), + var(--sds-size-depth-none) var(--sds-size-depth-xs) var(--sds-size-depth-sm) + var(--sds-size-depth-none) var(--sds-color-black-200); + --sds-effects-shadows-drop-shadow-100: var(--sds-size-depth-none) + var(--sds-size-depth-xs) var(--sds-size-depth-sm) var(--sds-size-depth-none) + var(--sds-color-black-100); + --sds-effects-shadows-drop-shadow-300: var(--sds-size-depth-none) + var(--sds-size-depth-sm) var(--sds-size-depth-sm) + var(--sds-size-depth-negative-xs) var(--sds-color-black-100), + var(--sds-size-depth-none) var(--sds-size-depth-sm) var(--sds-size-depth-md) + var(--sds-size-depth-negative-xs) var(--sds-color-black-200); + --sds-effects-shadows-drop-shadow-400: var(--sds-size-depth-none) + var(--sds-size-depth-sm) var(--sds-size-depth-md) + var(--sds-size-depth-negative-sm) var(--sds-color-black-100), + var(--sds-size-depth-none) var(--sds-size-depth-lg) var(--sds-size-depth-xl) + var(--sds-size-depth-negative-sm) var(--sds-color-black-200); + --sds-effects-shadows-drop-shadow-500: var(--sds-size-depth-none) + var(--sds-size-depth-sm) var(--sds-size-depth-md) + var(--sds-size-depth-negative-sm) var(--sds-color-black-100), + var(--sds-size-depth-none) var(--sds-size-depth-lg) var(--sds-size-depth-lg) + var(--sds-size-depth-negative-md) var(--sds-color-black-200); + --sds-effects-shadows-drop-shadow-600: var(--sds-size-depth-none) + var(--sds-size-depth-lg) var(--sds-size-depth-xl) + var(--sds-size-depth-negative-md) var(--sds-color-black-400); +} diff --git a/src/ui/components/Cards/cards.css b/src/ui/components/Cards/cards.css index 074f99a..1c92c7c 100644 --- a/src/ui/components/Cards/cards.css +++ b/src/ui/components/Cards/cards.css @@ -18,7 +18,7 @@ box-shadow: inset 0 0 0 var(--sds-size-border-width) var(--sds-color-border-default-default), - var(--sds-effects-shadows-sm); + var(--sds-effects-shadows-drop-shadow-300); padding: var(--sds-size-padding-xl); } diff --git a/src/ui/components/Footers/Footers.tsx b/src/ui/components/Footers/Footers.tsx index 93351a8..f8e71b2 100644 --- a/src/ui/components/Footers/Footers.tsx +++ b/src/ui/components/Footers/Footers.tsx @@ -34,41 +34,77 @@ export function StandardFooter({ className, ...props }: StandardFooterProps) { - Something 1}> + Use cases}> - List item 1 + UI design - List item 2 + UX design - List item 3 + Wireframing + + + Diagramming + + + Brainstorming + + + Online whiteboard + + + Team collaboration - Something 2}> + Explore}> + + Design + + + Prototyping + - List item 1 + Development features - List item 2 + Design systems - List item 3 + Collaboration features + + + Design process + + + FigJam - Something 3}> + Resources}> + + Blog + + + Best practices + + + Colors + + + Color wheel + - List item 1 + Support - List item 2 + Developers - List item 3 + Resource library diff --git a/src/ui/components/Headers/Headers.tsx b/src/ui/components/Headers/Headers.tsx index 9353522..df661fc 100644 --- a/src/ui/components/Headers/Headers.tsx +++ b/src/ui/components/Headers/Headers.tsx @@ -83,8 +83,12 @@ export function HeaderAuth() { - Home - About + Pricing + Solutions + Community + Resources + Pricing + Contact {currentUser ? ( @@ -129,8 +133,12 @@ export function HeaderAuth() { - Home - About + Pricing + Solutions + Community + Resources + Pricing + Contact {currentUser ? ( diff --git a/src/ui/primitives/Avatar/avatar.css b/src/ui/primitives/Avatar/avatar.css index bf65797..f5c3b5d 100644 --- a/src/ui/primitives/Avatar/avatar.css +++ b/src/ui/primitives/Avatar/avatar.css @@ -114,7 +114,7 @@ &.avatar-group-overlap { --avatar-group-gap-factor: -1; > .avatar { - box-shadow: var(--sds-effects-shadows-sm); + box-shadow: var(--sds-effects-shadows-drop-shadow-300); } } &.avatar-group-spacing-xs { diff --git a/src/ui/primitives/Dialog/dialog.css b/src/ui/primitives/Dialog/dialog.css index 148e9d4..6cad5d9 100644 --- a/src/ui/primitives/Dialog/dialog.css +++ b/src/ui/primitives/Dialog/dialog.css @@ -29,7 +29,7 @@ border-radius: var(--sds-size-radius-md); border: var(--sds-size-border-width) solid var(--sds-color-border-default-default); - box-shadow: var(--sds-effects-shadows-md); + box-shadow: var(--sds-effects-shadows-drop-shadow-400); box-sizing: border-box; display: flex; flex-direction: column; diff --git a/src/ui/primitives/ListBox/listBox.css b/src/ui/primitives/ListBox/listBox.css index d7eb0e7..d2353aa 100644 --- a/src/ui/primitives/ListBox/listBox.css +++ b/src/ui/primitives/ListBox/listBox.css @@ -4,7 +4,7 @@ border-radius: var(--sds-size-radius-sm); box-shadow: 0 0 0 var(--sds-size-border-width) var(--sds-color-border-default-default), - var(--sds-effects-shadows-md); + var(--sds-effects-shadows-drop-shadow-400); display: flex; flex-direction: column; outline: none; diff --git a/src/ui/primitives/Menu/menu.css b/src/ui/primitives/Menu/menu.css index 6402826..8836510 100644 --- a/src/ui/primitives/Menu/menu.css +++ b/src/ui/primitives/Menu/menu.css @@ -8,7 +8,7 @@ box-shadow: inset 0 0 0 var(--sds-size-border-width) var(--sds-color-border-default-default), - var(--sds-effects-shadows-md); + var(--sds-effects-shadows-drop-shadow-400); outline: none; overflow-y: auto; padding: var(--sds-size-padding-sm);