diff --git a/app/assets/stylesheets/base/boxes.scss b/app/assets/stylesheets/base/boxes.scss index f4d1de32a..ad91ff876 100644 --- a/app/assets/stylesheets/base/boxes.scss +++ b/app/assets/stylesheets/base/boxes.scss @@ -1,49 +1,26 @@ -@import '../vars/variables'; - -// box() - generating classes for different style -// -// This mixin automates process of generating classes for different -// types of boxes: filled & outlined, each with variations -// for several levels of elevation (box-shadow). -// -// @param {object} $this Caching current parent -// @param {color} $color-1 Background color for filled variation -// @param {color} $color-2 Accent color for border & shadow -@mixin box($this: $this, $color-1: $smoke-90, $color-2: $smoke-100) { - border-color: $color-2; - - &#{$this}--filled { - background-color: $color-1; - } - - @for $i from 1 through 3 { - &#{$this + '--level-' + $i} { - box-shadow: #{pow(2, $i) + px} #{pow(2, $i) + px} 0 $color-2; - } - } -} +@import '../config/import'; .crayons-box { $this: &; // Caching current element, source: https://css-tricks.com/snippets/sass/caching-current-selector-sass/ border: 2px solid; border-radius: $br-default; - background-color: $snowflake; + background-color: var(--container-bg); - @include box($this, $smoke-90, $smoke-100); + @include box($this, var(--box), var(--box-darker)); &--danger { - @include box($this, $raspberry, $raspberry-darker); + @include box($this, var(--accent-danger), var(--accent-danger-darker)); } &--success { - @include box($this, $avocado, $avocado-darker); + @include box($this, var(--accent-success), var(--accent-success-darker)); } &--warning { - @include box($this, $peanut, $peanut-darker); + @include box($this, var(--accent-warning), var(--accent-warning-darker)); } &--info { - @include box($this, $dolphin, $dolphin-darker); + @include box($this, var(--accent-brand), var(--accent-brand-darker)); } } diff --git a/app/assets/stylesheets/base/colors.scss b/app/assets/stylesheets/base/colors.scss index a0d090a64..2fc503faa 100644 --- a/app/assets/stylesheets/base/colors.scss +++ b/app/assets/stylesheets/base/colors.scss @@ -1,4 +1,4 @@ -@import '../vars/variables'; +@import '../config/import'; // Color @include generate-classes( @@ -31,4 +31,4 @@ 'current': currentColor, ), $colors -); \ No newline at end of file +); diff --git a/app/assets/stylesheets/base/decorations.scss b/app/assets/stylesheets/base/decorations.scss index 7eada6936..df7cb0a52 100644 --- a/app/assets/stylesheets/base/decorations.scss +++ b/app/assets/stylesheets/base/decorations.scss @@ -1,4 +1,4 @@ -@import '../vars/variables'; +@import '../config/import'; // Opacity @include generate-classes( diff --git a/app/assets/stylesheets/base/flexbox.scss b/app/assets/stylesheets/base/flexbox.scss index 14f5d893c..b72e58867 100644 --- a/app/assets/stylesheets/base/flexbox.scss +++ b/app/assets/stylesheets/base/flexbox.scss @@ -1,4 +1,4 @@ -@import '../vars/variables'; +@import '../config/import'; // Flex flow @include generate-classes( diff --git a/app/assets/stylesheets/base/grid.scss b/app/assets/stylesheets/base/grid.scss index e52f30b79..db73ff1a2 100644 --- a/app/assets/stylesheets/base/grid.scss +++ b/app/assets/stylesheets/base/grid.scss @@ -1,4 +1,4 @@ -@import '../vars/variables'; +@import '../config/import'; // Gap @include generate-classes( @@ -15,15 +15,15 @@ 'grid-cols', 'grid-template-columns', ( - 'none': none, - '1': repeat(1,minmax(0,1fr)), - '2': repeat(2,minmax(0,1fr)), - '3': repeat(3,minmax(0,1fr)), - '4': repeat(4,minmax(0,1fr)), - '5': repeat(5,minmax(0,1fr)), - '6': repeat(6,minmax(0,1fr)), - '7': repeat(7,minmax(0,1fr)), - '8': repeat(8,minmax(0,1fr)), + 'none': none, + '1': repeat(1, minmax(0, 1fr)), + '2': repeat(2, minmax(0, 1fr)), + '3': repeat(3, minmax(0, 1fr)), + '4': repeat(4, minmax(0, 1fr)), + '5': repeat(5, minmax(0, 1fr)), + '6': repeat(6, minmax(0, 1fr)), + '7': repeat(7, minmax(0, 1fr)), + '8': repeat(8, minmax(0, 1fr)), ) ); @@ -32,11 +32,11 @@ 'grid-rows', 'grid-template-columns', ( - 'none': none, - '1': repeat(1,minmax(0,1fr)), - '2': repeat(2,minmax(0,1fr)), - '3': repeat(3,minmax(0,1fr)), - '4': repeat(4,minmax(0,1fr)), + 'none': none, + '1': repeat(1, minmax(0, 1fr)), + '2': repeat(2, minmax(0, 1fr)), + '3': repeat(3, minmax(0, 1fr)), + '4': repeat(4, minmax(0, 1fr)), ) ); @@ -45,9 +45,9 @@ 'grid-flow', 'grid-auto-flow', ( - 'row': row, - 'col': column, - 'row-dense': row dense, - 'col-dense': column dense, + 'row': row, + 'col': column, + 'row-dense': row dense, + 'col-dense': column dense, ) -); \ No newline at end of file +); diff --git a/app/assets/stylesheets/base/layout.scss b/app/assets/stylesheets/base/layout.scss index 4cee4fd28..9a5b9e7a9 100644 --- a/app/assets/stylesheets/base/layout.scss +++ b/app/assets/stylesheets/base/layout.scss @@ -1,4 +1,4 @@ -@import '../vars/variables'; +@import '../config/import'; // Display .hidden { @@ -47,11 +47,11 @@ // Visibility .visible { - visiblity: visible !important; + visibility: visible !important; } .invisible { - visiblity: hidden !important; + visibility: hidden !important; } // Box sizing diff --git a/app/assets/stylesheets/base/positioning.scss b/app/assets/stylesheets/base/positioning.scss index f5b9598af..be699be44 100644 --- a/app/assets/stylesheets/base/positioning.scss +++ b/app/assets/stylesheets/base/positioning.scss @@ -1,4 +1,4 @@ -@import '../vars/variables'; +@import '../config/import'; // Positions .static { @@ -192,7 +192,6 @@ ) ); - // Smooth scrolling on iOS .scrolling-touch { -webkit-overflow-scrolling: touch !important; diff --git a/app/assets/stylesheets/base/sizing.scss b/app/assets/stylesheets/base/sizing.scss index b62685728..a46d62dbb 100644 --- a/app/assets/stylesheets/base/sizing.scss +++ b/app/assets/stylesheets/base/sizing.scss @@ -1,4 +1,4 @@ -@import '../vars/variables'; +@import '../config/import'; // Width @include generate-classes( diff --git a/app/assets/stylesheets/base/spacing.scss b/app/assets/stylesheets/base/spacing.scss index 65c31f86b..3f8c6cdef 100644 --- a/app/assets/stylesheets/base/spacing.scss +++ b/app/assets/stylesheets/base/spacing.scss @@ -1,4 +1,4 @@ -@import '../vars/variables'; +@import '../config/import'; // Margin @include generate-classes( diff --git a/app/assets/stylesheets/base/typography.scss b/app/assets/stylesheets/base/typography.scss index 813a6a187..1d0789946 100644 --- a/app/assets/stylesheets/base/typography.scss +++ b/app/assets/stylesheets/base/typography.scss @@ -1,4 +1,4 @@ -@import '../vars/variables'; +@import '../config/import'; // Font family @include generate-classes( diff --git a/app/assets/stylesheets/components/avatars.scss b/app/assets/stylesheets/components/avatars.scss index e0748fa2b..ed2c35175 100644 --- a/app/assets/stylesheets/components/avatars.scss +++ b/app/assets/stylesheets/components/avatars.scss @@ -1,4 +1,4 @@ -@import '../vars/variables'; +@import '../config/import'; // avatar-logo() - Generates styles for Avatars or Logos component // @@ -29,7 +29,8 @@ &::after { content: ''; - border: 1px solid rgba($smoke-100, 0.15); + border: 1px solid var(--body-color); + opacity: 0.15; width: 100%; height: 100%; position: absolute; @@ -61,5 +62,5 @@ } } -@include avatar-logo('avatar', 100%, $smoke-60); -@include avatar-logo('logo', $br-default, $snowflake); +@include avatar-logo('avatar', 100%, var(--widget-color-tertiary)); +@include avatar-logo('logo', $br-default, var(--body-color-inverted)); diff --git a/app/assets/stylesheets/components/buttons.scss b/app/assets/stylesheets/components/buttons.scss index 40d27d1f4..f6c3cf68d 100644 --- a/app/assets/stylesheets/components/buttons.scss +++ b/app/assets/stylesheets/components/buttons.scss @@ -1,4 +1,4 @@ -@import '../vars/variables'; +@import '../config/import'; // Basic styling .crayons-btn { @@ -19,81 +19,59 @@ // Styles .crayons-btn { - background-color: $dolphin; - color: $snowflake; + background-color: var(--button-primary-bg); + color: var(--button-primary-color); &--disabled, &[disabled] { - color: rgba($snowflake, 0.8); - background-color: $dolphin-lighter; + opacity: 0.6; } &:hover { - background-color: $dolphin-darker; + background-color: var(--button-primary-bg-hover); + color: var(--button-primary-color-hover); } &--secondary { - background-color: $smoke-20; - color: $smoke-80; - - &--disabled, - &[disabled] { - color: $smoke-40; - background-color: $smoke-10; - } + background-color: var(--button-secondary-bg); + color: var(--button-secondary-color); &:hover { - color: $smoke-100; - background-color: $smoke-30; + background-color: var(--button-secondary-bg-hover); + color: var(--button-secondary-color-hover); } } &--outlined { - border: 2px solid $smoke-30; - color: $smoke-80; + padding: 0.375em 1em; background-color: transparent; - - &--disabled, - &[disabled] { - color: $smoke-40; - border-color: $smoke-20; - background-color: transparent; - } + border: 2px solid var(--button-outlined-bg); + color: var(--button-outlined-color); &:hover { - color: $smoke-100; - border-color: $smoke-40; background-color: transparent; + color: var(--button-outlined-color-hover); + border-color: var(--button-outlined-bg-hover); } } &--danger { - background-color: $raspberry; - - &--disabled, - &[disabled] { - color: rgba($snowflake, 0.8); - background-color: $raspberry-lighter; - } + background-color: var(--accent-danger); + color: var(--base-inverted); &:hover { - background-color: $raspberry-darker; + background-color: var(--accent-danger-darker); + color: var(--base-inverted); } } &--text { background-color: transparent; - color: $dolphin; - - &--disabled, - &[disabled] { - background-color: transparent; - color: $dolphin-lighter; - } + color: var(--link-brand); &:hover { background-color: transparent; - color: $dolphin-darker; + color: var(--link-brand-hover); } } } diff --git a/app/assets/stylesheets/components/dropdowns.scss b/app/assets/stylesheets/components/dropdowns.scss index 3bd443f94..aa7a46b0c 100644 --- a/app/assets/stylesheets/components/dropdowns.scss +++ b/app/assets/stylesheets/components/dropdowns.scss @@ -1,4 +1,4 @@ -@import '../vars/variables'; +@import '../config/import'; @import '../base/boxes'; %dropdown-style { diff --git a/app/assets/stylesheets/components/forms.scss b/app/assets/stylesheets/components/forms.scss index 1d8800294..a92f1b5ea 100644 --- a/app/assets/stylesheets/components/forms.scss +++ b/app/assets/stylesheets/components/forms.scss @@ -1,34 +1,29 @@ -@import '../vars/variables'; +@import '../config/import'; %form-styling { - background-color: $smoke-00; - border: 1px solid $smoke-30; + background-color: var(--form-bg); + border: 1px solid var(--form-border); + color: var(--body-color); appearance: none; + -webkit-appearance: none; border-radius: $br-default; transition: all $transition-props; &-hover { - border-color: $smoke-40; + border-color: var(--form-border-hover); } &-disabled { - color: $smoke-60; - background-color: $smoke-10; + opacity: 0.6; } &-checked { - background-color: $dolphin; - border-color: $dolphin-darker; - color: $snowflake; + background-color: var(--form-border-focus); + border-color: var(--form-border-focus); + color: var(--form-bg-focus); background-position: center center; background-repeat: no-repeat; } - - &-checked-disabled { - background-color: $dolphin-lighter; - border-color: $dolphin-lighter; - color: rgba($snowflake, 0.5); - } } // Text inputs and textareas. @@ -41,7 +36,7 @@ @extend %form-styling; &::placeholder { - color: $smoke-60; + color: var(--form-placeholder-color); } &:hover { @@ -49,9 +44,9 @@ } &:focus { - background-color: $snowflake; - border-color: $dolphin; - box-shadow: 1px 1px 0 $dolphin; + background-color: var(--form-bg-focus); + border-color: var(--form-border-focus); + box-shadow: 1px 1px 0 var(--form-border-focus); } &--disabled, @@ -94,7 +89,7 @@ &--disabled, &[disabled] { - @extend %form-styling-checked-disabled; + @extend %form-styling-disabled; } } } @@ -121,7 +116,7 @@ $this: &; &__label { - color: $smoke-90; + color: var(--label-primary); font-weight: $fw-medium; + .crayons-field__description { @@ -130,7 +125,7 @@ } &__description { - color: $smoke-60; + color: var(--label-secondary); font-size: $fs-s; font-weight: $fw-normal; // for when it's inside --label margin: 0; //todo remove @@ -149,8 +144,8 @@ transition: all $transition-props; &:hover { - background: $smoke-10; - box-shadow: 0 0 0 $su-1 $smoke-10; + background: var(--body-bg); + box-shadow: 0 0 0 $su-1 var(--body-bg); } #{$this}__label { diff --git a/app/assets/stylesheets/components/indicators.scss b/app/assets/stylesheets/components/indicators.scss index e40cea796..4ee1f0b3a 100644 --- a/app/assets/stylesheets/components/indicators.scss +++ b/app/assets/stylesheets/components/indicators.scss @@ -1,4 +1,4 @@ -@import '../vars/variables'; +@import '../config/import'; // indicator() - Generates styles for Indicators // @@ -13,7 +13,7 @@ @mixin indicator($this, $name, $color-1) { &#{'--' + $name} { background-color: $color-1; - color: $snowflake; + color: var(--body-color-inverted); &#{$this + '--outlined'} { background-color: transparent; color: $color-1; @@ -27,7 +27,7 @@ font-family: $ff-accent; font-size: $fs-xs; padding: $su-1; - background-color: $smoke-20; + background-color: var(--button-secondary-bg); text-align: center; line-height: $lh-tight; border-radius: $br-default; @@ -35,13 +35,13 @@ &--outlined { background-color: transparent; - border: 1px solid $smoke-20; - color: $smoke-80; + border: 1px solid var(--button-secondary-bg); + color: var(--button-secondary-color); } - @include indicator(&, accent, $dolphin); - @include indicator(&, critical, $raspberry); - @include indicator(&, inverted, $smoke-90); + @include indicator(&, accent, var(--accent-brand)); + @include indicator(&, critical, var(--accent-danger)); + @include indicator(&, inverted, var(--widget-color)); // Circle, no text &--bullet { diff --git a/app/assets/stylesheets/components/modals.scss b/app/assets/stylesheets/components/modals.scss index cd86adc9d..11cfaec3c 100644 --- a/app/assets/stylesheets/components/modals.scss +++ b/app/assets/stylesheets/components/modals.scss @@ -1,4 +1,4 @@ -@import '../vars/variables'; +@import '../config/import'; @import '../base/boxes'; %modal-style { diff --git a/app/assets/stylesheets/components/navigation.scss b/app/assets/stylesheets/components/navigation.scss index a9c599bf3..2f08c2622 100644 --- a/app/assets/stylesheets/components/navigation.scss +++ b/app/assets/stylesheets/components/navigation.scss @@ -1,21 +1,21 @@ -@import '../vars/variables'; +@import '../config/import'; .crayons-nav-block { display: flex; align-items: center; padding: $su-2; border-radius: $br-default; - color: $smoke-90; + color: var(--link-dimmed-color); &:hover:not(&--current) { - background: $smoke-00; - color: $smoke-100; + background: var(--link-dimmed-bg-hover); + color: var(--link-dimmed-color-hover); } &--current { font-weight: $fw-medium; - color: $smoke-100; - background: $snowflake; + background: var(--link-dimmed-bg-current); + color: var(--link-dimmed-color-current); } .crayons-icon { @@ -44,16 +44,16 @@ &__item { padding: 0 0.5em; - color: $smoke-80; + color: var(--link-dimmed-secondary-color); position: relative; display: inline-block; &:hover { - color: $smoke-100; + color: var(--link-dimmed-color-hover); } &--current { - color: $smoke-100; + color: var(--link-dimmed-color-current); font-weight: $fw-medium; &::after { @@ -63,7 +63,7 @@ bottom: -2px; height: 2px; content: ''; - background-color: $dolphin; + background-color: var(--accent-brand); } } } diff --git a/app/assets/stylesheets/components/notices.scss b/app/assets/stylesheets/components/notices.scss index 78a512c82..c6981ac8e 100644 --- a/app/assets/stylesheets/components/notices.scss +++ b/app/assets/stylesheets/components/notices.scss @@ -1,4 +1,4 @@ -@import '../vars/variables'; +@import '../config/import'; @import '../base/boxes'; %notice-style { diff --git a/app/assets/stylesheets/config/_colors.scss b/app/assets/stylesheets/config/_colors.scss new file mode 100644 index 000000000..092bcee91 --- /dev/null +++ b/app/assets/stylesheets/config/_colors.scss @@ -0,0 +1,132 @@ +//////////////////////////////////////////////////////////////////////////////////// +// Colors. ///////////////////////////////////////////////////////////////////////// +//////////////////////////////////////////////////////////////////////////////////// +// +// All --base-* and --accent-* color variables will be used to generate +// utlity-first classes (see config/import.scss & base/colors.scss for +// reference). Other color variables are more functional and define usage +// of particular colors in components and views. + +:root { + //////////////////////////////////////////////////////////////////////////////////// + // Foundamental color variables. /////////////////////////////////////////////////// + //////////////////////////////////////////////////////////////////////////////////// + + // Base + --base-100: #08090a; + --base-90: #202428; + --base-80: #363d44; + --base-70: #4d5760; + --base-60: #64707d; + --base-50: #7d8a97; + --base-40: #99a3ad; + --base-30: #b5bdc4; + --base-20: #d2d6db; + --base-10: #eef0f1; + --base-0: #f9fafa; + --base-inverted: #fff; + + // Accent colors + --accent-brand: #3b49df; + --accent-brand-darker: #1827ce; + --accent-brand-lighter: #8d95f2; + + // Success + --accent-success: #26d9ca; + --accent-success-darker: #1ab3a6; + --accent-success-lighter: #79ece2; + + // Warning + --accent-warning: #ffcf4c; + --accent-warning-darker: #f5b400; + --accent-warning-lighter: #ffe499; + + // Danger + --accent-danger: #dc1818; + --accent-danger-darker: #c20a0a; + --accent-danger-lighter: #ec5050; + + //////////////////////////////////////////////////////////////////////////////////// + // Functional color variables. ///////////////////////////////////////////////////// + //////////////////////////////////////////////////////////////////////////////////// + + // Main colors + --body-bg: var(--base-10); + --body-color: var(--base-100); + --body-color-inverted: var(--base-inverted); + + // Main content containers + --container-bg: var(--base-inverted); + --container-color: var(--base-100); + --container-color-secondary: var(--base-70); + --container-color-tertiary: var(--base-50); + + // Secondary content containers + --widget-bg: var(--base-0); + --widget-color: var(--base-90); + --widget-color-secondary: var(--base-70); + --widget-color-tertiary: var(--base-50); + --widget-headline: var(--base-100); + + // Header + --header-bg: var(--base-inverted); + --header-icons-color: var(--base-70); + --header-icons-color-hover: var(--base-100); + + // Logo + --logo-bg: var(--base-100); + --logo-color: var(--base-inverted); + + // Footer + --footer-bg: var(--base-inverted); + --footer-copy-color: var(--base-80); + --footer-copy-secondary-color: var(--base-60); + --footer-link-color: var(--base-80); + --footer-link-color-hover: var(--base-100); + + // Links in content + --link-brand-color: var(--accent-brand); + --link-brand-color-hover: var(--accent-brand-darker); + + // Greyscale links, for places where we don't want to make them use accent color + --link-dimmed-color: var(--base-90); + --link-dimmed-color-secondary: var(--base-80); + --link-dimmed-bg-hover: var(--base-0); + --link-dimmed-color-hover: var(--base-100); + --link-dimmed-bg-current: var(--base-inverted); + --link-dimmed-color-current: var(--base-100); + + // Primary buttons + --button-primary-bg: var(--accent-brand); + --button-primary-color: var(--base-0); + --button-primary-bg-hover: var(--accent-brand-darker); + --button-primary-color-hover: var(--base-0); + + // Secondary buttons + --button-secondary-bg: var(--base-20); + --button-secondary-color: var(--base-80); + --button-secondary-bg-hover: var(--base-30); + --button-secondary-color-hover: var(--base-100); + + // Outlined buttons + --button-outlined-bg: var(--base-20); + --button-outlined-color: var(--base-80); + --button-outlined-bg-hover: var(--base-30); + --button-outlined-color-hover: var(--base-100); + + // Forms + --form-bg: var(--base-0); + --form-bg-focus: var(--base-0); + --form-border: var(--base-30); + --form-border-hover: var(--base-40); + --form-border-focus: var(--accent-brand); + --form-placeholder-color: var(--base-60); + + // Form lables + --label-primary: var(--base-90); + --label-secondary: var(--base-60); + + // Default box + --box: var(--base-90); + --box-darker: var(--base-100); +} diff --git a/app/assets/stylesheets/config/_import.scss b/app/assets/stylesheets/config/_import.scss new file mode 100644 index 000000000..6f7cda3ef --- /dev/null +++ b/app/assets/stylesheets/config/_import.scss @@ -0,0 +1,225 @@ +//////////////////////////////////////////////////////////////////////////////////// +// Colors. ///////////////////////////////////////////////////////////////////////// +//////////////////////////////////////////////////////////////////////////////////// +// +// List of colors to be used to generate utility-frist classes, +// using generate-classes() function. See files from /base folder +// for reference. +// +// These colors are defined using some colors CSS variables defined +// in config/_colors.scss. We only utilize some of these variables +// for utility-classes because it doesn't make much sense to create +// utility-class for ever single variable in config/_colors.scss. + +$colors: ( + 'base-100': var(--base-100), + 'base-90': var(--base-90), + 'base-80': var(--base-80), + 'base-70': var(--base-70), + 'base-60': var(--base-60), + 'base-50': var(--base-50), + 'base-40': var(--base-40), + 'base-30': var(--base-30), + 'base-20': var(--base-20), + 'base-10': var(--base-10), + 'base-0': var(--base-0), + 'base-inverted': var(--base-inverted), + 'accent-brand': var(--accent-brand), + 'accent-brand-darker': var(--accent-brand-darker), + 'accent-brand-lighter': var(--accent-brand-lighter), + 'accent-success': var(--accent-success), + 'accent-success-darker': var(--accent-success-darker), + 'accent-success-lighter': var(--accent-success-lighter), + 'accent-warninig': var(--accent-warning), + 'accent-warninig-darker': var(--accent-warning-darker), + 'accent-warninig-lighter': var(--accent-warning-lighter), + 'accent-danger': var(--accent-danger), + 'accent-danger-darker': var(--accent-danger-darker), + 'accent-danger-lighter': var(--accent-danger-lighter), +); + +//////////////////////////////////////////////////////////////////////////////////// +// [DRAFT] Responsiveness Breakpoints. ///////////////////////////////////////////// +//////////////////////////////////////////////////////////////////////////////////// +// +// List of breakpoints for our responsivness. Right now these are not +// used anywhere. They are here as a placeholder. + +$breakpoint-s: 640px; +$breakpoint-m: 768px; +$breakpoint-l: 1024px; +$breakpoint-xl: 1280px; + +//////////////////////////////////////////////////////////////////////////////////// +// Spacing Units. ////////////////////////////////////////////////////////////////// +//////////////////////////////////////////////////////////////////////////////////// +// +// List of spacing units to use across all our components. +// • $(negaitve-)spacing-units variables are used for +// generate-classes() function. + +$su-1: 0.25rem; // 4px +$su-2: 0.5rem; // 8px +$su-3: 0.75rem; // 12px +$su-4: 1rem; // 16px +$su-5: 1.25rem; // 20px +$su-6: 1.5rem; // 24px +$su-7: 2rem; // 32px +$su-8: 3rem; // 48px +$su-9: 4rem; // 64px +$su-10: 8rem; // 128px + +//////////////////////////////////////////////////////////////////////////////////// + +$spacing-units: ( + '1': $su-1, + '2': $su-2, + '3': $su-3, + '4': $su-4, + '5': $su-5, + '6': $su-6, + '7': $su-7, + '8': $su-8, + '9': $su-9, + '10': $su-10, +); + +//////////////////////////////////////////////////////////////////////////////////// + +$negative-spacing-units: ( + '1': -$su-1, + '2': -$su-2, + '3': -$su-3, + '4': -$su-4, + '5': -$su-5, + '6': -$su-6, + '7': -$su-7, + '8': -$su-8, + '9': -$su-9, + '10': -$su-10, +); + +//////////////////////////////////////////////////////////////////////////////////// +// Border radius /////////////////////////////////////////////////////////////////// +//////////////////////////////////////////////////////////////////////////////////// + +$br-default: 3px; + +//////////////////////////////////////////////////////////////////////////////////// +// Transitions ///////////////////////////////////////////////////////////////////// +//////////////////////////////////////////////////////////////////////////////////// + +$transition-props: cubic-bezier(0.17, 0.67, 0.5, 0.71) 100ms; + +//////////////////////////////////////////////////////////////////////////////////// +// Typography. ///////////////////////////////////////////////////////////////////// +//////////////////////////////////////////////////////////////////////////////////// +// +// List of variables for typography. +// • Font families +// • Font sizes +// • Font weights +// • Line heights + +// Font families +$ff-default: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, + Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; +$ff-accent: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, + monospace; + +//////////////////////////////////////////////////////////////////////////////////// + +// Font sizes +$fs-xs: 0.75rem; // 12px +$fs-s: 0.875rem; // 14px +$fs-base: 1rem; // 16px +$fs-l: 1.125rem; // 18px +$fs-xl: 1.25rem; // 20px +$fs-2xl: 1.5rem; // 24px +$fs-3xl: 1.875rem; // 30px +$fs-4xl: 2.25rem; // 36px +$fs-5xl: 3rem; // 48px + +//////////////////////////////////////////////////////////////////////////////////// + +// Font weights +$fw-normal: 400; +$fw-medium: 500; +$fw-bold: 700; +$fw-heavy: 800; + +//////////////////////////////////////////////////////////////////////////////////// + +// Line heights +$lh-tight: 1.25; // 20px for 16px font-size +$lh-base: 1.5; // 24px for 16px font-size + +//////////////////////////////////////////////////////////////////////////////////// +// Helpers ///////////////////////////////////////////////////////////////////////// +//////////////////////////////////////////////////////////////////////////////////// +// +// Generators & functions utilized in other SCSS files. They are meant to simplify +// process of creating styles etc. + +// pow() - Raise number to the nth power +// +// @param {number} $base The base number +// @param {number} $exponents The exponent to which to raise $base + +@function pow($base, $exponents) { + $raised: 1; + + @for $i from 1 through $exponents { + $raised: $raised * $base; + } + + @return $raised; +} + +//////////////////////////////////////////////////////////////////////////////////// + +// generate-classes() +// +// Generating classes for Tailwind approach. +// +// @param {string} $prefix Prefix for utility class, for example `mr` +// @param {string || list} $properties Defines CSS property(ies) that, for example `margin-right` +// @param {list} $values-1 List of values for which we gonna generate classes +// @param {list} $values-2 Additional list of values, useful when we want to combine two lists. + +@mixin generate-classes($prefix, $properties, $values-1, $values-2: ()) { + $values: map-merge($values-1, $values-2); + @each $name, $value in $values { + .#{$prefix}-#{$name} { + @each $property in $properties { + #{$property}: $value !important; + } + } + } +} + +//////////////////////////////////////////////////////////////////////////////////// + +// box() - generating classes for different style +// +// This mixin automates process of generating classes for different +// types of boxes: filled & outlined, each with variations +// for several levels of elevation (box-shadow). +// +// @param {object} $this Caching current parent +// @param {color} $color-1 Background color for filled variation +// @param {color} $color-2 Accent color for border & shadow + +@mixin box($this: $this, $color-1: var(--box), $color-2: var(--box-darker)) { + border-color: $color-2; + + &#{$this}--filled { + background-color: $color-1; + } + + @for $i from 1 through 3 { + &#{$this + '--level-' + $i} { + box-shadow: #{pow(2, $i) + px} #{pow(2, $i) + px} 0 $color-2; + } + } +} diff --git a/app/assets/stylesheets/minimal.scss b/app/assets/stylesheets/minimal.scss index aa0c20911..79b54c4a8 100644 --- a/app/assets/stylesheets/minimal.scss +++ b/app/assets/stylesheets/minimal.scss @@ -1,3 +1,5 @@ +@import 'config/colors'; + @import 'variables'; @import 'fundamentals'; @import 'scaffolds'; diff --git a/app/assets/stylesheets/scaffolds.scss b/app/assets/stylesheets/scaffolds.scss index c2787d3d2..5a991f681 100644 --- a/app/assets/stylesheets/scaffolds.scss +++ b/app/assets/stylesheets/scaffolds.scss @@ -1,4 +1,4 @@ -@import 'vars/variables'; +@import 'config/import'; @import 'variables'; @import 'mixins'; diff --git a/app/assets/stylesheets/themes/hacker.scss b/app/assets/stylesheets/themes/hacker.scss new file mode 100644 index 000000000..42fafc8c7 --- /dev/null +++ b/app/assets/stylesheets/themes/hacker.scss @@ -0,0 +1,38 @@ +:root { + --theme-background: #0a0a0a; + --theme-color: #42ff87; + --theme-opposite-color: #0d1219; + --theme-logo-background: #42ff87; + --theme-logo-color: #0a0a0a; + --theme-code-background: #29292e; + --theme-code-color: #42ff87; + --theme-reaction-background: #202c3d; + --theme-anchor-color: #e24ec1; + --theme-secondary-color: #ebebeb; + --theme-secondary-color-border: 1px solid #222f3f; + --theme-top-bar-background: #1c1c1c; + --theme-top-bar-background-hover: #27384c; + --theme-top-bar-color: #fff; + --theme-top-bar-search-background: #0a0a0a; + --theme-top-bar-search-color: #42ff87; + --theme-top-bar-write-background: #0a0a0a; + --theme-top-bar-write-color: #42ff87; + --theme-container-background: #030303; + --theme-container-accent-background: #000f0b; + --theme-invert-image: invert(); + --theme-container-background-hover: #1c2c3f; + --theme-gradient-background: linear-gradient( + to right, + #010f06 8%, + #121a16 18%, + #010f06 33% + ); + --theme-container-color: #42ff87; + --theme-container-box-shadow: none; + --theme-container-border: 1px solid #22303f; + --theme-subtle-border: 1px solid #1f2c3a; + --theme-social-icon-invert: invert(100); + --theme-current-article-background: #1143ca; + --theme-series-article-background: #006655; + --theme-series-article-hover: #004035; +} diff --git a/app/assets/stylesheets/themes/minimal.scss b/app/assets/stylesheets/themes/minimal.scss new file mode 100644 index 000000000..4b37ef329 --- /dev/null +++ b/app/assets/stylesheets/themes/minimal.scss @@ -0,0 +1,36 @@ +:root { + --theme-background: #fcfcfc; + --theme-color: #0a0a0a; + --theme-opposite-color: #ffffff; + --theme-logo-background: #e3e5ed; + --theme-logo-color: #232426; + --theme-code-background: #f9f9f9; + --theme-code-color: #37383d; + --theme-reaction-background: #eff0f2; + --theme-anchor-color: #757ec6; + --theme-secondary-color: #505159; + --theme-secondary-color-border: 1px solid #e3e3e5; + --theme-top-bar-background: #ffffff; + --theme-top-bar-background-hover: #f9f9f9; + --theme-top-bar-color: #0a0a0a; + --theme-top-bar-search-background: #f4f5f7; + --theme-top-bar-search-color: #0a0a0a; + --theme-top-bar-write-background: #ffffff; + --theme-top-bar-write-color: #0a0a0a; + --theme-container-background: #ffffff; + --theme-container-accent-background: #f4f5f7; + --theme-invert-image: none; + --theme-container-background-hover: #efefef; + --theme-gradient-background: linear-gradient( + to right, + #f6f6f6 8%, + #f0f0f0 18%, + #f6f6f6 33% + ); + --theme-container-color: #0a0a0a; + --theme-container-box-shadow: none; + --theme-container-border: 1px solid #e3e3e5; + --theme-subtle-border: 1px solid #fcfcfc; + --theme-social-icon-color: rgba(80, 81, 89, 0); + --theme-social-icon-invert: invert(0); +} diff --git a/app/assets/stylesheets/themes/night.scss b/app/assets/stylesheets/themes/night.scss new file mode 100644 index 000000000..2c76e1b2c --- /dev/null +++ b/app/assets/stylesheets/themes/night.scss @@ -0,0 +1,39 @@ +:root { + --theme-background: #0d1219; + --theme-color: #fff; + --theme-opposite-color: #0d1219; + --theme-logo-background: #0a0a0a; + --theme-logo-color: #fff; + --theme-code-background: #29292e; + --theme-code-color: #e6db74; + --theme-reaction-background: #202c3d; + --theme-anchor-color: #17a1f6; + --theme-secondary-color: #cedae2; + --theme-secondary-color-border: 1px solid #1c283b; + --theme-top-bar-background: #1c2938; + --theme-top-bar-background-hover: #27384c; + --theme-top-bar-color: #fff; + --theme-top-bar-search-background: #424a54; + --theme-top-bar-search-color: #fff; + --theme-top-bar-write-background: #00af81; + --theme-top-bar-write-color: #fff; + --theme-container-background: #141f2d; + --theme-container-accent-background: #202c3d; + --theme-container-background-hover: #1c2c3f; + --theme-gradient-background: linear-gradient( + to right, + #293d56 8%, + #282833 18%, + #293d56 33% + ); + --theme-container-color: #fff; + --theme-container-box-shadow: none; + --theme-container-border: 1px solid #22303f; + --theme-subtle-border: 1px solid #1f2c3a; + --theme-social-icon-invert: invert(100); + --theme-social-icon-color: #cedae2; + --theme-invert-image: invert(); + --theme-current-article-background: #1143ca; + --theme-series-article-background: #314d9c; + --theme-series-article-hover: #1b2e63; +} diff --git a/app/assets/stylesheets/themes/pink.scss b/app/assets/stylesheets/themes/pink.scss new file mode 100644 index 000000000..747ab89da --- /dev/null +++ b/app/assets/stylesheets/themes/pink.scss @@ -0,0 +1,37 @@ +:root { + --theme-background: #fff7f9; + --theme-color: #0a0a0a; + --theme-opposite-color: #fff7f9; + --theme-logo-background: #fff7f9; + --theme-logo-color: #ff4983; + --theme-code-background: #f9f9fa; + --theme-code-color: #f92671; + --theme-reaction-background: #eff0f2; + --theme-anchor-color: #4e57ef; + --theme-secondary-color: #4e57ef; + --theme-secondary-color-border: 1px solid #ffe5ec; + --theme-top-bar-background: #ff4983; + --theme-top-bar-background-hover: #ff5b8f; + --theme-top-bar-color: #fff; + --theme-top-bar-search-background: #fff7f9; + --theme-top-bar-search-color: #000; + --theme-top-bar-write-background: #ff4983; + --theme-top-bar-write-color: #fff; + --theme-container-background: #fff; + --theme-container-accent-background: #ffccdb; + --theme-invert-image: none; + --theme-container-background-hover: #ffe5eb; + --theme-gradient-background: linear-gradient( + to right, + #fff 8%, + #ffceda 18%, + #fff7f9 33% + ); + --theme-container-color: #333; + --theme-container-box-shadow: none; + --theme-container-border: 1px solid #ff4983; + --theme-subtle-border: 1px solid #ffa8c3; + --theme-social-icon-color: rgba(255, 204, 219, 0); + --theme-social-icon-invert: invert(0); + --theme-prime-option-border-color: rgba(255, 255, 255, 0.55); +} diff --git a/app/assets/stylesheets/vars/_colors.scss b/app/assets/stylesheets/vars/_colors.scss deleted file mode 100644 index 5429d2c7a..000000000 --- a/app/assets/stylesheets/vars/_colors.scss +++ /dev/null @@ -1,56 +0,0 @@ -$smoke-100: #08090a; -$smoke-90: #202428; -$smoke-80: #363d44; -$smoke-70: #4d5760; -$smoke-60: #64707d; -$smoke-50: #7d8a97; -$smoke-40: #99a3ad; -$smoke-30: #b5bdc4; -$smoke-20: #d2d6db; -$smoke-10: #eef0f1; -$smoke-00: #f9fafa; - -$snowflake: #fff; - -$dolphin: #3b49df; -$dolphin-darker: #1827ce; -$dolphin-lighter: #8d95f2; - -$avocado: #26d9ca; -$avocado-darker: #1ab3a6; -$avocado-lighter: #79ece2; - -$peanut: #ffcf4c; -$peanut-darker: #f5b400; -$peanut-lighter: #ffe499; - -$raspberry: #dc1818; -$raspberry-darker: #c20a0a; -$raspberry-lighter: #ec5050; - -$colors: ( - 'smoke-100': $smoke-100, - 'smoke-90': $smoke-90, - 'smoke-80': $smoke-80, - 'smoke-70': $smoke-70, - 'smoke-60': $smoke-60, - 'smoke-50': $smoke-50, - 'smoke-40': $smoke-40, - 'smoke-30': $smoke-30, - 'smoke-20': $smoke-20, - 'smoke-10': $smoke-10, - 'smoke-00': $smoke-00, - 'snowflake': $snowflake, - 'dolphin': $dolphin, - 'dolphin-darker': $dolphin-darker, - 'dolphin-lighter': $dolphin-lighter, - 'avocado': $avocado, - 'avocado-darker': $avocado-darker, - 'avocado-lighter': $avocado-lighter, - 'peanut': $peanut, - 'peanut-darker': $peanut-darker, - 'peanut-lighter': $peanut-lighter, - 'raspberry': $raspberry, - 'raspberry-darker': $raspberry-darker, - 'raspberry-lighter': $raspberry-lighter, -); \ No newline at end of file diff --git a/app/assets/stylesheets/vars/_spacing-units.scss b/app/assets/stylesheets/vars/_spacing-units.scss deleted file mode 100644 index 6648bfcc3..000000000 --- a/app/assets/stylesheets/vars/_spacing-units.scss +++ /dev/null @@ -1,36 +0,0 @@ -$su-1: 0.25rem; // 4px -$su-2: 0.5rem; // 8px -$su-3: 0.75rem; // 12px -$su-4: 1rem; // 16px -$su-5: 1.25rem; // 20px -$su-6: 1.5rem; // 24px -$su-7: 2rem; // 32px -$su-8: 3rem; // 48px -$su-9: 4rem; // 64px -$su-10: 8rem; // 128px - -$spacing-units: ( - '1': $su-1, - '2': $su-2, - '3': $su-3, - '4': $su-4, - '5': $su-5, - '6': $su-6, - '7': $su-7, - '8': $su-8, - '9': $su-9, - '10': $su-10, -); - -$negative-spacing-units: ( - '1': -$su-1, - '2': -$su-2, - '3': -$su-3, - '4': -$su-4, - '5': -$su-5, - '6': -$su-6, - '7': -$su-7, - '8': -$su-8, - '9': -$su-9, - '10': -$su-10, -); \ No newline at end of file diff --git a/app/assets/stylesheets/vars/_typography.scss b/app/assets/stylesheets/vars/_typography.scss deleted file mode 100644 index ad5765de9..000000000 --- a/app/assets/stylesheets/vars/_typography.scss +++ /dev/null @@ -1,26 +0,0 @@ -// Font stacks -$ff-default: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, - Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; -$ff-accent: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, - monospace; - -// Font sizes -$fs-xs: 0.75rem; // 12px -$fs-s: 0.875rem; // 14px -$fs-base: 1rem; // 16px -$fs-l: 1.125rem; // 18px -$fs-xl: 1.25rem; // 20px -$fs-2xl: 1.5rem; // 24px -$fs-3xl: 1.875rem; // 30px -$fs-4xl: 2.25rem; // 36px -$fs-5xl: 3rem; // 48px - -// Line heights -$lh-tight: 1.25; // 20px for 16px font-size -$lh-base: 1.5; // 24px for 16px font-size - -// Font weights -$fw-normal: 400; -$fw-medium: 500; -$fw-bold: 700; -$fw-heavy: 800; diff --git a/app/assets/stylesheets/vars/_utils.scss b/app/assets/stylesheets/vars/_utils.scss deleted file mode 100644 index 68596f460..000000000 --- a/app/assets/stylesheets/vars/_utils.scss +++ /dev/null @@ -1,44 +0,0 @@ -// Border radius -$br-default: 3px; - -// Break points -$breakpoint-s: 640px; -$breakpoint-m: 768px; -$breakpoint-l: 1024px; -$breakpoint-xl: 1280px; - -// Transitions -$transition-props: cubic-bezier(0.17, 0.67, 0.5, 0.71) 100ms; - -// pow() - Raise number to the nth power -// -// @param {number} $base The base number -// @param {number} $exponents The exponent to which to raise $base -@function pow($base, $exponents) { - $raised: 1; - - @for $i from 1 through $exponents { - $raised: $raised * $base; - } - - @return $raised; -} - -// generate-classes() -// -// Generating classes for Tailwind approach. -// -// @param {string} $prefix Prefix for utility class, for example `mr` -// @param {string || list} $properties Defines CSS property(ies) that, for example `margin-right` -// @param {list} $values-1 List of values for which we gonna generate classes -// @param {list} $values-2 Additional list of values, useful when we want to combine two lists. -@mixin generate-classes($prefix, $properties, $values-1, $values-2: ()) { - $values: map-merge($values-1, $values-2); - @each $name, $value in $values { - .#{$prefix}-#{$name} { - @each $property in $properties { - #{$property}: $value !important; - } - } - } -} diff --git a/app/assets/stylesheets/vars/_variables.scss b/app/assets/stylesheets/vars/_variables.scss deleted file mode 100644 index 7acce0941..000000000 --- a/app/assets/stylesheets/vars/_variables.scss +++ /dev/null @@ -1,4 +0,0 @@ -@import 'utils'; -@import 'colors'; -@import 'spacing-units'; -@import 'typography'; diff --git a/app/controllers/pages_controller.rb b/app/controllers/pages_controller.rb index 0cbc74bf7..91ef0c727 100644 --- a/app/controllers/pages_controller.rb +++ b/app/controllers/pages_controller.rb @@ -83,6 +83,12 @@ class PagesController < ApplicationController ) end + def crayons + @page = Page.find_by(slug: "crayons") + render :show if @page + set_surrogate_key_header "crayons_page" + end + private def latest_published_thread(tag_name) diff --git a/app/views/layouts/_user_config.html.erb b/app/views/layouts/_user_config.html.erb index 33ead0a84..456ba6dc4 100644 --- a/app/views/layouts/_user_config.html.erb +++ b/app/views/layouts/_user_config.html.erb @@ -3,139 +3,13 @@ var bodyClass = localStorage.getItem('config_body_class'); document.body.className = bodyClass; if (bodyClass.includes('night-theme')) { - document.getElementById('body-styles').innerHTML = '' + document.getElementById('body-styles').innerHTML = ''; } else if (bodyClass.includes('ten-x-hacker-theme')) { - document.getElementById('body-styles').innerHTML = '' + document.getElementById('body-styles').innerHTML = '' } else if (bodyClass.includes('pink-theme')) { - document.getElementById('body-styles').innerHTML = '' + document.getElementById('body-styles').innerHTML = '' } else if(bodyClass.includes('minimal-light-theme')) { - document.getElementById('body-styles').innerHTML = '' + document.getElementById('body-styles').innerHTML = '' } if (navigator.userAgent === 'DEV-Native-ios') { document.getElementsByTagName("body")[0].classList.add("dev-ios-native-body"); diff --git a/app/views/pages/crayons.html.erb b/app/views/pages/crayons.html.erb new file mode 100644 index 000000000..7d0c24375 --- /dev/null +++ b/app/views/pages/crayons.html.erb @@ -0,0 +1,894 @@ +<% title "Crayons" %> + + +
+
+

