) => {
i ? 'none' : 'translateY(20px)',
+ transform: maxIsVisible > i ? 'none' : animation,
opacity: maxIsVisible > i ? 1 : 0,
}}
>
diff --git a/src/stories/Avatar.stories.tsx b/src/stories/Avatar.stories.tsx
index fe26558..a874644 100644
--- a/src/stories/Avatar.stories.tsx
+++ b/src/stories/Avatar.stories.tsx
@@ -1,11 +1,11 @@
-import React from 'react'
-import { ComponentStory, ComponentMeta } from '@storybook/react'
-import Avatar from '../components/Avatar/Avatar'
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import Avatar from '../components/Avatar/Avatar';
export default {
title: 'Example/Avatar',
component: Avatar,
-} as ComponentMeta
+} as ComponentMeta;
const Template: ComponentStory = (args) => (
<>
@@ -20,9 +20,9 @@ const Template: ComponentStory = (args) => (
);
-export const Main = Template.bind({})
+export const Main = Template.bind({});
Main.args = {
- src: 'https://ui-avatars.com/api/?background=0D8ABC&color=fff',
+ src: 'https://avatars.dicebear.com/api/big-ears/:dr.svg?background=%230000ff',
alt: 'JD',
- size: 50
-}
+ size: 50,
+};
diff --git a/src/stories/Button.stories.tsx b/src/stories/Button.stories.tsx
index 0ae0122..bf251d1 100644
--- a/src/stories/Button.stories.tsx
+++ b/src/stories/Button.stories.tsx
@@ -1,7 +1,10 @@
import React from 'react';
import { ComponentStory, ComponentMeta } from '@storybook/react';
-import Button, { ButtonCategoriesE, ButtonSizesE } from '../components/Button/Button';
-import '../styles/theme.scss'
+import Button, {
+ ButtonCategoriesE,
+ ButtonSizesE,
+} from '../components/Button/Button';
+import '../styles/theme.scss';
// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
export default {
@@ -31,7 +34,14 @@ export default {
icon: {
control: {
type: 'select',
- options: ['', 'star', 'arrow-left', 'arrow-right', 'critical-solid', 'fx-account'],
+ options: [
+ '',
+ 'star',
+ 'arrow-left',
+ 'arrow-right',
+ 'critical-solid',
+ 'fx-account',
+ ],
},
},
iconPlacedRight: {
@@ -74,4 +84,4 @@ export const Main = Template.bind({});
Main.args = {
text: 'Main Button',
category: ButtonCategoriesE.PRIMARY_SOLID,
-};
\ No newline at end of file
+};
diff --git a/src/stories/Crumb.stories.tsx b/src/stories/Crumb.stories.tsx
new file mode 100644
index 0000000..e86e810
--- /dev/null
+++ b/src/stories/Crumb.stories.tsx
@@ -0,0 +1,146 @@
+import React, { useRef } from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import Button from '../components/Button/Button';
+import {
+ Crumb,
+ CrumbInterfaceT,
+ NewCrumbT,
+ CrumbTypesE,
+ CrumbLocationE,
+} from '../components';
+import CrumbMessage from '../components/Crumb/CrumbMessage';
+import '../styles/theme.scss';
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+ title: 'Example/Crumb',
+ component: Crumb,
+ // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+ argTypes: {
+ description: {
+ name: 'description',
+ type: { name: 'string', required: true },
+ },
+ duration: {
+ name: 'duration',
+ type: { name: 'number', required: true },
+ },
+ hasIcon: {
+ control: {
+ type: 'boolean',
+ options: [false, true],
+ },
+ },
+ icon: {
+ control: {
+ type: 'select',
+ options: ['', 'check', 'check-circle', 'x', 'alert-circle', 'smile'],
+ },
+ },
+ type: {
+ control: {
+ type: 'select',
+ options: [
+ CrumbTypesE.NEUTRAL,
+ CrumbTypesE.SUCCESS,
+ CrumbTypesE.WARNING,
+ CrumbTypesE.ERROR,
+ CrumbTypesE.INFO,
+ ],
+ },
+ },
+ location: {
+ control: {
+ type: 'select',
+ options: [
+ CrumbLocationE.TOP_LEFT,
+ CrumbLocationE.TOP_RIGHT,
+ CrumbLocationE.BOTTOM_LEFT,
+ CrumbLocationE.BOTTOM_RIGHT,
+ ],
+ },
+ },
+ pauseOnHover: {
+ control: {
+ type: 'boolean',
+ options: [false, true],
+ },
+ },
+ autoClose: {
+ control: {
+ type: 'boolean',
+ options: [false, true],
+ },
+ },
+ callbackCta: {
+ name: 'callbackCta',
+ type: { name: 'string' },
+ },
+ },
+} as ComponentMeta;
+
+// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+const Template: ComponentStory = (args) => {
+ const crumbRef = useRef();
+ const crumbDarkRef = useRef();
+
+ const success: NewCrumbT = {
+ description: args.description,
+ duration: args.duration,
+ icon: args.icon,
+ hasIcon: args.hasIcon,
+ type: args.type,
+ location: args.location,
+ pauseOnHover: args.pauseOnHover,
+ autoClose: args.autoClose,
+ };
+
+ const handleClick = () => {
+ crumbRef.current?.dispatchCrumb(success);
+ };
+
+ const handleDarkClick = () => {
+ crumbDarkRef.current?.dispatchCrumb(success);
+ };
+
+ return (
+ <>
+
+ Light Theme
+
+
+
+
+
+ Dark Theme
+
+
+
+
+ );
+};
+
+// PRIMARY BUTTON
+export const Main = Template.bind({});
+Main.args = {
+ classProp: '',
+ description: 'You are beautiful',
+ icon: undefined,
+ hasIcon: false,
+ duration: 3000,
+ type: CrumbTypesE.INFO,
+ location: CrumbLocationE.TOP_RIGHT,
+ pauseOnHover: true,
+ autoClose: true,
+};
diff --git a/src/stories/Dropdown.stories.tsx b/src/stories/Dropdown.stories.tsx
index cbde56c..58461fb 100644
--- a/src/stories/Dropdown.stories.tsx
+++ b/src/stories/Dropdown.stories.tsx
@@ -3,7 +3,7 @@ import { ComponentStory, ComponentMeta } from '@storybook/react';
import Dropdown from '../components/Dropdown/Dropdown';
import Button from '../components/Button/Button';
import '../styles/theme.scss';
-import '../styles/core/utility.scss';
+import '../styles/tools/utility.scss';
export default {
title: 'Example/Dropdown',
diff --git a/src/stories/Input.stories.tsx b/src/stories/Input.stories.tsx
index 64b365f..b040504 100644
--- a/src/stories/Input.stories.tsx
+++ b/src/stories/Input.stories.tsx
@@ -14,7 +14,7 @@ export default {
const Template: ComponentStory = (args) => {
const [value, setValue] = useState(initialValues.firstName);
const onChange = (e: any) => {
- setValue(e.target.valid);
+ setValue(e.target.value);
};
const [darkValue, setDarkValue] = useState(initialValues.firstName);
diff --git a/src/stories/RangeSlider.stories.tsx b/src/stories/RangeSlider.stories.tsx
new file mode 100644
index 0000000..2840f04
--- /dev/null
+++ b/src/stories/RangeSlider.stories.tsx
@@ -0,0 +1,33 @@
+import React, { ChangeEvent } from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import RangeSlider from '../components/RangeSlider/RangeSlider';
+import '../styles/theme.scss';
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+ title: 'Example/RangeSlider',
+ component: RangeSlider,
+} as ComponentMeta;
+// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+const Template: ComponentStory = (args) => {
+ return (
+ <>
+
+ Light Theme {args.classProp}
+
+
+
+ );
+};
+
+export const Main = Template.bind({});
+Main.args = {
+ label: 'range',
+ name: 'range',
+ id: 'range',
+ value: 50,
+ finish: 100,
+ onChange: (e: ChangeEvent) => {
+ console.log('e', e.target.value);
+ },
+};
diff --git a/src/stories/Select.stories.tsx b/src/stories/Select.stories.tsx
new file mode 100644
index 0000000..14bd1a6
--- /dev/null
+++ b/src/stories/Select.stories.tsx
@@ -0,0 +1,54 @@
+import React, { useState } from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import Select from '../components/Select/Select';
+
+const initialValues = {
+ firstName: 'Dr.Duck',
+};
+
+export default {
+ title: 'Example/Select',
+ component: Select,
+} as ComponentMeta;
+
+const Template: ComponentStory = (args) => {
+ const [value, setValue] = useState(initialValues.firstName);
+ const onChange = (e: any) => {
+ setValue(e.target.valid);
+ };
+
+ const [darkValue, setDarkValue] = useState(initialValues.firstName);
+ const onDarkChange = (e: any) => {
+ setDarkValue(e.target.value);
+ };
+
+ return (
+
+ );
+};
+
+export const Main = Template.bind({});
+Main.args = {
+ label: 'First Name',
+ name: 'firstName',
+ info: 'Additional Input Information',
+ required: true,
+ isError: false,
+ options: [
+ { title: '30 Minuts', value: '30' },
+ { title: '35 Minuts', value: '35' },
+ { title: '40 Minuts', value: '40' },
+ ],
+};
diff --git a/src/stories/Switch.stories.tsx b/src/stories/Switch.stories.tsx
new file mode 100644
index 0000000..43de87b
--- /dev/null
+++ b/src/stories/Switch.stories.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { Switch } from '../components';
+
+export default {
+ title: 'Example/Switch',
+ component: Switch,
+} as ComponentMeta;
+
+const onChange = (value: any) => {
+ console.log('onchange value', value);
+};
+
+const Template: ComponentStory = (args) => (
+ <>
+
+ Light Theme
+
+
+
+ Dark Theme
+
+
+
+);
+
+export const Main = Template.bind({});
+Main.args = {
+ label: 'Switch me!',
+};
diff --git a/src/stories/TextArea.stories.tsx b/src/stories/TextArea.stories.tsx
new file mode 100644
index 0000000..3ce78bb
--- /dev/null
+++ b/src/stories/TextArea.stories.tsx
@@ -0,0 +1,49 @@
+import React, { useState } from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import TextArea from '../components/TextArea';
+
+const initialValues = {
+ firstName: 'Dr.Duck',
+};
+
+export default {
+ title: 'Example/TextArea',
+ component: TextArea,
+} as ComponentMeta;
+
+const Template: ComponentStory = (args) => {
+ const [value, setValue] = useState(initialValues.firstName);
+ const onChange = (e: any) => {
+ setValue(e.target.valid);
+ };
+
+ const [darkValue, setDarkValue] = useState(initialValues.firstName);
+ const onDarkChange = (e: any) => {
+ setDarkValue(e.target.value);
+ };
+
+ return (
+
+ );
+};
+
+export const Main = Template.bind({});
+Main.args = {
+ label: 'First Name',
+ name: 'firstName',
+ info: 'Additional Text Area Information',
+ required: true,
+ isError: false,
+};
diff --git a/src/stories/Toast.stories.tsx b/src/stories/Toast.stories.tsx
new file mode 100644
index 0000000..7e1677d
--- /dev/null
+++ b/src/stories/Toast.stories.tsx
@@ -0,0 +1,148 @@
+import React, { useRef } from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import Button from '../components/Button/Button';
+import {
+ Toast,
+ ToastInterfaceT,
+ NewToastT,
+ ToastTypesE,
+ ToastLocationE,
+} from '../components';
+import ToastMessage from '../components/Toast/ToastMessage';
+import '../styles/theme.scss';
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+ title: 'Example/Toast',
+ component: Toast,
+ // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+ argTypes: {
+ title: {
+ name: 'title',
+ type: { name: 'string', required: true },
+ defaultValue: 'Toast Title',
+ },
+ description: {
+ name: 'description',
+ type: { name: 'string', required: true },
+ },
+ duration: {
+ name: 'duration',
+ type: { name: 'number', required: true },
+ },
+ icon: {
+ control: {
+ type: 'select',
+ options: ['', 'check', 'check-circle', 'x', 'alert-circle', 'smile'],
+ },
+ },
+ type: {
+ control: {
+ type: 'select',
+ options: [
+ ToastTypesE.SUCCESS,
+ ToastTypesE.WARNING,
+ ToastTypesE.ERROR,
+ ToastTypesE.INFO,
+ ],
+ },
+ },
+ location: {
+ control: {
+ type: 'select',
+ options: [
+ ToastLocationE.TOP_LEFT,
+ ToastLocationE.TOP_RIGHT,
+ ToastLocationE.BOTTOM_LEFT,
+ ToastLocationE.BOTTOM_RIGHT,
+ ],
+ },
+ },
+ pauseOnHover: {
+ control: {
+ type: 'boolean',
+ options: [false, true],
+ },
+ },
+ autoClose: {
+ control: {
+ type: 'boolean',
+ options: [false, true],
+ },
+ },
+ callbackCta: {
+ name: 'callbackCta',
+ type: { name: 'string' },
+ },
+ },
+} as ComponentMeta;
+
+// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+const Template: ComponentStory = (args) => {
+ const toastRef = useRef();
+ const toastDarkRef = useRef();
+
+ const callback = args.callbackCta ? () => {} : undefined;
+
+ const success: NewToastT = {
+ title: args.title,
+ description: args.description,
+ duration: args.duration,
+ type: args.type,
+ location: args.location,
+ pauseOnHover: args.pauseOnHover,
+ autoClose: args.autoClose,
+ callback: callback,
+ callbackCta: args.callbackCta,
+ };
+
+ const handleClick = () => {
+ toastRef.current?.dispatchToast(success);
+ };
+
+ const handleDarkClick = () => {
+ toastDarkRef.current?.dispatchToast(success);
+ };
+
+ return (
+ <>
+
+ Light Theme
+
+
+
+
+
+ Dark Theme
+
+
+
+
+ );
+};
+
+// PRIMARY BUTTON
+export const Main = Template.bind({});
+Main.args = {
+ classProp: '',
+ title: 'Lorem ipsum dolor sit amet',
+ description:
+ 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.',
+ duration: 3000,
+ type: ToastTypesE.SUCCESS,
+ location: ToastLocationE.TOP_RIGHT,
+ pauseOnHover: true,
+ autoClose: true,
+ callbackCta: undefined,
+};
diff --git a/src/stories/ToolTip.stories.tsx b/src/stories/ToolTip.stories.tsx
new file mode 100644
index 0000000..6fb8c78
--- /dev/null
+++ b/src/stories/ToolTip.stories.tsx
@@ -0,0 +1,85 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import ToolTip, {
+ ToolTipCategoriesE,
+ ToolTipLocationE,
+} from '../components/ToolTip/ToolTip';
+import { Button } from '../components';
+
+export default {
+ title: 'Example/ToolTip',
+ component: ToolTip,
+ // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+ argTypes: {
+ description: {
+ name: 'description',
+ type: { name: 'string', required: true },
+ defaultValue: 'Tool tip description.',
+ },
+ category: {
+ control: {
+ type: 'select',
+ options: [
+ ToolTipCategoriesE.PRIMARY,
+ ToolTipCategoriesE.SECONDARY,
+ ToolTipCategoriesE.TERTIARY,
+ ],
+ },
+ },
+ location: {
+ control: {
+ type: 'select',
+ options: [
+ ToolTipLocationE.TOP,
+ ToolTipLocationE.RIGHT,
+ ToolTipLocationE.BOTTOM,
+ ToolTipLocationE.LEFT,
+ ],
+ },
+ },
+ },
+} as ComponentMeta;
+
+const Template: ComponentStory = (args) => {
+ return (
+
+ );
+};
+
+export const Main = Template.bind({});
+Main.args = {
+ location: ToolTipLocationE.TOP,
+ category: ToolTipCategoriesE.PRIMARY,
+ description:
+ 'Why did the duck go to the chiropractor? To get his back quacked.',
+};
diff --git a/src/styles/boilerplate.scss b/src/styles/boilerplate.scss
deleted file mode 100644
index fbbc5d3..0000000
--- a/src/styles/boilerplate.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-@forward 'core/variables';
-@forward 'core/flex';
-@forward 'tools/functions';
-@forward 'tools/mixins';
diff --git a/src/styles/core/boilerplate.scss b/src/styles/core/boilerplate.scss
new file mode 100644
index 0000000..b615bf7
--- /dev/null
+++ b/src/styles/core/boilerplate.scss
@@ -0,0 +1,4 @@
+@forward './variables';
+@forward '../tools/flex';
+@forward '../tools/functions';
+@forward '../tools/mixins';
diff --git a/src/styles/core/utility.scss b/src/styles/core/utility.scss
deleted file mode 100644
index 77b82f6..0000000
--- a/src/styles/core/utility.scss
+++ /dev/null
@@ -1,334 +0,0 @@
-@use '../tools/media-queries.scss' as *;
-@use '../tools/mixins.scss' as *;
-
-// ---------------------------------
-// Quick Typograpjhy
-// ---------------------------------
-.u-font-12 {
- @include font-size(12);
-}
-
-.u-font-14 {
- @include font-size(14);
-}
-
-.u-font-16 {
- @include font-size(16);
-}
-
-.u-font-18 {
- @include font-size(18);
-}
-
-.u-capitalize {
- text-transform: capitalize;
-}
-
-// ---------------------------------
-// Visibility
-// ---------------------------------
-
-.u-hidden {
- display: none !important;
-}
-
-.u-hidden-mobile-only {
- @include mobile-only {
- display: none !important;
- }
-}
-
-.u-hidden-tablet-up {
- @include tablet-up {
- display: none !important;
- }
-}
-
-.u-hidden-tablet-only {
- @include tablet-only {
- display: none !important;
- }
-}
-
-.u-hidden-desktop-up {
- @include desktop-up {
- display: none !important;
- }
-}
-
-.u-hidden-desktop-only {
- @include desktop-only {
- display: none !important;
- }
-}
-
-.u-hidden-hd-up {
- @include hd-up {
- display: none !important;
- }
-}
-
-
-// ---------------------------------
-// Misc
-// ---------------------------------
-
-.u-sr-only {
- border: 0 !important;
- clip: rect(1px, 1px, 1px, 1px) !important;
- -webkit-clip-path: inset(50%) !important;
- clip-path: inset(50%) !important;
- height: 1px !important;
- margin: -1px !important;
- overflow: hidden !important;
- padding: 0 !important;
- position: absolute !important;
- width: 1px !important;
- white-space: nowrap !important;
-}
-
-.u-clear-button {
- cursor: pointer;
- border: none;
- background-color: transparent;
- display: inline-block;
- margin: 0;
- padding: 0;
-}
-
-.u-pointer {
- cursor: pointer;
-}
-
-.u-no-link {
-
- &,
- &:hover {
- text-decoration: none;
- color: inherit;
- }
-}
-
-.u-overflow-x-hidden {
- overflow-x: hidden;
-}
-
-.u-text-center {
- text-align: center;
-}
-
-.u-text-right {
- text-align: right;
-}
-
-.u-text-left {
- text-align: left;
-}
-
-.u-uppercase {
- text-transform: uppercase;
-}
-
-.u-title-case {
- text-transform: capitalize;
-}
-
-.u-left-absolute {
- position: absolute;
- left: 0
-}
-
-.u-right-absolute {
- position: absolute;
- right: 0
-}
-
-.u-width-100 {
- width: 100%;
-}
-
-/**
-PADDING
-**/
-.padding {
- &-5 {
- padding: 5px;
- }
-
- &-10 {
- padding: 10px;
- }
-
- &-15 {
- padding: 15px;
- }
-
- &-20 {
- padding: 20px;
- }
-}
-
-.padding-right {
- &-5 {
- padding-right: 5px;
- }
-
- &-10 {
- padding-right: 10px;
- }
-
- &-15 {
- padding-right: 15px;
- }
-
- &-20 {
- padding-right: 20px;
- }
-}
-
-.padding-left {
- &-5 {
- padding-left: 5px;
- }
-
- &-10 {
- padding-left: 10px;
- }
-
- &-15 {
- padding-left: 15px;
- }
-
- &-20 {
- padding-left: 20px;
- }
-}
-
-.padding-bottom {
- &-5 {
- padding-bottom: 5px;
- }
-
- &-10 {
- padding-bottom: 10px;
- }
-
- &-15 {
- padding-bottom: 15px;
- }
-
- &-20 {
- padding-bottom: 20px;
- }
-}
-
-.padding-top {
- &-5 {
- padding-top: 5px;
- }
-
- &-10 {
- padding-top: 10px;
- }
-
- &-15 {
- padding-top: 15px;
- }
-
- &-20 {
- padding-top: 20px;
- }
-}
-
-/**
-MARGIN
-**/
-.margin {
- &-5 {
- margin: 5px;
- }
-
- &-10 {
- margin: 10px;
- }
-
- &-15 {
- margin: 15px;
- }
-
- &-20 {
- margin: 20px;
- }
-}
-
-.margin-top {
- &-5 {
- margin-top: 5px;
- }
-
- &-10 {
- margin-top: 10px !important;
- }
-
- &-15 {
- margin-top: 15px;
- }
-
- &-20 {
- margin-top: 20px;
- }
-}
-
-.margin-bottom {
- &-5 {
- margin-bottom: 5px;
- }
-
- &-10 {
- margin-bottom: 10px;
- }
-
- &-15 {
- margin-bottom: 15px;
- }
-
- &-20 {
- margin-bottom: 20px;
- }
-}
-
-.margin-right {
- &-5 {
- margin-right: 5px;
- }
-
- &-10 {
- margin-right: 10px;
- }
-
- &-15 {
- margin-right: 15px;
- }
-
- &-20 {
- margin-right: 20px;
- }
-}
-
-.margin-left {
- &-5 {
- margin-left: 5px;
- }
-
- &-10 {
- margin-left: 10px;
- }
-
- &-15 {
- margin-left: 15px;
- }
-
- &-20 {
- margin-left: 20px;
- }
-}
diff --git a/src/styles/core/variables.scss b/src/styles/core/variables.scss
index db8155c..3ed52e0 100644
--- a/src/styles/core/variables.scss
+++ b/src/styles/core/variables.scss
@@ -2,9 +2,9 @@
// Font Setup
// -----------------
$font-size-base: 16; // base size in px
-$primary-font: 'Inter';
-$secondary-font: 'Space Grotesk';
-$backup-font:'Arial';
+$primary-font: var(--font-primary);
+$secondary-font: var(--font-seondary);
+$backup-font: var(--font-backup);
// ---------------------------------
// Colors
@@ -17,9 +17,15 @@ $color-interaction-primary-hover: var(--color-interaction-primary-hover);
$color-interaction-primary-active: var(--color-interaction-primary-active);
$color-interaction-primary-disabled: var(--color-interaction-primary-disabled);
$color-interaction-primary-alt: var(--color-interaction-primary-alt);
-$color-interaction-primary-alt-hover: var(--color-interaction-primary-alt-hover);
-$color-interaction-primary-alt-active: var(--color-interaction-primary-alt-active);
-$color-interaction-primary-alt-disabled: var(--color-interaction-primary-alt-disabled);
+$color-interaction-primary-alt-hover: var(
+ --color-interaction-primary-alt-hover
+);
+$color-interaction-primary-alt-active: var(
+ --color-interaction-primary-alt-active
+);
+$color-interaction-primary-alt-disabled: var(
+ --color-interaction-primary-alt-disabled
+);
/**
SECONDARY INTERACTION
@@ -27,11 +33,19 @@ $color-interaction-primary-alt-disabled: var(--color-interaction-primary-alt-dis
$color-interaction-secondary: var(--color-interaction-secondary);
$color-interaction-secondary-hover: var(--color-interaction-secondary-hover);
$color-interaction-secondary-active: var(--color-interaction-secondary-active);
-$color-interaction-secondary-disabled: var(--color-interaction-secondary-disabled);
+$color-interaction-secondary-disabled: var(
+ --color-interaction-secondary-disabled
+);
$color-interaction-secondary-alt: var(--color-interaction-secondary-alt);
-$color-interaction-secondary-alt-hover: var(--color-interaction-secondary-alt-hover);
-$color-interaction-secondary-alt-active: var(--color-interaction-secondary-alt-active);
-$color-interaction-secondary-alt-disabled: var(--color-interaction-secondary-alt-disabled);
+$color-interaction-secondary-alt-hover: var(
+ --color-interaction-secondary-alt-hover
+);
+$color-interaction-secondary-alt-active: var(
+ --color-interaction-secondary-alt-active
+);
+$color-interaction-secondary-alt-disabled: var(
+ --color-interaction-secondary-alt-disabled
+);
/**
SEMANTIC
@@ -99,6 +113,8 @@ $color-status-bus: var(--color-status-bus);
$color-background-overlay: var(--color-background-overlay);
$color-background-subtle-callout: var(--color-background-subtle-callout);
$color-background-modal-overlay: var(--color-background-modal-overlay);
+$color-background-critical: var(--color-background-critical);
+$color-background-neutral-0: var(--color-background-neutral-0);
/**
MENU
@@ -107,31 +123,29 @@ $color-interactions-menu: var(--color-interactions-menu);
$color-interactions-menu-hover: var(--color-interactions-menu-hover);
$color-interactions-menu-inactive: var(--color-interactions-menu-inactive);
-
// ---- Primary Brand Colors ---------------------
$black: #231f20;
$dark-teal: #1c7f8d;
-$blue: #0D73A6;
-$light-blue:#e0f5ff;
-$link-blue:#007AB8;
-$purple: #663DF5;
-
-
-// ---- Accent Colors ---------------------
-$teal: #23a2b3;
-$light-teal: rgba($teal, 0.1);
-$pink: #d83a94;
-$blue-neon: #4d4dff;
-$yellow-neon: #f1ea57;
-$peach: #d96868;
-$tan: #e5dfd8;
+$blue: #0d73a6;
+$light-blue: #e0f5ff;
+$link-blue: #007ab8;
+$purple: #663df5;
+$gradient-warm: linear-gradient(270deg, #ff806f 0%, #ffff98 100%);
+$gradient-rainbow: linear-gradient(
+ 107.97deg,
+ #489cbe 6.73%,
+ #5427c9 39.4%,
+ #a8527c 77.18%,
+ #a67878 104.75%
+);
+$gradient-cool: linear-gradient(90deg, #6ae1d9 0%, #9898ff 100%);
// ---- Utility Colors ---------------------
$white: #ffffff;
$off-white: #ddd;
$grey: #868686;
-$accent-grey:#e0e0e0;
-$form-gray:#c9c9c9;
+$accent-grey: #e0e0e0;
+$form-gray: #c9c9c9;
$semi-dark-grey: #767474;
$dark-grey: #393536;
$red: #d42828;
@@ -151,4 +165,4 @@ $container-max-width: 1440px;
// ---- Misc ---------------------
$drop-shadow: 0 3px 8px rgba($black, 0.3);
$drop-shadow-right: 3px 3px 8px rgba($black, 0.3);
-$drop-shadow-light: 0 3px 8px rgba($black, 0.05);
\ No newline at end of file
+$drop-shadow-light: 0 3px 8px rgba($black, 0.05);
diff --git a/src/styles/theme.scss b/src/styles/theme.scss
index 256b850..b0a7cf7 100644
--- a/src/styles/theme.scss
+++ b/src/styles/theme.scss
@@ -1,7 +1,15 @@
-@use './core/utility.scss' as *;
+@use './tools/utility.scss' as *;
+@use './tools/flex.scss' as *;
main[data-theme='light'],
:root {
+ /**
+ FONTS
+ **/
+ --font-primary: 'Inter';
+ --font-secondary: 'Space Grotesk';
+ --font-backup: 'Arial';
+
/**
PRIMARY INTERACTION
**/
@@ -37,7 +45,7 @@ main[data-theme='light'],
--color-semantic-success-hover: #229a60;
--color-semantic-success-active: #39ab74;
--color-semantic-success-disabled: #767676;
- --color-semantic-warning: #a86500;
+ --color-semantic-warning: #e9a949;
--color-semantic-warning-hover: #b8771c;
--color-semantic-warning-active: #c78938;
--color-semantic-warning-disabled: #747474;
@@ -106,6 +114,13 @@ main[data-theme='light'],
// PLACE HOLDER FOR DARK VALUES
main[data-theme='dark'] {
+ /**
+ FONTS
+ **/
+ --font-primary: 'Inter';
+ --font-secondary: 'Space Grotesk';
+ --font-backup: 'Arial';
+
/**
PRIMARY INTERACTION
**/
@@ -141,7 +156,7 @@ main[data-theme='dark'] {
--color-semantic-success-hover: #08743f;
--color-semantic-success-active: #045f33;
--color-semantic-success-disabled: #767676;
- --color-semantic-warning: #a86500;
+ --color-semantic-warning: #e9a949;
--color-semantic-warning-hover: #915200;
--color-semantic-warning-active: #783f00;
--color-semantic-warning-disabled: #747474;
@@ -197,12 +212,12 @@ main[data-theme='dark'] {
--color-background-subtle-callout: #e8effd;
--color-background-modal-overlay: rgba(0, 0, 0, 0.3);
--color-background-critical: #f9e1e5;
- --color-background-neutral-0: #ffffff;
+ --color-background-neutral-0: #000000;
/**
MENU
**/
- --color-interactions-menu: #000000;
+ --color-interactions-menu: #ffffff;
--color-interactions-menu-hover: #2f2f2f;
--color-interactions-menu-inactive: #757575;
}
diff --git a/src/styles/core/flex.scss b/src/styles/tools/flex.scss
similarity index 100%
rename from src/styles/core/flex.scss
rename to src/styles/tools/flex.scss
diff --git a/src/styles/tools/media-queries.scss b/src/styles/tools/media-queries.scss
index 8601078..e6a2be4 100644
--- a/src/styles/tools/media-queries.scss
+++ b/src/styles/tools/media-queries.scss
@@ -12,6 +12,12 @@
}
}
+@mixin mobile-up {
+ @media (min-width: $breakpoint-mobile) {
+ @content;
+ }
+}
+
@mixin mobile-only {
@media (max-width: $breakpoint-tablet - 1) {
@content;
@@ -100,4 +106,4 @@
@media (min-width: $container-max-width) {
@content;
}
-}
\ No newline at end of file
+}
diff --git a/src/styles/tools/mixins.scss b/src/styles/tools/mixins.scss
index 723a1cc..0579fbd 100644
--- a/src/styles/tools/mixins.scss
+++ b/src/styles/tools/mixins.scss
@@ -1,6 +1,6 @@
-@use '../core/variables.scss'as *;
-@use '../tools/media-queries.scss'as *;
-@use '../tools/functions.scss'as *;
+@use '../core/variables.scss' as *;
+@use './media-queries.scss' as *;
+@use './functions.scss' as *;
/*-------------------------------
TYPOGRAPHY STYLES
@@ -10,7 +10,7 @@
font-size: rem($size);
}
-@mixin primary-font($weight: 400) {
+@mixin primary-font($weight: 600) {
font-family: $primary-font, $backup-font;
font-weight: $weight;
}
@@ -23,63 +23,72 @@
/*-------------------------------
HEADLINE STYLES
-------------------------------*/
-@mixin h1 {
- @include font-size(25);
- @include primary-font(500);
- letter-spacing: 0;
- line-height: 38px;
-
- @include tablet-up {
- @include font-size(40);
- line-height: 52px;
+@mixin heading-xxl {
+ @include font-size(40);
+ @include secondary-font(700);
+ line-height: 51px;
+
+ @include tablet-down {
+ @include font-size(28.8);
+ line-height: 37px;
}
}
-@mixin h2 {
- @include font-size(18);
- @include primary-font(500);
- line-height: 27px;
- letter-spacing: 0;
+@mixin heading-xl {
+ @include font-size(36);
+ @include secondary-font(700);
+ line-height: 46px;
- @include tablet-up {
- @include font-size(25);
- line-height: 38px;
+ @include tablet-down {
+ @include font-size(25.6);
+ line-height: 33px;
}
}
-@mixin h3 {
- @include font-size(18);
- @include primary-font(600);
- line-height: 27px;
- letter-spacing: 0;
+@mixin heading-lg {
+ @include font-size(32);
+ @include secondary-font(700);
+ line-height: 41px;
+
+ @include tablet-down {
+ @include font-size(24);
+ line-height: 31px;
+ }
}
-@mixin h4 {
- @include font-size(14);
- @include primary-font(700);
- line-height: 25px;
- letter-spacing: 0;
+@mixin heading-md {
+ @include font-size(28);
+ @include secondary-font(700);
+ line-height: 36px;
- @include tablet-up {
- @include font-size(18);
- letter-spacing: 0;
- line-height: 21px;
+ @include tablet-down {
+ @include font-size(21);
+ line-height: 27px;
}
}
-@mixin h5 {
- @include font-size(12);
+@mixin heading-sm {
+ @include font-size(24);
@include primary-font(700);
- line-height: 25px;
- letter-spacing: 0;
+ line-height: 31px;
- @include tablet-up {
- @include font-size(16);
- letter-spacing: 0;
- line-height: 21px;
+ @include tablet-down {
+ @include font-size(19.2);
+ line-height: 24px;
}
}
+@mixin heading-xs {
+ @include font-size(20);
+ @include primary-font(700);
+ line-height: 26px;
+}
+
+@mixin heading-xxs {
+ @include font-size(16);
+ @include primary-font(700);
+ line-height: 20px;
+}
/*-------------------------------
BODY STYLES
@@ -98,16 +107,31 @@
}
@mixin body-md {
- @include primary-font(300);
- @include font-size(12);
- letter-spacing: 0;
+ @include primary-font(500);
+ @include font-size(16);
line-height: 24px;
- @include tablet-up {
+ @include tablet-down {
@include font-size(14);
}
}
+@mixin body-md-semi-bold {
+ @include primary-font(600);
+ @include font-size(16);
+ line-height: 24px;
+
+ @include tablet-down {
+ @include font-size(14);
+ }
+}
+
+@mixin body-md-bold {
+ @include primary-font(700);
+ @include font-size(16);
+ line-height: 24px;
+}
+
@mixin body-sm {
@include font-size(12);
@include primary-font(400);
@@ -124,6 +148,15 @@
/*-------------------------------
UTILITY MIXINS
-------------------------------*/
+@mixin body-error {
+ @include font-size(12);
+ @include primary-font(400);
+ color: $color-text-reverse;
+ background-color: $color-semantic-critical;
+ padding: 14px;
+ border-radius: 12px;
+}
+
@mixin size($size) {
height: #{$size}px;
width: #{$size}px;
@@ -148,4 +181,4 @@
// Output standard non-prefixed declaration
#{$property}: $value;
-}
\ No newline at end of file
+}
diff --git a/src/styles/tools/utility.scss b/src/styles/tools/utility.scss
new file mode 100644
index 0000000..ec711bc
--- /dev/null
+++ b/src/styles/tools/utility.scss
@@ -0,0 +1,475 @@
+@use './media-queries.scss' as *;
+@use './mixins.scss' as *;
+@use '../core/variables.scss' as *;
+
+// ---------------------------------
+// Quick Typograpjhy
+// ---------------------------------
+$fontSizes: 12, 14, 16, 18, 20;
+
+@each $fontSize in $fontSizes {
+ .font-#{$fontSize} {
+ @include font-size($fontSize);
+ }
+}
+
+// Body Text
+.body-md {
+ @include body-md();
+}
+
+.body-md-semi-bold {
+ @include body-md-semi-bold();
+}
+
+.body-md-bold {
+ @include body-md-bold();
+}
+
+// Heading
+.heading-xxl {
+ @include heading-xxl();
+}
+
+.heading-xl {
+ @include heading-xl();
+}
+
+.heading-lg {
+ @include heading-lg();
+}
+
+.heading-md {
+ @include heading-md();
+}
+
+.heading-sm {
+ @include heading-sm();
+}
+
+.heading-xs {
+ @include heading-xs();
+}
+
+.heading-xxs {
+ @include heading-xxs();
+}
+
+.capitalize {
+ text-transform: capitalize;
+}
+
+.body-error {
+ @include body-error();
+}
+
+// ---------------------------------
+// Quick Media-Q
+// ---------------------------------
+.no-mobile {
+ @include mobile-down {
+ display: none !important;
+ }
+}
+
+// ---------------------------------
+// Colors
+// ---------------------------------
+.color-text-main {
+ color: $color-text-main;
+}
+
+// ---------------------------------
+// Visibility
+// ---------------------------------
+
+.hidden {
+ display: none !important;
+}
+
+.hidden-mobile-only {
+ @include mobile-only {
+ display: none !important;
+ }
+}
+
+.hidden-tablet-up {
+ @include tablet-up {
+ display: none !important;
+ }
+}
+
+.hidden-tablet-only {
+ @include tablet-only {
+ display: none !important;
+ }
+}
+
+.hidden-desktop-up {
+ @include desktop-up {
+ display: none !important;
+ }
+}
+
+.hidden-desktop-only {
+ @include desktop-only {
+ display: none !important;
+ }
+}
+
+.hidden-hd-up {
+ @include hd-up {
+ display: none !important;
+ }
+}
+
+// ---------------------------------
+// Misc
+// ---------------------------------
+
+.sr-only {
+ border: 0 !important;
+ clip: rect(1px, 1px, 1px, 1px) !important;
+ -webkit-clip-path: inset(50%) !important;
+ clip-path: inset(50%) !important;
+ height: 1px !important;
+ margin: -1px !important;
+ overflow: hidden !important;
+ padding: 0 !important;
+ position: absolute !important;
+ width: 1px !important;
+ white-space: nowrap !important;
+}
+
+.clear-button {
+ cursor: pointer;
+ border: none;
+ background-color: transparent;
+ display: inline-block;
+ margin: 0;
+ padding: 0;
+}
+
+.block {
+ display: block;
+}
+
+.pointer {
+ cursor: pointer;
+}
+
+.no-link {
+ &,
+ &:hover {
+ text-decoration: none;
+ color: inherit;
+ }
+}
+
+.overflow-x-hidden {
+ overflow-x: hidden;
+}
+
+.text-center {
+ text-align: center;
+}
+
+.text-right {
+ text-align: right;
+}
+
+.text-left {
+ text-align: left;
+}
+
+.uppercase {
+ text-transform: uppercase;
+}
+
+.title-case {
+ text-transform: capitalize;
+}
+
+.u-left-absolute {
+ position: absolute;
+ left: 0;
+}
+
+.u-right-absolute {
+ position: absolute;
+ right: 0;
+}
+
+.left-absolute {
+ position: absolute;
+ left: 0;
+}
+
+.right-absolute {
+ position: absolute;
+ right: 0;
+}
+
+.width-100 {
+ width: 100%;
+}
+
+.content-box {
+ &,
+ & * {
+ box-sizing: content-box;
+ }
+}
+
+.button-wrapper {
+ border: 0;
+ background: transparent;
+ padding: 0;
+}
+
+// ---------------------------------
+// Layout
+// ---------------------------------
+
+// Create Size Value Array
+$start: 0;
+$end: 100;
+$array: '';
+$unit: 'px';
+
+@for $i from $start + 1 through $end {
+ $array: append($array, $i, comma);
+ $array: set-nth($array, 1, $start);
+}
+
+@each $size in $array {
+ /**
+ PADDING
+ **/
+
+ // Padding: General
+ .p-#{$size} {
+ padding: #{$size}#{$unit};
+ &-dt {
+ @include mobile-up {
+ padding: #{$size}#{$unit};
+ }
+ }
+ &-mb {
+ @include mobile-down {
+ padding: #{$size}#{$unit};
+ }
+ }
+ }
+
+ // Padding: Horizontal
+ .px-#{$size} {
+ padding-left: #{$size}#{$unit};
+ padding-right: #{$size}#{$unit};
+ &-dt {
+ @include mobile-up {
+ padding-left: #{$size}#{$unit};
+ padding-right: #{$size}#{$unit};
+ }
+ }
+ &-mb {
+ @include mobile-down {
+ padding-left: #{$size}#{$unit};
+ padding-right: #{$size}#{$unit};
+ }
+ }
+ }
+
+ // Padding: Vertical
+ .py-#{$size} {
+ padding-top: #{$size}#{$unit};
+ padding-bottom: #{$size}#{$unit};
+ &-dt {
+ @include mobile-up {
+ padding-top: #{$size}#{$unit};
+ padding-bottom: #{$size}#{$unit};
+ }
+ }
+ &-mb {
+ @include mobile-down {
+ padding-top: #{$size}#{$unit};
+ padding-bottom: #{$size}#{$unit};
+ }
+ }
+ }
+
+ // Padding: Top
+ .pt-#{$size} {
+ padding-top: #{$size}#{$unit};
+ &-dt {
+ @include mobile-up {
+ padding-top: #{$size}#{$unit};
+ }
+ }
+ &-mb {
+ @include mobile-down {
+ padding-top: #{$size}#{$unit};
+ }
+ }
+ }
+
+ // Padding: Top
+ .pb-#{$size} {
+ padding-bottom: #{$size}#{$unit};
+ &-dt {
+ @include mobile-up {
+ padding-bottom: #{$size}#{$unit};
+ }
+ }
+ &-mb {
+ @include mobile-down {
+ padding-bottom: #{$size}#{$unit};
+ }
+ }
+ }
+
+ // Margin: Right
+ .pr-#{$size} {
+ padding-right: #{$size}#{$unit};
+ &-dt {
+ @include mobile-up {
+ padding-right: #{$size}#{$unit};
+ }
+ }
+ &-mb {
+ @include mobile-down {
+ padding-right: #{$size}#{$unit};
+ }
+ }
+ }
+
+ // Margin: Left
+ .pl-#{$size} {
+ padding-left: #{$size}#{$unit};
+ &-dt {
+ @include mobile-up {
+ padding-left: #{$size}#{$unit};
+ }
+ }
+ &-mb {
+ @include mobile-down {
+ padding-left: #{$size}#{$unit};
+ }
+ }
+ }
+
+ /**
+ MARGIN
+ **/
+
+ // Margin: General
+ .m-#{$size} {
+ margin: #{$size}#{$unit};
+ &-dt {
+ @include mobile-up {
+ margin: #{$size}#{$unit};
+ }
+ }
+ &-mb {
+ @include mobile-down {
+ margin: #{$size}#{$unit};
+ }
+ }
+ }
+
+ // Margin: Horizontal
+ .mx-#{$size} {
+ margin-left: #{$size}#{$unit};
+ margin-right: #{$size}#{$unit};
+ &-dt {
+ @include mobile-up {
+ margin-left: #{$size}#{$unit};
+ margin-right: #{$size}#{$unit};
+ }
+ }
+ &-mb {
+ @include mobile-down {
+ margin-left: #{$size}#{$unit};
+ margin-right: #{$size}#{$unit};
+ }
+ }
+ }
+
+ // Margin: Vertical
+ .my-#{$size} {
+ margin-top: #{$size}#{$unit};
+ margin-bottom: #{$size}#{$unit};
+ &-dt {
+ @include mobile-up {
+ margin-top: #{$size}#{$unit};
+ margin-bottom: #{$size}#{$unit};
+ }
+ }
+ &-mb {
+ @include mobile-down {
+ margin-top: #{$size}#{$unit};
+ margin-bottom: #{$size}#{$unit};
+ }
+ }
+ }
+
+ // Margin: Top
+ .mt-#{$size} {
+ margin-top: #{$size}#{$unit};
+ &-dt {
+ @include mobile-up {
+ margin-top: #{$size}#{$unit};
+ }
+ }
+ &-mb {
+ @include mobile-down {
+ margin-top: #{$size}#{$unit};
+ }
+ }
+ }
+
+ // Margin: Top
+ .mb-#{$size} {
+ margin-bottom: #{$size}#{$unit};
+ &-dt {
+ @include mobile-up {
+ margin-bottom: #{$size}#{$unit};
+ }
+ }
+ &-mb {
+ @include mobile-down {
+ margin-bottom: #{$size}#{$unit};
+ }
+ }
+ }
+
+ // Margin: Right
+ .mr-#{$size} {
+ margin-right: #{$size}#{$unit};
+ &-dt {
+ @include mobile-up {
+ margin-right: #{$size}#{$unit};
+ }
+ }
+ &-mb {
+ @include mobile-down {
+ margin-right: #{$size}#{$unit};
+ }
+ }
+ }
+
+ // Margin: Left
+ .ml-#{$size} {
+ margin-left: #{$size}#{$unit};
+ &-dt {
+ @include mobile-up {
+ margin-left: #{$size}#{$unit};
+ }
+ }
+ &-mb {
+ @include mobile-down {
+ margin-left: #{$size}#{$unit};
+ }
+ }
+ }
+}