관리-도구
편집 파일: _vars.scss
// See https://make.wordpress.org/design/handbook/design-guide/foundations/colors/ // Colors copied from https://codepen.io/hugobaeta/pen/RNOzoV $color-wp-blue: #0073aa; $color-medium-blue: #00a0d2; $color-light-blue: #00b9eb; $color-ultra-dark-gray: #191e23; $color-dark-gray: #23282d; $color-base-gray: #32373c; $color-dark-medium-gray: lighten($color-base-gray,15%); $color-dark-silver-gray: #82878c; $color-silver-gray: #a0a5aa; $color-light-silver-gray: #b4b9be; // $color-medium-gray: mix($color-base-gray,$color-dark-silver-gray,20%); $color-medium-gray: #999; $color-gray-900: $color-ultra-dark-gray; $color-gray-800: $color-dark-gray; $color-gray-700: $color-base-gray; $color-gray-600: lighten($color-base-gray,6%); $color-gray-500: lighten($color-base-gray,15%); $color-gray-400: lighten($color-base-gray,20%); $color-gray-300: lighten($color-base-gray,25%); $color-gray-200: lighten($color-base-gray,32%); $color-gray-100: lighten($color-base-gray,38%); $color--gray-light-900: lighten($color-base-gray,45%); $color--gray-light-800: lighten($color-base-gray,52%); $color--gray-light-700: lighten($color-base-gray,60%); $color--gray-light-600: lighten($color-base-gray,64%); $color--gray-light-500: lighten($color-base-gray,68%); $color--gray-light-400: lighten($color-base-gray,70%); $color--gray-light-300: lighten($color-base-gray,72%); $color--gray-light-200: lighten($color-base-gray,74%); $color--gray-light-100: lighten($color-base-gray,77%); $color-accent-red: #dc3232; $color-accent-fire-orange: #d54e21; $color-accent-orange: #f56e28; $color-accent-yellow: #ffb900; $color-accent-green: #46b450; //old #64b450; $color-accent-blue: $color-medium-blue; $color-accent-purple: #826eb4; //Tints and Tones and Shades - Oh My! $color-accent-red-shade30: shade($color-accent-red,30%); $color-accent-red-shade20: shade($color-accent-red,20%); $color-accent-red-shade10: shade($color-accent-red,10%); $color-accent-red-tint20: tint($color-accent-red,20%); $color-accent-red-tint40: tint($color-accent-red,40%); $color-accent-red-tint60: tint($color-accent-red,60%); $color-accent-red-tint90: tint($color-accent-red,90%); $color-accent-fire-orange-shade10: shade($color-accent-fire-orange,10%); $color-accent-fire-orange-shade5: shade($color-accent-fire-orange,5%); $color-accent-orange-tint20: tint($color-accent-orange,20%); $color-accent-orange-tint40: tint($color-accent-orange,40%); $color-accent-orange-tint60: tint($color-accent-orange,60%); $color-accent-orange-tint90: tint($color-accent-orange,90%); $color-accent-yellow-tonefire40: mix($color-accent-fire-orange,$color-accent-yellow,40%); $color-accent-yellow-tonefire20: mix($color-accent-fire-orange,$color-accent-yellow,20%); $color-accent-yellow-tint20: tint($color-accent-yellow,20%); $color-accent-yellow-tint40: tint($color-accent-yellow,40%); $color-accent-yellow-tint60: tint($color-accent-yellow,60%); $color-accent-yellow-tint90: tint($color-accent-yellow,90%); $color-accent-green-toneblue5shade25: shade(mix($color-wp-blue, $color-accent-green,5%),25%); $color-accent-green-toneblue5shade15: shade(mix($color-wp-blue, $color-accent-green,5%),15%); $color-accent-green-tint20: tint($color-accent-green,20%); $color-accent-green-tint40: tint($color-accent-green,40%); $color-accent-green-tint60: tint($color-accent-green,60%); $color-accent-green-tint70: tint($color-accent-green,70%); $color-accent-green-tint90: tint($color-accent-green,90%); $color-accent-wp-blue-shade10: shade($color-wp-blue,10%); $color-accent-blue-toneblue80: mix($color-wp-blue,$color-accent-blue,80%); $color-accent-blue-toneblue60: mix($color-wp-blue,$color-accent-blue,60%); $color-accent-blue-toneblue40: mix($color-wp-blue,$color-accent-blue,40%); $color-accent-blue-tint20: tint($color-accent-blue,20%); $color-accent-blue-tint40: tint($color-accent-blue,40%); $color-accent-blue-tint60: tint($color-accent-blue,60%); $color-accent-blue-tint75: tint($color-accent-blue,75%); $color-accent-blue-tint90: tint($color-accent-blue,90%); $color-accent-purple-shade40: shade($color-accent-purple,40%); $color-accent-purple-shade20: shade($color-accent-purple,20%); $color-accent-purple-tint20: tint($color-accent-purple,20%); $color-accent-purple-tint40: tint($color-accent-purple,40%); $color-accent-purple-tint60: tint($color-accent-purple,60%); $color-accent-purple-tint90: tint($color-accent-purple,90%); //Text Colors $textcolor-dark: rgba($color-base-gray,.8); $textcolor-dark-mid: rgba($color-base-gray,.5); $textcolor-light: rgba(#fff,.8); $textcolor-light-mid: rgba(#fff,.5);