diff options
Diffstat (limited to 'old-apps/web-shared/src/styles/custom-style')
8 files changed, 533 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 diff --git a/old-apps/web-shared/src/styles/custom-style/_colors.scss b/old-apps/web-shared/src/styles/custom-style/_colors.scss new file mode 100644 index 0000000..97b620f --- /dev/null +++ b/old-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, 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 new file mode 100644 index 0000000..871e405 --- /dev/null +++ b/old-apps/web-shared/src/styles/custom-style/_forms.scss @@ -0,0 +1,58 @@ +@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 new file mode 100644 index 0000000..a9fcb46 --- /dev/null +++ b/old-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/old-apps/web-shared/src/styles/custom-style/_shared-styles.scss b/old-apps/web-shared/src/styles/custom-style/_shared-styles.scss new file mode 100644 index 0000000..313fc69 --- /dev/null +++ b/old-apps/web-shared/src/styles/custom-style/_shared-styles.scss @@ -0,0 +1,70 @@ +@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 new file mode 100644 index 0000000..d78d897 --- /dev/null +++ b/old-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-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 new file mode 100644 index 0000000..7fa98c5 --- /dev/null +++ b/old-apps/web-shared/src/styles/custom-style/_typography.scss @@ -0,0 +1,95 @@ +@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 new file mode 100644 index 0000000..4b86e73 --- /dev/null +++ b/old-apps/web-shared/src/styles/custom-style/_util.scss @@ -0,0 +1,34 @@ +@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 |