feat: Initial after clean slate

8 files changed, 546 insertions, 0 deletions

diff --git a/apps/web-shared/src/styles/custom-style/_buttons.scss b/apps/web-shared/src/styles/custom-style/_buttons.scss
new file mode 100644
index 0000000..e396f8d
--- /dev/null
+++ b/apps/web-shared/src/styles/custom-style/_buttons.scss
@@ -0,0 +1,111 @@
+@use '../base' as *;
+
+// --------------------------------
+
+// (START) Global editor code https://codyhouse.co/ds/globals/buttons
+
+// --------------------------------
+
+:root {
+  --btn-font-size: 1em;
+  --btn-padding-x: var(--space-xxs);
+  --btn-padding-y: var(--space-xxxs);
+  --btn-radius: var(--radius-sm);
+}
+
+.btn {
+  background: var(--color-bg-dark);
+  color: var(--color-contrast-higher);
+  cursor: pointer;
+  text-decoration: none;
+  line-height: 1.2;
+  @include fontSmooth;
+  will-change: transform;
+
+  &:focus {
+    box-shadow: 0px 0px 0px 2px alpha(var(--color-contrast-higher), 0.15);
+    outline: none;
+  }
+}
+
+.btn--link {
+  @include reset;
+  color: inherit;
+  cursor: pointer;
+  text-decoration: none;
+
+  &:hover {
+    color: var(--color-primary);
+  }
+}
+
+// themes
+.btn--primary {
+  background: var(--color-primary);
+  color: var(--color-white);
+  box-shadow: inset 0px 1px 0px alpha(var(--color-white), 0.15), var(--shadow-xs);
+
+  &:hover {
+    background: var(--color-primary-light);
+    box-shadow: inset 0px 1px 0px alpha(var(--color-white), 0.15), var(--shadow-sm);
+  }
+
+  &:focus {
+    box-shadow: inset 0px 1px 0px alpha(var(--color-white), 0.15), 0px 0px 0px 2px alpha(var(--color-primary), 0.2);
+  }
+}
+
+.btn--subtle {
+  background: var(--color-bg-light);
+  color: var(--color-contrast-higher);
+  box-shadow: inset 0px 0px 0px 1px var(--color-contrast-lower), var(--shadow-xs);
+
+  &:hover {
+    background: var(--color-bg-lighter);
+    box-shadow: inset 0px 0px 0px 1px var(--color-contrast-lower), var(--shadow-sm);
+  }
+
+  &:focus {
+    box-shadow: inset 0px 0px 0px 1px var(--color-contrast-lower), 0px 0px 0px 2px alpha(var(--color-contrast-higher), 0.05);
+  }
+}
+
+.btn--accent {
+  background: var(--color-accent);
+  color: var(--color-white);
+  box-shadow: inset 0px 1px 0px alpha(var(--color-white), 0.15), var(--shadow-xs);
+
+  &:hover {
+    background: var(--color-accent-light);
+    box-shadow: inset 0px 1px 0px alpha(var(--color-white), 0.15), var(--shadow-sm);
+  }
+
+  &:focus {
+    box-shadow: inset 0px 1px 0px alpha(var(--color-white), 0.15), 0px 0px 0px 2px alpha(var(--color-accent), 0.2);
+  }
+}
+
+// feedback
+.btn--disabled, .btn[disabled], .btn[readonly] {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+// size
+.btn--sm {
+  font-size: 0.8em;
+}
+
+.btn--md {
+  font-size: 1.2em;
+}
+
+.btn--lg {
+  font-size: 1.4em;
+}
+
+// --------------------------------
+
+// (END) Global editor code
+
+// --------------------------------
diff --git a/apps/web-shared/src/styles/custom-style/_colors.scss b/apps/web-shared/src/styles/custom-style/_colors.scss
new file mode 100644
index 0000000..76d3fa6
--- /dev/null
+++ b/apps/web-shared/src/styles/custom-style/_colors.scss
@@ -0,0 +1,119 @@
+@use '../base' as *;
+
+// --------------------------------
+
+// (START) Global editor code https://codyhouse.co/ds/globals/colors
+
+// --------------------------------
+
+:root, [data-theme="default"] {
+  // main
+  @include defineColorHSL(--color-primary-darker, 250, 84%, 38%);
+  @include defineColorHSL(--color-primary-dark, 250, 84%, 46%);
+  @include defineColorHSL(--color-primary, 250, 84%, 54%);
+  @include defineColorHSL(--color-primary-light, 250, 84%, 60%);
+  @include defineColorHSL(--color-primary-lighter, 250, 84%, 67%);
+
+  @include defineColorHSL(--color-accent-darker, 342, 89%, 38%);
+  @include defineColorHSL(--color-accent-dark, 342, 89%, 43%);
+  @include defineColorHSL(--color-accent, 342, 89%, 48%);
+  @include defineColorHSL(--color-accent-light, 342, 89%, 56%);
+  @include defineColorHSL(--color-accent-lighter, 342, 89%, 62%);
+
+  @include defineColorHSL(--color-black, 204, 28%, 7%);
+  @include defineColorHSL(--color-white, 0, 0%, 100%);
+
+  // feedback
+  @include defineColorHSL(--color-warning-darker, 46, 100%, 47%);
+  @include defineColorHSL(--color-warning-dark, 46, 100%, 50%);
+  @include defineColorHSL(--color-warning, 46, 100%, 61%);
+  @include defineColorHSL(--color-warning-light, 46, 100%, 71%);
+  @include defineColorHSL(--color-warning-lighter, 46, 100%, 80%);
+
+  @include defineColorHSL(--color-success-darker, 122, 50%, 47%);
+  @include defineColorHSL(--color-success-dark, 122, 50%, 52%);
+  @include defineColorHSL(--color-success, 122, 50%, 60%);
+  @include defineColorHSL(--color-success-light, 122, 50%, 69%);
+  @include defineColorHSL(--color-success-lighter, 122, 50%, 76%);
+
+  @include defineColorHSL(--color-error-darker, 342, 89%, 38%);
+  @include defineColorHSL(--color-error-dark, 342, 89%, 43%);
+  @include defineColorHSL(--color-error, 342, 89%, 48%);
+  @include defineColorHSL(--color-error-light, 342, 89%, 56%);
+  @include defineColorHSL(--color-error-lighter, 342, 89%, 62%);
+
+  // background
+  @include defineColorHSL(--color-bg-darker, 210, 4%, 89%);
+  @include defineColorHSL(--color-bg-dark, 180, 3%, 94%);
+  @include defineColorHSL(--color-bg, 210, 17%, 98%);
+  @include defineColorHSL(--color-bg-light, 180, 3%, 100%);
+  @include defineColorHSL(--color-bg-lighter, 210, 4%, 100%);
+
+  // color contrasts
+  @include defineColorHSL(--color-contrast-lower, 180, 1%, 84%);
+  @include defineColorHSL(--color-contrast-low, 210, 2%, 64%);
+  @include defineColorHSL(--color-contrast-medium, 204, 2%, 46%);
+  @include defineColorHSL(--color-contrast-high, 210, 7%, 21%);
+  @include defineColorHSL(--color-contrast-higher, 204, 28%, 7%);
+}
+
+[data-theme="dark"] {
+  // main
+  @include defineColorHSL(--color-primary-darker, 250, 93%, 57%);
+  @include defineColorHSL(--color-primary-dark, 250, 93%, 61%);
+  @include defineColorHSL(--color-primary, 250, 93%, 65%);
+  @include defineColorHSL(--color-primary-light, 250, 93%, 69%);
+  @include defineColorHSL(--color-primary-lighter, 250, 93%, 72%);
+
+  @include defineColorHSL(--color-accent-darker, 342, 92%, 41%);
+  @include defineColorHSL(--color-accent-dark, 342, 92%, 47%);
+  @include defineColorHSL(--color-accent, 342, 92%, 54%);
+  @include defineColorHSL(--color-accent-light, 342, 92%, 60%);
+  @include defineColorHSL(--color-accent-lighter, 342, 92%, 65%);
+
+  @include defineColorHSL(--color-black, 204, 28%, 7%);
+  @include defineColorHSL(--color-white, 0, 0%, 100%);
+
+  // feedback
+  @include defineColorHSL(--color-warning-darker, 46, 100%, 47%);
+  @include defineColorHSL(--color-warning-dark, 46, 100%, 50%);
+  @include defineColorHSL(--color-warning, 46, 100%, 61%);
+  @include defineColorHSL(--color-warning-light, 46, 100%, 71%);
+  @include defineColorHSL(--color-warning-lighter, 46, 100%, 80%);
+
+  @include defineColorHSL(--color-success-darker, 122, 50%, 47%);
+  @include defineColorHSL(--color-success-dark, 122, 50%, 52%);
+  @include defineColorHSL(--color-success, 122, 50%, 60%);
+  @include defineColorHSL(--color-success-light, 122, 50%, 69%);
+  @include defineColorHSL(--color-success-lighter, 122, 50%, 76%);
+
+  @include defineColorHSL(--color-error-darker, 342, 92%, 41%);
+  @include defineColorHSL(--color-error-dark, 342, 92%, 47%);
+  @include defineColorHSL(--color-error, 342, 92%, 54%);
+  @include defineColorHSL(--color-error-light, 342, 92%, 60%);
+  @include defineColorHSL(--color-error-lighter, 342, 92%, 65%);
+
+  // background
+  @include defineColorHSL(--color-bg-darker, 204, 15%, 6%);
+  @include defineColorHSL(--color-bg-dark, 203, 18%, 9%);
+  @include defineColorHSL(--color-bg, 203, 24%, 13%);
+  @include defineColorHSL(--color-bg-light, 203, 18%, 17%);
+  @include defineColorHSL(--color-bg-lighter, 204, 15%, 20%);
+
+  // color contrasts
+  @include defineColorHSL(--color-contrast-lower, 208, 12%, 24%);
+  @include defineColorHSL(--color-contrast-low, 208, 6%, 40%);
+  @include defineColorHSL(--color-contrast-medium, 213, 5%, 56%);
+  @include defineColorHSL(--color-contrast-high, 223, 8%, 82%);
+  @include defineColorHSL(--color-contrast-higher, 240, 100%, 99%);
+
+  // font rendering
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+// --------------------------------
+
+// (END) Global editor code
+
+// --------------------------------
diff --git a/apps/web-shared/src/styles/custom-style/_forms.scss b/apps/web-shared/src/styles/custom-style/_forms.scss
new file mode 100644
index 0000000..0048941
--- /dev/null
+++ b/apps/web-shared/src/styles/custom-style/_forms.scss
@@ -0,0 +1,56 @@
+@use '../base' as *;
+
+// --------------------------------
+
+// (START) Global editor code https://codyhouse.co/ds/globals/forms
+
+// --------------------------------
+
+:root {
+  --form-control-font-size: 1em;
+  --form-control-padding-x: var(--space-xs);
+  --form-control-padding-y: var(--space-xxs);
+  --form-control-radius: var(--radius-sm);
+}
+
+.form-control {
+  background: var(--color-bg-dark);
+  line-height: 1.2;
+  box-shadow: inset 0 0 0 1px var(--color-contrast-lower);
+
+  &::placeholder {
+    opacity: 1;
+    color: var(--color-contrast-low);
+  }
+
+  &:focus {
+    background: var(--color-bg);
+    box-shadow: inset 0 0 0 1px alpha(var(--color-contrast-lower), 0), 0px 0px 0px 1px var(--color-primary);
+    outline: none;
+  }
+}
+
+.form-control--disabled, .form-control[disabled], .form-control[readonly] {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.form-control[aria-invalid="true"], .form-control.form-control--error {
+  box-shadow: inset 0 0 0 1px alpha(var(--color-contrast-lower), 0), 0px 0px 0px 2px var(--color-error);
+
+  &:focus {
+    box-shadow: inset 0 0 0 1px alpha(var(--color-contrast-lower), 0), 0px 0px 0px 2px var(--color-error), var(--shadow-sm);
+  }
+}
+
+.form-legend {
+}
+
+.form-label {
+}
+
+// --------------------------------
+
+// (END) Global editor code
+
+// --------------------------------
diff --git a/apps/web-shared/src/styles/custom-style/_icons.scss b/apps/web-shared/src/styles/custom-style/_icons.scss
new file mode 100644
index 0000000..a9fcb46
--- /dev/null
+++ b/apps/web-shared/src/styles/custom-style/_icons.scss
@@ -0,0 +1,19 @@
+@use '../base' as *;
+
+:root {
+  // size - 👇 uncomment to modify default icon sizes
+  // --icon-xxxs: 8px;
+  // --icon-xxs:  12px;
+  // --icon-xs:   16px;
+  // --icon-sm:   24px;
+  // --icon-md:   32px;
+  // --icon-lg:   48px;
+  // --icon-xl:   64px;
+  // --icon-xxl:  96px;
+  // --icon-xxxl: 128px;
+}
+
+.icon {
+  // 👇 include the font-family declaration here if you are using an icon font
+  // font-family: 'fontName';
+}
\ No newline at end of file
diff --git a/apps/web-shared/src/styles/custom-style/_shared-styles.scss b/apps/web-shared/src/styles/custom-style/_shared-styles.scss
new file mode 100644
index 0000000..e9a32b8
--- /dev/null
+++ b/apps/web-shared/src/styles/custom-style/_shared-styles.scss
@@ -0,0 +1,59 @@
+@use '../base' as *;
+
+:root {
+  --radius: 0.25em; // border radius base size
+  --radius-sm: calc(var(--radius) / 2);
+  --radius-md: var(--radius);
+  --radius-lg: calc(var(--radius) * 2);
+  --shadow-xs: 0;
+  --shadow-sm: 0;
+  --shadow-md: 0;
+  --shadow-lg: 0;
+  --shadow-xl: 0;
+}
+
+// --------------------------------
+
+// (START) Global editor code https://codyhouse.co/ds/globals/shared-styles
+
+// --------------------------------
+
+.hover\:reduce-opacity {
+  opacity: 1;
+
+  &:hover {
+    opacity: 0.8;
+  }
+}
+
+.hover\:scale {
+
+  &:hover {
+    transform: scale(1.1);
+  }
+}
+
+.hover\:elevate {
+  box-shadow: var(--shadow-sm);
+
+  &:hover {
+    box-shadow: var(--shadow-md);
+  }
+}
+
+// text styles
+.link-subtle {
+  color: inherit;
+  cursor: pointer;
+  text-decoration: none;
+
+  &:hover {
+    color: var(--color-primary);
+  }
+}
+
+// --------------------------------
+
+// (END) Global editor code
+
+// --------------------------------
diff --git a/apps/web-shared/src/styles/custom-style/_spacing.scss b/apps/web-shared/src/styles/custom-style/_spacing.scss
new file mode 100644
index 0000000..56cd451
--- /dev/null
+++ b/apps/web-shared/src/styles/custom-style/_spacing.scss
@@ -0,0 +1,49 @@
+@use '../base' as *;
+
+// --------------------------------
+
+// (START) Global editor code https://codyhouse.co/ds/globals/spacing
+
+// --------------------------------
+
+// 👇 uncomment to modify default spacing scale
+// :root {
+//   --space-unit:  1rem;
+// }
+
+ :root, * {
+   --space-xxxxs: calc(0.125 * var(--space-unit)); 
+   --space-xxxs:  calc(0.25 * var(--space-unit));
+   --space-xxs:   calc(0.375 * var(--space-unit));
+   --space-xs:    calc(0.5 * var(--space-unit));
+   --space-sm:    calc(0.75 * var(--space-unit));
+   --space-md:    calc(1.25 * var(--space-unit));
+   --space-lg:    calc(2 * var(--space-unit));
+   --space-xl:    calc(3.25 * var(--space-unit));
+   --space-xxl:   calc(5.25 * var(--space-unit));
+   --space-xxxl:  calc(8.5 * var(--space-unit));
+   --space-xxxxl: calc(13.75 * var(--space-unit));
+   --component-padding: var(--space-sm);
+ }
+
+@include breakpoint(md) {
+  :root, * {
+    --space-xxxxs: calc(0.1875 * var(--space-unit));
+    --space-xxxs: calc(0.375 * var(--space-unit));
+    --space-xxs: calc(0.5625 * var(--space-unit));
+    --space-xs: calc(0.75 * var(--space-unit));
+    --space-sm: calc(1.125 * var(--space-unit));
+    --space-md: calc(2 * var(--space-unit));
+    --space-lg: calc(3.125 * var(--space-unit));
+    --space-xl: calc(5.125 * var(--space-unit));
+    --space-xxl: calc(8.25 * var(--space-unit));
+    --space-xxxl: calc(13.25 * var(--space-unit));
+    --space-xxxxl: calc(21.5 * var(--space-unit));
+  }
+}
+
+// --------------------------------
+
+// (END) Global editor code
+
+// --------------------------------
diff --git a/apps/web-shared/src/styles/custom-style/_typography.scss b/apps/web-shared/src/styles/custom-style/_typography.scss
new file mode 100644
index 0000000..d0bb431
--- /dev/null
+++ b/apps/web-shared/src/styles/custom-style/_typography.scss
@@ -0,0 +1,92 @@
+@use '../base' as *;
+
+// --------------------------------
+
+// (START) Global editor code https://codyhouse.co/ds/globals/typography
+
+// --------------------------------
+
+:root {
+  // font family
+  //--font-primary: Inter, system-ui, sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
+
+  // font size
+  --text-base-size: 1.25rem; // body font-size
+  --text-scale-ratio: 1.1; // multiplier used to generate the type scale values 👇
+  
+  // line-height
+  --body-line-height: 1.2;
+  --heading-line-height: 1.34;
+  
+  // capital letters - used in combo with the lhCrop mixin
+  --font-primary-capital-letter: 1;
+
+  // unit - don't modify unless you want to change the typography unit (e.g., from Rem to Em units)
+  --text-unit: var(--text-base-size); // if Em units → --text-unit: var(--text-base-size);
+}
+
+:root, * {
+  --text-xs: calc((var(--text-unit) / var(--text-scale-ratio)) / var(--text-scale-ratio));
+  --text-sm: calc(var(--text-xs) * var(--text-scale-ratio));
+  --text-md: calc(var(--text-sm) * var(--text-scale-ratio) * var(--text-scale-ratio));
+  --text-lg: calc(var(--text-md) * var(--text-scale-ratio));
+  --text-xl: calc(var(--text-lg) * var(--text-scale-ratio));
+  --text-xxl: calc(var(--text-xl) * var(--text-scale-ratio));
+  --text-xxxl: calc(var(--text-xxl) * var(--text-scale-ratio));
+  --text-xxxxl: calc(var(--text-xxxl) * var(--text-scale-ratio));
+}
+
+body {
+  font-family: var(--font-primary);
+}
+
+h1, h2, h3, h4 {
+  font-family: var(--font-primary);
+  --heading-font-weight: 600;
+}
+
+// font family
+.font-primary { font-family: var(--font-primary); }
+
+// --------------------------------
+
+// (END) Global editor code
+
+// --------------------------------
+
+// link style
+a, .link {}
+
+mark {
+  background-color: alpha(var(--color-accent), 0.2);
+  color: inherit;
+}
+
+.text-component {
+  --text-unit: 1em;
+  --space-unit: 1em;
+  --line-height-multiplier: 1;
+  --text-space-y-multiplier: 1;
+
+  blockquote {
+    padding-left: 1em;
+    border-left: 4px solid var(--color-contrast-lower);
+    font-style: italic;
+  }
+
+  hr {
+    background: var(--color-contrast-lower);
+    height: 1px;
+  }
+
+  figcaption {
+    font-size: var(--text-sm);
+    color: var(--color-contrast-low);
+  }
+}
+
+.article { // e.g., blog posts
+  --body-line-height: 1.58; // set body line-height
+  --text-space-y-multiplier: 1.2; // control vertical spacing
+}
diff --git a/apps/web-shared/src/styles/custom-style/_util.scss b/apps/web-shared/src/styles/custom-style/_util.scss
new file mode 100644
index 0000000..5677630
--- /dev/null
+++ b/apps/web-shared/src/styles/custom-style/_util.scss
@@ -0,0 +1,41 @@
+@use '../base' as *;
+
+// --------------------------------
+
+// How to create custom utility classes 👇
+
+// --------------------------------
+
+.border-none {
+  border: none !important;
+}
+
+@each $breakpoint, $value in $breakpoints {
+  @include breakpoint(#{$breakpoint}) {
+    .border-none\@#{$breakpoint} {
+      border: none !important;
+    }
+  }
+}
+
+.left-unset {
+  left: unset !important;
+}
+
+.cursor-wait {
+  cursor: wait !important;
+}
+
+.bg-error-lighter\@hover {
+  &:hover,
+  &:active {
+    background-color: var(--color-error-lighter) !important;
+  }
+}
+
+.color-white\@hover {
+  &:hover,
+  &:active {
+    color: var(--color-white) !important;
+  }
+}