Main Typography

+

Default font is set to 16px (fs-base). It should be standard in UI. Smaller and bigger font sizes should be used carefully with respect to good visual rythm between elements.

+

XS size should be used as little as possible in edge cases. Even though it’s readable we could consider it not meeting DEV’s standards. So keep it for like “asterisk copy” etc.

+

By default you should be using Regular font weight.

+

Medium should be used to emphasize something but not make it as loud as Bold.

+

Heavy should be used only for bigger title.

+
+ +
+

Lorem ipsum dolor sit amet.

+

Lorem ipsum dolor sit amet.

+

Lorem ipsum dolor sit amet.

+

Lorem ipsum dolor sit amet.

+

Lorem ipsum dolor sit amet.

+

Lorem ipsum dolor sit amet.

+

Lorem ipsum dolor sit amet.

+

Lorem ipsum dolor sit amet.

+

Lorem ipsum dolor sit amet.

+
+ +
+

Lorem ipsum dolor sit amet.

+

Lorem ipsum dolor sit amet.

+

Lorem ipsum dolor sit amet.

+

Lorem ipsum dolor sit amet.

+

Lorem ipsum dolor sit amet.

+

Lorem ipsum dolor sit amet.

+

Lorem ipsum dolor sit amet.

+

Lorem ipsum dolor sit amet.

