diff --git a/src/assets/images/app/projects/sistent/bg-colors-table-dark.svg b/src/assets/images/app/projects/sistent/bg-colors-table-dark.svg new file mode 100644 index 000000000000..91f7f20481f4 --- /dev/null +++ b/src/assets/images/app/projects/sistent/bg-colors-table-dark.svg @@ -0,0 +1,63 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/images/app/projects/sistent/border-colors-table-dark.svg b/src/assets/images/app/projects/sistent/border-colors-table-dark.svg new file mode 100644 index 000000000000..625a16299c3d --- /dev/null +++ b/src/assets/images/app/projects/sistent/border-colors-table-dark.svg @@ -0,0 +1,33 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/images/app/projects/sistent/brand-colors-table-dark.svg b/src/assets/images/app/projects/sistent/brand-colors-table-dark.svg new file mode 100644 index 000000000000..82395f0e3ca2 --- /dev/null +++ b/src/assets/images/app/projects/sistent/brand-colors-table-dark.svg @@ -0,0 +1,107 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/images/app/projects/sistent/context-visuals-6-dark.svg b/src/assets/images/app/projects/sistent/context-visuals-6-dark.svg new file mode 100644 index 000000000000..04a33c67ced9 --- /dev/null +++ b/src/assets/images/app/projects/sistent/context-visuals-6-dark.svg @@ -0,0 +1,36 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/images/app/projects/sistent/function-colors-table-dark.svg b/src/assets/images/app/projects/sistent/function-colors-table-dark.svg new file mode 100644 index 000000000000..cc45005908d8 --- /dev/null +++ b/src/assets/images/app/projects/sistent/function-colors-table-dark.svg @@ -0,0 +1,138 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/images/app/projects/sistent/greyscale-colors-table-dark.svg b/src/assets/images/app/projects/sistent/greyscale-colors-table-dark.svg new file mode 100644 index 000000000000..243bb10e0907 --- /dev/null +++ b/src/assets/images/app/projects/sistent/greyscale-colors-table-dark.svg @@ -0,0 +1,98 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/images/app/projects/sistent/text-colors-table-dark.svg b/src/assets/images/app/projects/sistent/text-colors-table-dark.svg new file mode 100644 index 000000000000..ed9acca0054b --- /dev/null +++ b/src/assets/images/app/projects/sistent/text-colors-table-dark.svg @@ -0,0 +1,72 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/images/app/projects/sistent/tonal-palettes-dark.svg b/src/assets/images/app/projects/sistent/tonal-palettes-dark.svg new file mode 100644 index 000000000000..405f0989b23c --- /dev/null +++ b/src/assets/images/app/projects/sistent/tonal-palettes-dark.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/src/assets/images/app/projects/sistent/tonal-palettes-full-dark.svg b/src/assets/images/app/projects/sistent/tonal-palettes-full-dark.svg new file mode 100644 index 000000000000..9e16bfa60d89 --- /dev/null +++ b/src/assets/images/app/projects/sistent/tonal-palettes-full-dark.svg @@ -0,0 +1,124 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/pages/projects/sistent/identity/spacing.js b/src/pages/projects/sistent/identity/spacing.js index 2bf24ac64be8..7098ab9ecc43 100644 --- a/src/pages/projects/sistent/identity/spacing.js +++ b/src/pages/projects/sistent/identity/spacing.js @@ -1,5 +1,5 @@ import React from "react"; -import SistentIdentitySpacing from "../../../../sections/Projects/Sistent/identity/spacing"; +import SistentIdentitySpacing from "../../../../sections/Projects/Sistent/identity/spacing/index"; const IdentitySpacingPage = () => { return ; diff --git a/src/sections/Projects/Sistent/about.js b/src/sections/Projects/Sistent/about.js index 6fd82e3962f2..d6256347a61e 100644 --- a/src/sections/Projects/Sistent/about.js +++ b/src/sections/Projects/Sistent/about.js @@ -20,6 +20,7 @@ const SistentAbout = () => {

About Sistent

+

Sorry, this page is still under work

diff --git a/src/sections/Projects/Sistent/identity/color/code.js b/src/sections/Projects/Sistent/identity/color/code.js index c4ff2472d322..f43eabccf9a8 100644 --- a/src/sections/Projects/Sistent/identity/color/code.js +++ b/src/sections/Projects/Sistent/identity/color/code.js @@ -5,9 +5,17 @@ import BgColors from "../../../../../assets/images/app/projects/sistent/bg-color import FunctionColors from "../../../../../assets/images/app/projects/sistent/function-colors-table.svg"; import TextColors from "../../../../../assets/images/app/projects/sistent/text-colors-table.svg"; import BorderColors from "../../../../../assets/images/app/projects/sistent/border-colors-table.svg"; +import BrandColorsDark from "../../../../../assets/images/app/projects/sistent/brand-colors-table-dark.svg"; +import GreyscaleColorsDark from "../../../../../assets/images/app/projects/sistent/greyscale-colors-table-dark.svg"; +import BgColorsDark from "../../../../../assets/images/app/projects/sistent/bg-colors-table-dark.svg"; +import FunctionColorsDark from "../../../../../assets/images/app/projects/sistent/function-colors-table-dark.svg"; +import TextColorsDark from "../../../../../assets/images/app/projects/sistent/text-colors-table-dark.svg"; +import BorderColorsDark from "../../../../../assets/images/app/projects/sistent/border-colors-table-dark.svg"; import { Col, Row } from "../../../../../reusecore/Layout"; +import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; const ColorCode = () => { + const { isDark } = useStyledDarkMode(); return (

@@ -30,19 +38,31 @@ const ColorCode = () => {

Brand Colors

- Brand colors + Brand colors

Greyscale Colors

- Greyscale colors + Greyscale colors

Function Colors

- Function colors + Function colors @@ -56,19 +76,31 @@ const ColorCode = () => {

Background Colors

- Background colors + Background colors

Text Colors

- Text colors + Text colors

Border Colors

- Border colors + Border colors
diff --git a/src/sections/Projects/Sistent/identity/color/guidance.js b/src/sections/Projects/Sistent/identity/color/guidance.js index b7c1efb66fd3..992bf2192b32 100644 --- a/src/sections/Projects/Sistent/identity/color/guidance.js +++ b/src/sections/Projects/Sistent/identity/color/guidance.js @@ -1,10 +1,14 @@ import React from "react"; import { Col, Row } from "../../../../../reusecore/Layout"; import TonalPalettes from "../../../../../assets/images/app/projects/sistent/tonal-palettes-full.svg"; +import TonalPalettesDark from "../../../../../assets/images/app/projects/sistent/tonal-palettes-full-dark.svg"; import ContextVisuals5 from "../../../../../assets/images/app/projects/sistent/context-visuals-5.svg"; import ContextVisuals6 from "../../../../../assets/images/app/projects/sistent/context-visuals-6.svg"; +import ContextVisuals6Dark from "../../../../../assets/images/app/projects/sistent/context-visuals-6-dark.svg"; +import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; const ColorGuidance = () => { + const { isDark } = useStyledDarkMode(); return (

@@ -39,7 +43,10 @@ const ColorGuidance = () => {

- Content Visuals + Tonal Palettes
@@ -104,7 +111,7 @@ const ColorGuidance = () => {

- Content Visuals + Context Visuals

The Role of Color Tokens

@@ -147,7 +154,11 @@ const ColorGuidance = () => {

- Content Visuals + Context Visuals

diff --git a/src/sections/Projects/Sistent/identity/color/overview.js b/src/sections/Projects/Sistent/identity/color/overview.js index e595cf3c9f9b..2140cecc76b7 100644 --- a/src/sections/Projects/Sistent/identity/color/overview.js +++ b/src/sections/Projects/Sistent/identity/color/overview.js @@ -1,13 +1,15 @@ import React from "react"; import { Col, Row } from "../../../../../reusecore/Layout"; import TonalPallete from "../../../../../assets/images/app/projects/sistent/tonal-palettes.svg"; +import TonalPalleteDark from "../../../../../assets/images/app/projects/sistent/tonal-palettes-dark.svg"; import ContextVisuals1 from "../../../../../assets/images/app/projects/sistent/context-visuals-1.svg"; import ContextVisuals2 from "../../../../../assets/images/app/projects/sistent/context-visuals-2.svg"; import ContextVisuals3 from "../../../../../assets/images/app/projects/sistent/context-visuals-3.svg"; import ContextVisuals4 from "../../../../../assets/images/app/projects/sistent/context-visuals-4.svg"; -import TocPagination from "../../../../../components/handbook-navigation/TocPagination"; +import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; const ColorOverview = () => { + const { isDark } = useStyledDarkMode(); return (

@@ -87,7 +89,10 @@ const ColorOverview = () => {

- Tonal Palette + Tonal Palette
diff --git a/src/sections/Projects/Sistent/identity/spacing.js b/src/sections/Projects/Sistent/identity/spacing.js deleted file mode 100644 index cf374129a8d4..000000000000 --- a/src/sections/Projects/Sistent/identity/spacing.js +++ /dev/null @@ -1,30 +0,0 @@ -import React from "react"; -import { Container } from "../../../../reusecore/Layout"; -import SistentWrapper from "../sistent.style"; -import TOC from "../../../../components/SistentNavigation"; -import IntraPage from "../../../../components/handbook-navigation/intra-page"; - -const contents = [{ id: 0, link: "#About Sistent", text: "About Sistent" }]; - -const SistentIdentitySpacing = () => { - return ( - -
-

Spacing

-
- -
- - - - -
- - ); -}; - -export default SistentIdentitySpacing; diff --git a/src/sections/Projects/Sistent/identity/spacing/code.js b/src/sections/Projects/Sistent/identity/spacing/code.js new file mode 100644 index 000000000000..070216a8bc5e --- /dev/null +++ b/src/sections/Projects/Sistent/identity/spacing/code.js @@ -0,0 +1,5 @@ +import React from "react"; + +export const SpacingCode = () => { + return
SpacingCode
; +}; diff --git a/src/sections/Projects/Sistent/identity/spacing/guidance.js b/src/sections/Projects/Sistent/identity/spacing/guidance.js new file mode 100644 index 000000000000..5a9ed96aa305 --- /dev/null +++ b/src/sections/Projects/Sistent/identity/spacing/guidance.js @@ -0,0 +1,5 @@ +import React from "react"; + +export const SpacingGuidance = () => { + return
SpacingGuidance
; +}; diff --git a/src/sections/Projects/Sistent/identity/spacing/index.js b/src/sections/Projects/Sistent/identity/spacing/index.js new file mode 100644 index 000000000000..574e3b742dd0 --- /dev/null +++ b/src/sections/Projects/Sistent/identity/spacing/index.js @@ -0,0 +1,62 @@ +import React, { useState } from "react"; +import { Container } from "../../../../../reusecore/Layout"; +import SistentWrapper from "../../sistent.style"; +import TOC from "../../../../../components/SistentNavigation"; +import IntraPage from "../../../../../components/handbook-navigation/intra-page"; +import Button from "../../../../../reusecore/Button"; +import SistentPagination from "../../../../../components/SistentNavigation/pagination"; +import { SpacingOverview } from "./overview"; +import { SpacingGuidance } from "./guidance"; +import { SpacingCode } from "./code"; + +const contents = [{ id: 0, link: "#About Sistent", text: "About Sistent" }]; + +const SistentIdentitySpacing = () => { + const [activeTab, setActiveTab] = useState("overview"); + return ( + +
+

Spacing

+
+ +
+ +
+ +

Spacing

+
+

+ Space is the unseen component in designed solutions that enables + clear, concise, and consistent arrangement of interface elements + across a screen. +

+
+
+ {activeTab === "overview" && } + {activeTab === "guidance" && } + {activeTab === "code" && } + +
+
+ +
+
+ ); +}; + +export default SistentIdentitySpacing; diff --git a/src/sections/Projects/Sistent/identity/spacing/overview.js b/src/sections/Projects/Sistent/identity/spacing/overview.js new file mode 100644 index 000000000000..459afb7c36ce --- /dev/null +++ b/src/sections/Projects/Sistent/identity/spacing/overview.js @@ -0,0 +1,70 @@ +import React from "react"; + +export const SpacingOverview = () => { + return ( +
+

+ Spacing is a foundational consideration in any design endeavor. From + intra component spacing to space between elements in a given layout, + intentional application of spacing across a digital experience elevates + its usability, improves its (or the) experience, and eventually + generates much needed website traffic which is a primary goal for most + digital solutions. +

+ +

The Basics

+
+

+ A few concepts can be handy to keep in mind as we consider spacing and + its application throughout designs to ensure clarity and proper + understanding. +

+

Inset

+

+ Inset describes the value of padding for any container in the interface. + The description of a container can range from full page layouts, to page + sections, all the way down to card containers and even icon frames. + Inset accounts for the values of both horizontal and vertical padding. + The horizontal and vertical paddings don’t need to have the same value, + however, it is recommended that the values for the horizontal padding + are equivalent. This principle applies to the values for the vertical + paddings as well. +

+

Stack

+

+ Stack in spacing is used to describe the space between vertically + arranged content in a digital interface. Since most digital content is + read from top to bottom, It is only right that they are arranged in such + a way that accurately conveys hierarchy, relationship and spatial + harmony. +

+

Inline

+

+ This is the horizontal space consideration given to elements that are + being arranged in an interface. It can be the space between text input, + horizontally stacked elements like buttons and so on. +

+ +

Scaling

+
+

+ To properly implement spacing, a set of values have to be generated + using a scale just like was done in the case of typography. This avails + us with a fixed range of values that provide the much needed flexibility + required by interfaces to be consistent. This range could be derived + from a base spacing value which follows a principle like a linear scale + from the base value, multiples of the base value, the golden ratio, or a + modular scale. +

+

+ Most digital screen resolutions are divisible by 16 which is a multiple + of eight and so, this makes it a good reason to utilize eight as our + base spacing value. Our scale, therefore, has been derived from + multiples of eight with a half and quarter step of eight included in the + scale to account for much smaller space considerations, for example, + icon padding. The half and quarter steps have values of two and four + respectively. +

+
+ ); +}; diff --git a/src/sections/Projects/Sistent/index.js b/src/sections/Projects/Sistent/index.js index 6996e9b87359..9c9684df1960 100644 --- a/src/sections/Projects/Sistent/index.js +++ b/src/sections/Projects/Sistent/index.js @@ -14,17 +14,17 @@ const SistentHome = () => {