diff options
Diffstat (limited to 'old-apps/web-shared/src/styles/custom-style')
8 files changed, 0 insertions, 533 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 deleted file mode 100644 index 2145acc..0000000 --- a/old-apps/web-shared/src/styles/custom-style/_buttons.scss +++ /dev/null @@ -1,89 +0,0 @@ -@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 diff --git a/old-apps/web-shared/src/styles/custom-style/_colors.scss b/old-apps/web-shared/src/styles/custom-style/_colors.scss deleted file mode 100644 index 97b620f..0000000 --- a/old-apps/web-shared/src/styles/custom-style/_colors.scss +++ /dev/null @@ -1,119 +0,0 @@ -@use '../base' as *; - -// -------------------------------- - -// (START) Global editor code https://codyhouse.co/ds/globals/colors - -// -------------------------------- - -:root, [data-theme="default"] { - // main - @include defineColorHSL(--color-primary-darker, 210, 92%, 32%); - @include defineColorHSL(--color-primary-dark, 210, 92%, 38%); - @include defineColorHSL(--color-primary, 210, 92%, 44%); - @include defineColorHSL(--color-primary-light, 210, 92%, 50%); - @include defineColorHSL(--color-primary-lighter, 210, 92%, 56%); - - @include defineColorHSL(--color-accent-darker, 350, 47%, 30%); - @include defineColorHSL(--color-accent-dark, 350, 47%, 36%); - @include defineColorHSL(--color-accent, 350, 47%, 42%); - @include defineColorHSL(--color-accent-light, 350, 47%, 48%); - @include defineColorHSL(--color-accent-lighter, 350, 47%, 54%); - - @include defineColorHSL(--color-black, 0, 0%, 10%); - @include defineColorHSL(--color-white, 0, 0%, 100%); - - // feedback - @include defineColorHSL(--color-warning-darker, 25, 75%, 60%); - @include defineColorHSL(--color-warning-dark, 25, 75%, 66%); - @include defineColorHSL(--color-warning, 25, 75%, 72%); - @include defineColorHSL(--color-warning-light, 25, 75%, 78%); - @include defineColorHSL(--color-warning-lighter, 25, 75%, 84%); - - @include defineColorHSL(--color-success-darker, 143, 45%, 59%); - @include defineColorHSL(--color-success-dark, 143, 45%, 65%); - @include defineColorHSL(--color-success, 143, 45%, 71%); - @include defineColorHSL(--color-success-light, 143, 45%, 77%); - @include defineColorHSL(--color-success-lighter, 143, 45%, 83%); - - @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, 240, 2%, 90%); - @include defineColorHSL(--color-bg-dark, 240, 3%, 94%); - @include defineColorHSL(--color-bg, 0, 0%, 100%); - @include defineColorHSL(--color-bg-light, 240, 3%, 100%); - @include defineColorHSL(--color-bg-lighter, 240, 2%, 100%); - - // color contrasts - @include defineColorHSL(--color-contrast-lower, 240, 1%, 85%); - @include defineColorHSL(--color-contrast-low, 240, 2%, 66%); - @include defineColorHSL(--color-contrast-medium, 230, 2%, 48%); - @include defineColorHSL(--color-contrast-high, 223, 6%, 25%); - @include defineColorHSL(--color-contrast-higher, 225, 14%, 11%); -} - -[data-theme="dark"] { - // main - @include defineColorHSL(--color-primary-darker, 250, 100%, 60%); - @include defineColorHSL(--color-primary-dark, 250, 100%, 64%); - @include defineColorHSL(--color-primary, 250, 100%, 69%); - @include defineColorHSL(--color-primary-light, 250, 100%, 72%); - @include defineColorHSL(--color-primary-lighter, 250, 100%, 76%); - - @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, 230, 13%, 9%); - @include defineColorHSL(--color-white, 0, 0%, 100%); - - // feedback - @include defineColorHSL(--color-warning-darker, 35, 79%, 48%); - @include defineColorHSL(--color-warning-dark, 35, 79%, 56%); - @include defineColorHSL(--color-warning, 35, 79%, 66%); - @include defineColorHSL(--color-warning-light, 35, 79%, 74%); - @include defineColorHSL(--color-warning-lighter, 35, 79%, 82%); - - @include defineColorHSL(--color-success-darker, 170, 78%, 26%); - @include defineColorHSL(--color-success-dark, 170, 78%, 31%); - @include defineColorHSL(--color-success, 170, 78%, 36%); - @include defineColorHSL(--color-success-light, 170, 78%, 42%); - @include defineColorHSL(--color-success-lighter, 170, 78%, 47%); - - @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, 232, 7%, 8%); - @include defineColorHSL(--color-bg-dark, 233, 8%, 11%); - @include defineColorHSL(--color-bg, 232, 11%, 15%); - @include defineColorHSL(--color-bg-light, 233, 8%, 19%); - @include defineColorHSL(--color-bg-lighter, 232, 7%, 22%); - - // color contrasts - @include defineColorHSL(--color-contrast-lower, 240, 6%, 26%); - @include defineColorHSL(--color-contrast-low, 240, 3%, 41%); - @include defineColorHSL(--color-contrast-medium, 213, 3%, 57%); - @include defineColorHSL(--color-contrast-high, 240, 5%, 82%); - @include defineColorHSL(--color-contrast-higher, 240, 100%, 99%); - - // font rendering - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -// -------------------------------- - -// (END) Global editor code - -// --------------------------------
\ No newline at end of file diff --git a/old-apps/web-shared/src/styles/custom-style/_forms.scss b/old-apps/web-shared/src/styles/custom-style/_forms.scss deleted file mode 100644 index 871e405..0000000 --- a/old-apps/web-shared/src/styles/custom-style/_forms.scss +++ /dev/null @@ -1,58 +0,0 @@ -@use '../base' as *; - -// -------------------------------- - -// (START) Global editor code https://codyhouse.co/ds/globals/forms - -// -------------------------------- - -:root { - --form-control-font-size: 1rem; - --form-control-padding-x: var(--space-xs); - --form-control-padding-y: var(--space-xxs); - --form-control-radius: 3px; -} - -.form-control { - background: var(--color-bg-dark); - cursor: auto; - font-family: var(--font-primary); - font-weight: 400; - line-height: 1; - @include fontSmooth; - outline: 1px solid var(--color-contrast-high); - - &::placeholder { - opacity: 1; - color: var(--color-contrast-low); - } - - &:focus, &:focus-within { - background: var(--color-bg); - box-shadow: inset 0px 0px 0px 1px alpha(var(--color-contrast-lower), 0), 0px 0px 0px 2px var(--color-primary), 0px 1px 3px alpha(var(--color-black), 0.2); - outline: none; - } -} - -.form-control--disabled, .form-control[disabled], .form-control[readonly] { - opacity: 0.3; - cursor: not-allowed; -} - -.form-control[aria-invalid="true"], .form-control.form-control--error { - outline: 1px solid var(--color-error-dark); - - &:focus, &:focus-within { - box-shadow: inset 0px 0px 0px 1px alpha(var(--color-contrast-lower), 0), 0px 0px 0px 2px var(--color-error), 0px 1px 3px var(--color-error); - } -} - -.form-legend {} - -.form-label {} - -// -------------------------------- - -// (END) Global editor code - -// --------------------------------
\ No newline at end of file diff --git a/old-apps/web-shared/src/styles/custom-style/_icons.scss b/old-apps/web-shared/src/styles/custom-style/_icons.scss deleted file mode 100644 index a9fcb46..0000000 --- a/old-apps/web-shared/src/styles/custom-style/_icons.scss +++ /dev/null @@ -1,19 +0,0 @@ -@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/old-apps/web-shared/src/styles/custom-style/_shared-styles.scss b/old-apps/web-shared/src/styles/custom-style/_shared-styles.scss deleted file mode 100644 index 313fc69..0000000 --- a/old-apps/web-shared/src/styles/custom-style/_shared-styles.scss +++ /dev/null @@ -1,70 +0,0 @@ -@use '../base' as *; - -:root { - // radius - --radius: 0.375em; // border radius base size - // 👇 uncomment to modify default radius values - // --radius-sm: calc(var(--radius)/2); - // --radius-md: var(--radius); - // --radius-lg: calc(var(--radius)*2); - - // box shadow - 👇 uncomment to modify default shadow values - // --shadow-xs: 0 0.1px 0.3px rgba(0, 0, 0, 0.06), - // 0 1px 2px rgba(0, 0, 0, 0.12); - // --shadow-sm: 0 0.3px 0.4px rgba(0, 0, 0, 0.025), - // 0 0.9px 1.5px rgba(0, 0, 0, 0.05), - // 0 3.5px 6px rgba(0, 0, 0, 0.1); - // --shadow-md: 0 0.9px 1.5px rgba(0, 0, 0, 0.03), - // 0 3.1px 5.5px rgba(0, 0, 0, 0.08), - // 0 14px 25px rgba(0, 0, 0, 0.12); - // --shadow-lg: 0 1.2px 1.9px -1px rgba(0, 0, 0, 0.014), - // 0 3.3px 5.3px -1px rgba(0, 0, 0, 0.038), - // 0 8.5px 12.7px -1px rgba(0, 0, 0, 0.085), - // 0 30px 42px -1px rgba(0, 0, 0, 0.15); - // --shadow-xl: 0 1.5px 2.1px -6px rgba(0, 0, 0, 0.012), - // 0 3.6px 5.2px -6px rgba(0, 0, 0, 0.035), - // 0 7.3px 10.6px -6px rgba(0, 0, 0, 0.07), - // 0 16.2px 21.9px -6px rgba(0, 0, 0, 0.117), - // 0 46px 60px -6px rgba(0, 0, 0, 0.2); - // --inner-glow: inset 0 0 0.5px 1px hsla(0, 0%, 100%, 0.075); - // --inner-glow-top: inset 0 1px 0.5px hsla(0, 0%, 100%, 0.075); -} - -// -------------------------------- - -// (START) Global editor code https://codyhouse.co/ds/globals/shared-styles - -// -------------------------------- - -.hover\:reduce-opacity { - opacity: 1; - - &:hover { - opacity: 0.8; - } -} - -.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 - -// --------------------------------
\ No newline at end of file diff --git a/old-apps/web-shared/src/styles/custom-style/_spacing.scss b/old-apps/web-shared/src/styles/custom-style/_spacing.scss deleted file mode 100644 index d78d897..0000000 --- a/old-apps/web-shared/src/styles/custom-style/_spacing.scss +++ /dev/null @@ -1,49 +0,0 @@ -@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-md); -// } - -@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 - -// --------------------------------
\ No newline at end of file diff --git a/old-apps/web-shared/src/styles/custom-style/_typography.scss b/old-apps/web-shared/src/styles/custom-style/_typography.scss deleted file mode 100644 index 7fa98c5..0000000 --- a/old-apps/web-shared/src/styles/custom-style/_typography.scss +++ /dev/null @@ -1,95 +0,0 @@ -@use '../base' as *; - -// -------------------------------- - -// (START) Global editor code https://codyhouse.co/ds/globals/typography - -// -------------------------------- - -:root { - // font family - --font-primary: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; - - // font size - --text-base-size: 1rem; // body font-size - --text-scale-ratio: 1.2; // multiplier used to generate the type scale values 👇 - - // line-height - --body-line-height: 1; - --heading-line-height: 1; - - // 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: 1em; -} - -:root, * { - // type scale - --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 { - --line-height-multiplier: 1; - --text-space-y-multiplier: 1; - - > * { // use Em units - --text-unit: 1em; - --space-unit: 1em; - } - - 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 -}
\ No newline at end of file diff --git a/old-apps/web-shared/src/styles/custom-style/_util.scss b/old-apps/web-shared/src/styles/custom-style/_util.scss deleted file mode 100644 index 4b86e73..0000000 --- a/old-apps/web-shared/src/styles/custom-style/_util.scss +++ /dev/null @@ -1,34 +0,0 @@ -@use '../base' as *; - -.border-none { - border: none !important; -} - -// 👇 (optional) create responsive variations - edit only [my-util-class, property, value] -// @each $breakpoint, $value in $breakpoints { -// @include breakpoint(#{$breakpoint}) { -// .my-util-class\@#{$breakpoint} { -// property: value; -// } -// } -.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; - } -}
\ No newline at end of file |