+

Lorem ipsum dolor sit amet.

+
+ +
+

Lorem ipsum dolor sit amet.

+

Lorem ipsum dolor sit amet.

+

Lorem ipsum dolor sit amet.

+

Lorem ipsum dolor sit amet.

+

Lorem ipsum dolor sit amet.

+

Lorem ipsum dolor sit amet.

+

Lorem ipsum dolor sit amet.

+

Lorem ipsum dolor sit amet.

+

Lorem ipsum dolor sit amet.

+
+ +
+

Lorem ipsum dolor sit amet.

+

Lorem ipsum dolor sit amet.

+

Lorem ipsum dolor sit amet.

+

Lorem ipsum dolor sit amet.

+

Lorem ipsum dolor sit amet.

+

Lorem ipsum dolor sit amet.

+

Lorem ipsum dolor sit amet.

+

Lorem ipsum dolor sit amet.

+

Lorem ipsum dolor sit amet.

+
+ +
+ Line height: 1.5 – .lh-base (default) + Line height: 1.25 – .lh-tight + +

This is a bit longer text title to present line-height difference.

+

This is a bit longer text title to present line-height difference.

+ +

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore iusto, molestias. Ex asperiores modi libero id laudantium ipsum perspiciatis, architecto enim suscipit delectus odit, explicabo quas, voluptatum quibusdam, distinctio ut.

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore iusto, molestias. Ex asperiores modi libero id laudantium ipsum perspiciatis, architecto enim suscipit delectus odit, explicabo quas, voluptatum quibusdam, distinctio ut.

