1 files changed, 89 insertions, 0 deletions
diff --git a/old-apps/web-shared/src/styles/custom-style/_buttons.scss b/old-apps/web-shared/src/styles/custom-style/_buttons.scss
new file mode 100644
index 0000000..2145acc
--- /dev/null
+++ b/old-apps/web-shared/src/styles/custom-style/_buttons.scss
@@ -0,0 +1,89 @@
+@use '../base' as *;
+
+// --------------------------------
+
+// (START) Global editor code https://codyhouse.co/ds/globals/buttons
+
+// --------------------------------
+
+:root {
+  --btn-font-size: 1rem;
+  --btn-padding-x: var(--space-xs);
+  --btn-padding-y: var(--space-xxxs);
+  --btn-radius: 5px;
+}
+
+.btn {
+  background: var(--color-bg-dark);
+  color: var(--color-contrast-higher);
+  cursor: pointer;
+  font-family: var(--font-primary);
+  font-weight: 400;
+  text-decoration: none;
+  line-height: 0.8;
+  @include fontSmooth;
+  outline: none;
+
+  &:hover {
+    background: var(--color-bg-darker);
+  }
+
+  &:focus {
+    outline: 1px solid var(--color-contrast-lower);
+  }
+}
+
+// themes
+.btn--primary {
+  background: var(--color-primary);
+  color: var(--color-white);
+
+  &:hover {
+    background: var(--color-primary-light);
+    box-shadow: inset 0px 1px 0px alpha(var(--color-white), 0.15), 0px 1px 2px alpha(var(--color-primary-darker), 0.25), 0px 1px 4px alpha(var(--color-primary-darker), 0.1), 0px 3px 6px -2px alpha(var(--color-primary-darker), 0.25);
+  }
+}
+
+.btn--subtle {
+  background: var(--color-bg-lighter);
+  color: var(--color-contrast-higher);
+
+  &:hover {
+    background: var(--color-bg-light);
+  }
+}
+
+.btn--accent {
+  background: var(--color-accent);
+  color: var(--color-white);
+
+  &:hover {
+    background: var(--color-accent-light);
+    box-shadow: inset 0px 1px 0px alpha(var(--color-white), 0.15), 0px 1px 2px alpha(var(--color-accent-darker), 0.25), 0px 1px 4px alpha(var(--color-accent-darker), 0.1), 0px 3px 6px -2px alpha(var(--color-accent-darker), 0.1);
+  }
+}
+
+// feedback
+.btn--disabled, .btn[disabled], .btn[readonly] {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+// size
+.btn--sm {
+  font-size: 0.8rem;
+}
+
+.btn--md {
+  font-size: 1.2rem;
+}
+
+.btn--lg {
+  font-size: 1.4rem;
+}
+
+// --------------------------------
+
+// (END) Global editor code
+
+// --------------------------------
+\ No newline at end of file