diff --git a/apps/booking-app/pages/design-tokens.js b/apps/booking-app/pages/design-tokens.js new file mode 100644 index 0000000..a74e853 --- /dev/null +++ b/apps/booking-app/pages/design-tokens.js @@ -0,0 +1,623 @@ +import styles from '../styles/Home.module.scss'; + +export default function DesignSystem() { + return ( +
+

Booking System's Design Tokens

+

The design tokens for this projects are the next ones:

+
+ +

Colors

+ +

Main colors

+ +

Neutral colors

+ +

Gradients

+
+

+ gradient-main +

+

+ + linear-gradient(180deg, var(--main-color-400) 0%, hsla(0, 0%, 77%, + 0) 100%) + +

+
+
+ +

Font sizes

+ +

+ All those typografy sizes were chosen with the method of{' '} + fluid typography, which decides a font size depending + of the screen's width, making the font size fully responsive. It was + designed using{' '} + + this fluid typography calculator. + +

+ +
+
+ +

Spaces

+ +

+ Spaces are used for magins and paddings, the values in px are used for + Design system are those: +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
TokenValue (in px)
14
28
312
416
520
624
732
840
964
10100
+
+
+ +

Miscelaneous

+ +

Border radius

+

+ According to design, there is only one border radius in this project +

+
+

+ br-normal +

+

32px

+

Box shadow

+
+

+ box-shadow +

+

32px

+
+

The utility classes generated with those design tokens are those:

+
+ +

Colors

+ +

Background colors

+
+
bg-main-400
+
+ background-color: var(--main-color-400) +
+
+
+
bg-main-500
+
+ background-color: var(--main-color-500) +
+
+
+
bg-main-900
+
+ background-color: var(--main-color-900) +
+
+
+
bg-neutral-100
+
+ background-color: var(--main-neutral-100) +
+
+
+
bg-neutral-400
+
+ background-color: var(--main-neutral-400) +
+
+
+
bg-neutral-600
+
+ background-color: var(--main-neutral-600) +
+
+
+
bg-neutral-900
+
+ background-color: var(--main-neutral-900) +
+
+

Text color

+
+
color-main-400
+
+ color: var(--main-color-400) +
+
+
+
color-main-500
+
+ color: var(--main-color-500) +
+
+
+
color-main-900
+
+ color: var(--main-color-900) +
+
+
+
color-neutral-100
+
+ color: var(--main-neutral-100) +
+
+
+
color-neutral-400
+
+ color: var(--main-neutral-400) +
+
+
+
color-neutral-600
+
+ color: var(--main-neutral-600) +
+
+
+
color-neutral-900
+
+ color: var(--main-neutral-900) +
+
+

Border colors

+
+
border-main-400
+
+ border-color: var(--main-color-400) +
+
+
+
border-main-500
+
+ border-color: var(--main-color-500) +
+
+
+
border-main-900
+
+ border-color: var(--main-color-900) +
+
+
+
border-neutral-100
+
+ border-color: var(--main-neutral-100) +
+
+
+
border-neutral-400
+
+ border-color: var(--main-neutral-400) +
+
+
+
border-neutral-600
+
+ border-color: var(--main-neutral-600) +
+
+
+
border-neutral-900
+
+ border-color: var(--main-neutral-900) +
+
+

Gradiente

+
+
gradient-main
+
+ + background: linear-gradient(180deg, var(--main-color-400) 0%, + hsla(0, 0%, 77%, 0) 100%) + +
+
+
+
+ +

Font sizes

+ +
+
fs-300
+
+ font-size: var(--fs-300) +
+
+
+
fs-400
+
+ font-size: var(--fs-400) +
+
+
+
fs-500
+
+ font-size: var(--fs-500) +
+
+
+
fs-700
+
+ font-size: var(--fs-700) +
+
+
+
fs-800
+
+ font-size: var(--fs-800) +
+
+
+
+ +

Spaces

+ +

+ The prefixes for the classes that uses the spacing design tokens are: +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Spacing utility class' prefixes
PrefixCSS properties
+ p- + +

padding

+
+ pt- + +

padding-top

+
+ pb- + +

padding-bottom

+
+ pr- + +

padding-right

+
+ pl- + +

padding-left

+
+ px- + +

padding-left

+

padding-right

+
+ py- + +

padding-top

+

padding-bottom

+
+ m- + +

margin

+
+ mt- + +

margin-top

+
+ mb- + +

margin-bottom

+
+ mr- + +

margin-right

+
+ ml- + +

margin-left

+
+ mx- + +

margin-left

+

margin-right

+
+ my- + +

margin-top

+

margin-bottom

+
+

+ To create a class with those prefixes, you just add the prefix + followed by the design token name: for example px-4 will + add a padding-left and padding-right of + 16px. Remember you can check the spacing design tokens in{' '} + spacing section +

+
+ +
+ ); +} diff --git a/apps/booking-app/stories/documentation/DesignTokens.stories.mdx b/apps/booking-app/stories/documentation/DesignTokens.stories.mdx new file mode 100644 index 0000000..b6c2324 --- /dev/null +++ b/apps/booking-app/stories/documentation/DesignTokens.stories.mdx @@ -0,0 +1,36 @@ +import { Meta } from '@storybook/addon-docs'; +import css from '../../styles/globals.scss'; + + + + + +# Design Tokens + +Los design tokens de este proyecto se dividen en las siguientes categorías + +## Colors + +
+ +```css +main-colors: ( + '400': hsla(200, 77%, 36%, 1), + '500': hsla(200, 95%, 46%, 1), + '900': hsla(200, 41%, 95%, 1) +); +``` + +```css +neutral-colors: ( + '100': hsla(0, 0%, 0%, 1), + '400': hsla(0, 0%, 40%, 1), + '600': hsla(0, 0%, 61%, 1), + '900': hsla(0, 0%, 100%, 1) +); +``` diff --git a/apps/booking-app/styles/abstract/_design-tokens.scss b/apps/booking-app/styles/abstract/_design-tokens.scss new file mode 100644 index 0000000..13e8348 --- /dev/null +++ b/apps/booking-app/styles/abstract/_design-tokens.scss @@ -0,0 +1,58 @@ +// Colors + +$colors: ( + main: ( + '400': hsla(200, 77%, 36%, 1), + '500': hsla(200, 95%, 46%, 1), + '900': hsla(200, 41%, 95%, 1), + ), + neutral: ( + '100': hsla(0, 0%, 0%, 1), + '400': hsla(0, 0%, 40%, 1), + '600': hsla(0, 0%, 61%, 1), + '900': hsla(0, 0%, 100%, 1), + ), +); + +$main-colors: ( + '400': hsla(200, 77%, 36%, 1), + '500': hsla(200, 95%, 46%, 1), + '900': hsla(200, 41%, 95%, 1), +); + +$neutral-colors: ( + '100': hsla(0, 0%, 0%, 1), + '400': hsla(0, 0%, 40%, 1), + '600': hsla(0, 0%, 61%, 1), + '900': hsla(0, 0%, 100%, 1), +); + +$background: ( + 'main': + linear-gradient(180deg, var(--main-color-400) 0%, hsla(0, 0%, 77%, 0) 100%), +); + +$font-sizes: ( + '300': clamp(0.83rem, 0.11vw + 0.81rem, 0.9rem), + '400': clamp(1rem, 0.21vw + 0.96rem, 1.13rem), + '500': clamp(1.2rem, 0.34vw + 1.13rem, 1.41rem), + '700': clamp(1.73rem, 0.78vw + 1.57rem, 2.2rem), + '800': clamp(2.07rem, 1.81vw + 1.71rem, 3rem), +); + +$border-radius: ( + 'normal': 2rem, +); + +$spacing: ( + '1': 0.25rem, + '2': 0.5rem, + '3': 0.75rem, + '4': 1rem, + '5': 1.25rem, + '6': 1.5rem, + '7': 2rem, + '8': 2.5rem, + '9': 4rem, + '10': 6.25rem, +); diff --git a/apps/booking-app/styles/abstract/_variables.scss b/apps/booking-app/styles/abstract/_variables.scss new file mode 100644 index 0000000..ae1734a --- /dev/null +++ b/apps/booking-app/styles/abstract/_variables.scss @@ -0,0 +1,58 @@ +@use './design-tokens' as *; + +@import url('https://fonts.googleapis.com/css2?family=Permanent+Marker&family=Poppins:wght@400;600&display=swap'); + +:root { + /* Color */ + // --main-color-400: hsla(200, 77%, 36%, 1); + // --main-color-500: hsla(200, 95%, 46%, 1); + // --main-color-900: hsla(200, 41%, 95%, 1); + // --neutral-color-100: hsla(0, 0%, 0%, 1); + // --neutral-color-400: hsla(0, 0%, 40%, 1); + // --neutral-color-600: hsla(0, 0%, 61%, 1); + // --neutral-color-900: hsla(0, 0%, 100%, 1); + @each $key, $item in $colors { + @each $shade, $color in $item { + --#{$key}-color-#{$shade}: #{$color}; + } + } + + /* Gradients */ + --background-1: linear-gradient( + 180deg, + var(--main-color-400) 0%, + hsla(0, 0%, 77%, 0) 100% + ); + + /* Font families */ + --ff-main: "'Poppins', sans-serif"; + --ff-decoration: "'Permanent Marker', cursive"; + + /* Font sizes */ + --font-size-300: clamp(0.83rem, 0.11vw + 0.81rem, 0.9rem); + --font-size-400: clamp(1rem, 0.21vw + 0.96rem, 1.13rem); + --font-size-500: clamp(1.2rem, 0.34vw + 1.13rem, 1.41rem); + // --font-size-600: clamp(1.44rem, 0.53vw + 1.33rem, 1.76rem); + --font-size-700: clamp(1.73rem, 0.78vw + 1.57rem, 2.2rem); + --font-size-800: clamp(2.07rem, 1.81vw + 1.71rem, 3rem); + // --font-size-800: clamp(2.07rem, 1.31vw + 1.81rem, 2.75rem); + // --font-size-900: clamp(2.49rem, 1.57vw + 2.17rem, 3.43rem); + + /* Border radius */ + --border-radius: 2rem; + + /* Box shadows */ + --box-shadow: 0px 4px 24px 0px hsla(0, 0%, 0%, 0.2); + + /* Spacing */ + --space-1: 0.25rem; + --space-2: 0.5rem; + --space-3: 0.75rem; + --space-4: 1rem; + --space-5: 1.25rem; + --space-6: 1.5rem; + --space-7: 2rem; + --space-8: 2.5rem; + --space-9: 4rem; + --space-10: 6.25rem; +} diff --git a/apps/booking-app/styles/globals.scss b/apps/booking-app/styles/globals.scss index 880750e..03c9001 100644 --- a/apps/booking-app/styles/globals.scss +++ b/apps/booking-app/styles/globals.scss @@ -1,3 +1,5 @@ +@use './abstract/variables'; +@use './utils/utilities'; @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap'); @import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'); diff --git a/apps/booking-app/styles/utils/_utilities.scss b/apps/booking-app/styles/utils/_utilities.scss new file mode 100644 index 0000000..442e00f --- /dev/null +++ b/apps/booking-app/styles/utils/_utilities.scss @@ -0,0 +1,99 @@ +@use '../abstract/design-tokens' as *; + +// Colores principales + +@each $key, $item in $colors { + @each $shade, $color in $item { + .bg-#{$key}-#{$shade} { + background-color: var(--#{$key}-color-#{$shade}); + } + } +} + +// Gradientes + +@each $key, $item in $background { + .gradient-#{$key} { + background: #{$item}; + } +} + +// Font sizes + +@each $key, $item in $font-sizes { + .fs-#{$key} { + font-size: #{$item}; + } +} + +// Border radius + +@each $key, $item in $border-radius { + .br-#{$key} { + border-radius: #{$item}; + } +} + +// Spacing + +@each $key, $item in $spacing { + .p-#{$key} { + padding: #{$item}; + } + + .pt-#{$key} { + padding-top: #{$item}; + } + + .pb-#{$key} { + padding-bottom: #{$item}; + } + + .pl-#{$key} { + padding-left: #{$item}; + } + + .pr-#{$key} { + padding-right: #{$item}; + } + + .px-#{$key} { + padding-left: #{$item}; + padding-right: #{$item}; + } + + .py-#{$key} { + padding-top: #{$item}; + padding-bottom: #{$item}; + } + + .m-#{$key} { + margin: #{$item}; + } + + .mt-#{$key} { + margin-top: #{$item}; + } + + .mb-#{$key} { + margin-bottom: #{$item}; + } + + .ml-#{$key} { + margin-left: #{$item}; + } + + .mr-#{$key} { + margin-right: #{$item}; + } + + .mx-#{$key} { + margin-left: #{$item}; + margin-right: #{$item}; + } + + .my-#{$key} { + margin-top: #{$item}; + margin-bottom: #{$item}; + } +} diff --git a/packages/shared/src/index.js b/packages/shared/src/index.js index 73aa064..c3e2ad6 100644 --- a/packages/shared/src/index.js +++ b/packages/shared/src/index.js @@ -1,9 +1,9 @@ export { Button } from './components/Button'; -export { Places, Perks, HouseRules} from '@booking-ui/places'; +export { Places, Perks, HouseRules } from '@booking-ui/places'; export { Geolocation } from '@booking-ui/geolocation'; export { MessagingSystem, TextBox } from '@booking-ui/messaging-system'; -export { UserAccount, FavoriteCard, favoritesView } from '@booking-ui/user-account'; -export { ResultsPage, LandingPage } from '@booking-ui/search-engine'; +export { Demo } from '@booking-ui/search-engine'; +export { UserAccount } from '@booking-ui/user-account'; +export * from '@booking-ui/search-engine'; export * from '@booking-ui/authentication'; -export * from '@booking-ui/notification-system'; -export * from '@booking-ui/admin-panel'; \ No newline at end of file +export { AdminPanel, DropdownMenu, Sidebar } from '@booking-ui/admin-panel';