+
+ + 
<%='
+  
+  
...
 
+  
...
 
+  
...
 
+  
...
 
+  
...
 
+  
...
 
+  
...
 
+  
...
 
+  
...
 
+
+  
+  
...
 
+  
...
 
+  
...

+  
...

+
+  
+  
 
+  
 
+  '.rstrip %>
+ +
+

Accent typography

+

Its main purpose is to add a bit of flavor to DEV brand but it should never be the main font.

+

Please, do not overuse Accent typography.

+

We strongly encourage to limit number of sizes and weights to what presetned below.

+
+ +
+

Lorem ipsum dolor sit amet.

+

Lorem ipsum dolor sit amet.

+

Lorem ipsum dolor sit amet.

+

Lorem ipsum dolor sit amet.

+
+ +
+

Lorem ipsum dolor sit amet.

+

Lorem ipsum dolor sit amet.

+

Lorem ipsum dolor sit amet.

+

Lorem ipsum dolor sit amet.

+
+ + 
<%='
+  
+  
...
 
+  
...
 
+  
...
 
+  
...
 
+
+  
+  
...
 
+  
...

+
+  
+  
 
+  
 
+  '.rstrip %>
+
+ +
+
+

Form elements

+
+
+

+ +
+ + 
<%='
+  
+  
+  '.rstrip %>
+ +
+

+ +
+ + 
<%='
+  
+  
+  '.rstrip %>
+ +
+ + + + +
+ + 
<%='
+  
+  
+  
+  
+  '.rstrip %>
+ +
+ + + + +
+ + 
<%='
+  
+  
+  
+  
+  '.rstrip %>
+
+ +
+
+

Field Component

+

Because of accessibility most (ideally all) fields should have label above.

+

Fields can also have optional description - between Label and Field itself.

+

Fields can also have additional optional description, for example characters count.

+
+ +
+ + +

Another description just in case...

+
+ + 
<%='
+  

+    
+    
+    
Another description just in case...

+  

+  '.rstrip %>
+ +
+

Fields with Checkboxes & Radios

+

Labels for checkboxes and radios should be placed next to the form element.

+

Using additional description is optional.

+

It is possible to group checkboxes or radios into logical sections. Section may require having it’s own label (title).

+
+ +
+
+ + +
+
+ + 
<%='
+  

+    
+    
+  

+  '.rstrip %>
+ +
+
+
+ + +
+ +
+ + +
+ +
+ + +
+
+
+ + 
<%='
+  

+    

+      
+      
+    

+
+    

+      ...
+    

+
+    ...
+  

+  '.rstrip %>
+ +
+
+
+ + +
+ +
+ + +
+ +
+ + +
+
+
+ + 
<%='
+  

+    

+      
+      
+    

+
+    

+      ...
+    

+    
+    ...
+  

+  '.rstrip %>
+ + +
+
+ + +
+
+ + 
<%='
+  

+    
+    
+  

+  '.rstrip %>
+ +
+
+
+ + +
+ +
+ + +
+ +
+ + +
+
+
+ + 
<%='
+  

+    

+      
+      
+    

+
+    

+      ...
+    

+
+    ...
+  

+  '.rstrip %>
+ +
+
+
+ + +
+ +
+ + +
+ +
+ + +
+
+
+ + 
<%='
+  

+    

+      
+      
+    

+
+    

+      ...
+    

+    
+    ...
+  

+  '.rstrip %>
+
+ +
+
+

Buttons

+

Use Danger style only for destructive actions like removing something. Do not use it for, for example “unfollow” action.

+

If you have to use several buttons together, keep in mind you should always have ONE Primary button. Rest of them should be Secondary and/or Outlined and/or Text buttons.

+

It is ok to use ONLY Secondary or outlined button without being accompanied by Primary one.

+

For Stacking buttons (vertically or horizontally) please use 8px spacing unit for default size buttons (no matter if stacking horizontally or vertically).

+
+
+ Button label

+ Full Button label

+ Secondary Button label

+ Outlined Button label

+ Text Button label

+ Danger Button label

+ Button

+ Button +
+ + 
<%='
+  Button label
+  Full Button label
+  Secondary Button label
+  Outlined Button label
+  Text Button label
+  Danger Button label
+  ...Button
+  ...Button
+  '.rstrip %>
+
+ +
+
+

Boxes

+

“Box” will be a background element used for many other components, for example banners, dropdowns, modals. This component does not have any guidelines in terms of placement or spacing, since it’s supposed to be used to build other components.

+

There are:

+ +

By default use “outlined” type unless you really have to make something stand out - then use “filled”. But double check if it makes sense since “filled” style really steals attention.

+

Use style that makes the most sense for you current use case. It’s pretty obvious when to use Danger, Warning and Success. But for Default and Info - it’s more up to designer to make a good call :).

+

Elevations should define what kind of element it is:

+ +
+ +
+
box, level 0
+
box, level 1
+
box, level 2
+
box, level 3
+
filled box, level 0
+
filled box, level 1
+
filled box, level 2
+
filled box, level 3
+ +
box, level 0
+
box, level 1
+
box, level 2
+
box, level 3
+
filled box, level 0
+
filled box, level 1
+
filled box, level 2
+
filled box, level 3
+ +
box, level 0
+
box, level 1
+
box, level 2
+
box, level 3
+
filled box, level 0
+
filled box, level 1
+
filled box, level 2
+
filled box, level 3
+ +
box, level 0
+
box, level 1
+
box, level 2
+
box, level 3
+
filled box, level 0
+
filled box, level 1
+
filled box, level 2
+
filled box, level 3
+ +
box, level 0
+
box, level 1
+
box, level 2
+
box, level 3
+
filled box, level 0
+
filled box, level 1
+
filled box, level 2
+
filled box, level 3
+
+ + 
<%='
+  
+  
box, level 0

+
+  <-- levels 0-3 -->
+  
box, level 1

+  
box, level 2

+  
box, level 3

+
+  <-- filled variation -->
+  
filled box, level 0

+
+  <-- styles: danger, success, warning, info -->
+  

+  

+  

+  

+  '.rstrip %>
+
+ +
+
+

Dropdowns

+

Dropdowns should have position relative to it’s trigger. They can be used for some 2nd level navigations, contextual configurations, etc...

+

Dropdowns should not be bigger than 320px.

+

Dropdown default padding should be dependent on width:

+ +

If you need to utilize entire dropdown area and you have to get rid of default padding, please use modifier class crayons-dropdown--padding-0.

+

FYI: Dropdowns use “Box” component as background, with Level 3 elevation.

+
+ +
+
+ Hey, I'm a dropdown content! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi ea voluptates quaerat eos consequuntur temporibus. +
+
+ +
+
+ Hey, I'm a dropdown content! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi ea voluptates quaerat eos consequuntur temporibus. +
+
+ +
+
+ Hey, I'm a dropdown content! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi ea voluptates quaerat eos consequuntur temporibus. +
+
+ + 
<%='
+  

+    Hey, ...
+  

+
+  

+    Hey, ...
+  

+
+  

+    Hey, ...
+  
  
+  '.rstrip %>
+
+ +
+
+

Modals

+

Modals should be positioned centered in relation to entire viewport. So relation to its tirgger doesn’t really matter.

+

There are 3 sizes of modals:

+ +

Use your best judgements when choosing the right size.

+

If you need to utilize entire modal area and you have to get rid of default padding, please use modifier class crayons-modal--padding-0.

+

FYI: Modals use “Box” component as background, with Level 3 elevation.

+
+ +
+
+ Hey, I'm a Default Modal content! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi ea voluptates quaerat eos consequuntur temporibus. +
+
+ +
+
+ Hey, I'm a Small Modal content! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi ea voluptates quaerat eos consequuntur temporibus. +
+
+ +
+
+ Hey, I'm a Large Modal content! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi ea voluptates quaerat eos consequuntur temporibus. +
+
+ +
+
+ Hey, I'm a modal content with no padding! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi ea voluptates quaerat eos consequuntur temporibus. +
+
+ + 
<%='
+  

+    Hey, ...
+  

+
+  

+    Hey, ...
+  

+
+  

+    Hey, ...
+  

+
+  

+    Hey, ...
+  
  
+  '.rstrip %>
+
+ +
+
+

Notices

+

Use Notices to focus user on specific piece of content, for example (but not limited to):

+ +

This should be simple message. And this is exactly what this Figma component let you do.

+

By default, this component has 16px padding.

+
+ +
+
This is Default Notice content.

+
This is Default Notice content.

+
This is Warning Notice content.

+
This is Success Notice content.

+
This is Info Notice content.
+
+ + 
<%='
+  
+  
This...

+
+  
+  
This...

+  
This...

+  
This...

+  
This...

+  '.rstrip %>
+
+ +
+
+

Indicators

+

Indicators are meant to be used to inform user about, for example, unread notifications. They supposed to steal user's attention and make him notice or click specific element.

+

We should keep in mind to never show too many indicators at the same time. Use your best judgment.

+

There're two types of indicators:

+ +

And there're four styles to pick from:

+ +
+
+ Label + Outlined + 1 + +
+ +
+ Label + Outlined + 1 + +
+ +
+ Label + Outlined + 1 + +
+ +
+ Label + Outlined + 1 + +
+ + 
<%='
+  Label
+  1
+  
+
+  
+  ...
+  ...
+  ...
+  '.rstrip %>
+
+ +
+
+

Avatars & Logos

+

An image representing a user is called an avatar.

+

An image representing a company or organization is called a logo.

+

To make a distinction between these two different entities we should keep them visually different. For Avatars, we gonna use circle shape. And for Logos we gonna use square shape. This will help recognize what is what in a heartbeat.

+

Each of these will be available in 5 different sizes (use your best judgment in picking right size):

+ +

Remember to use descriptive alt="" values!

+
+
+ " class="crayons-avatar__image" alt="Ben" /> + " class="crayons-avatar__image" alt="Ben" /> + " class="crayons-avatar__image" alt="Ben" /> + " class="crayons-avatar__image" alt="Ben" /> + " class="crayons-avatar__image" alt="Ben" /> +
+ + 
<%='
+  ...
+
+  
+  ...
+  ...
+  ...
+  ...
+  '.rstrip %>
+ +
+ + + + + +
+ + 
<%='
+  
+
+  
+  ...
+  ...
+  ...
+  ...
+  '.rstrip %>
+
+ +
+
+

Navigation: Main nav

+

Used as main nav in left sidebar or dropdowns...

+

Can contain icons.

+
+ +
+ 🏡Home + 📻Podcasts + 🏷Tags + 📑Listings 3 + 👍Code of Conduct + More... +
+ + 
<%='
+  ...
+  ...
+
+  
+  📻...
+  ......
+  
+  
+  ...3
+  
+  
+  More...
+  '.rstrip %>
+
+ +
+
+

Navigation: Tabs

+

Use tabs as 2nd level navigation or filtering options.

+
+ +
+
+ Feed + Popular + Latest +
+
+ + 
<%='
+  

+    Feed
+    Popular
+    Latest
+  

+  '.rstrip %>
+
diff --git a/config/routes.rb b/config/routes.rb index 024e0a283..403c4b105 100644 --- a/config/routes.rb +++ b/config/routes.rb @@ -320,6 +320,7 @@ Rails.application.routes.draw do get "/shop", to: redirect("https://shop.dev.to/") get "/mod" => "moderations#index", :as => :mod get "/mod/:tag" => "moderations#index" + get "/page/crayons" => "pages#crayons" post "/fallback_activity_recorder" => "ga_events#create"