diff --git a/README.md b/README.md index 487bb85..ed4e30a 100644 --- a/README.md +++ b/README.md @@ -65,6 +65,9 @@ npm i hue.gl ## Colours +Here's a glimpse of the colors available: + + | | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | | ---- | ---- | ---- | ---- | ---- | ---- | ---- | ---- | ---- | ---- | | **Grey** | N0001N0001 | N0002N0002 | N0003N0003 | N0004N0004 | N0005N0005 | N0006N0006 | N0007N0007 | N0008N0008 | N0009N0009 | @@ -164,6 +167,37 @@ npm i hue.gl | `.gdiagramstyle` | OmniGraffle Diagram Style | | `.pal` | Painter Custom Palettes | +## Other Standards + +`hue.gl` supports a variety of color standards. Below is a list of these standards along with their corresponding SCSS map files: + +| Standard | SCSS Map File | Description | +| ------------------ | --------------------------------------- | ----------- | +| AS2700 | `_as2700_hex_map.scss` | Australian Standard for Colors | +| BS381 | `_bs381_hex_map.scss` | British Standard 381C for Colours for Specific Purposes | +| Copic | `_copic_hex_map.scss` | Copic marker color system | +| Flat Design | `_flat_design_hex_map.scss` | Popular color palette for flat UI design | +| FS595 | `_fs595_hex_map.scss` | Federal Standard 595 color system used by the US government | +| Material Design | `_material_design_hex_map.scss` | Google's Material Design color palette | +| NBS | `_nbs_hex_map.scss` | National Bureau of Standards color names | +| NCS | `_ncs_hex_map.scss` | Natural Color System, a perceptual color model | +| RAL | `_ral_hex_map.scss` | RAL classic color system used in Europe | +| Tailwind | `_tailwind_hex_map.scss` | Tailwind CSS framework's color palette | +| X11 | `_x11_hex_map.scss` | X11 color names used in web colors | + +### Sample Usage + +Here's an example of how to use a color from the RAL standard in your SCSS: + +``` scss +@import 'path/to/hue.gl/scss/standards/_ral_hex_map.scss'; + +.my-element { + background-color: map-get($ral, RAL 5002); // Ultramarine Blue +} + +``` + --- ## Colophon diff --git a/src/scss/standards/_flat_design_colors.scss b/src/scss/standards/_flat_design_colors.scss deleted file mode 100644 index cb5246a..0000000 --- a/src/scss/standards/_flat_design_colors.scss +++ /dev/null @@ -1,72 +0,0 @@ -/* Flat color palette downloaded from - * http://htmlcolorcodes.com/color-charts/ - * - * Check out our powerful color picker - * http://htmlcolorcodes.com/color-picker/ - * - * Want to learn more about colors in SCSS? - * http://htmlcolorcodes.com/tutorials/ - * - * - - - - - - - - - - - - - - - - - - - * Credits: - * - * Original color palette by - * http://designmodo.github.io/Flat-UI/ - * - * - - - - - - - - - - - - - - - - - - - * How to use: - * - * Include this file with your other .scss files: - * - * @import "flat_colors"; - * - * and use the color variables in your stylesheets: - * - * .class { - * color: $turquoise; - * } - */ - -/* Teals */ -$turquoise: #1abc9c; -$green-sea: #16a085; - -/* Greens */ -$emerald: #2ecc71; -$nephritis: #27ae60; - -/* Blues */ -$peter-river: #3498db; -$belize-hole: #2980b9; - -/* Purples */ -$amethyst: #9b59b6; -$wisteria: #8e44ad; - -/* Blacks */ -$wet-asphalt: #34495e; -$midnight-blue: #2c3e50; - -/* Yellows */ -$sunflower: #f1c40f; -$orange: #f39c12; - -/* Oranges */ -$carrot: #e67e22; -$pumpkin: #d35400; - -/* Reds */ -$alizarin: #e74c3c; -$pomegranate: #c0392b; - -/* Whites */ -$clouds: #ecf0f1; -$silver: #bdc3c7; - -/* Grays */ -$concrete: #95a5a6; -$asbestos: #7f8c8d; - -/* Want more? Get the full flat color palette at - * http://htmlcolorcodes.com/color-charts/ - */ \ No newline at end of file diff --git a/src/scss/standards/_flat_design_colors_full.scss b/src/scss/standards/_flat_design_colors_full.scss deleted file mode 100644 index 97f5849..0000000 --- a/src/scss/standards/_flat_design_colors_full.scss +++ /dev/null @@ -1,298 +0,0 @@ -/* Flat color palette (full) downloaded from - * http://htmlcolorcodes.com/color-charts/ - * - * Check out our powerful color picker - * http://htmlcolorcodes.com/color-picker/ - * - * Want to learn more about colors in SCSS? - * http://htmlcolorcodes.com/tutorials/ - * - * - - - - - - - - - - - - - - - - - - - * Credits: - * - * Original color palette by - * http://designmodo.github.io/Flat-UI/ - * - * - - - - - - - - - - - - - - - - - - - * How to use: - * - * Include this file with your other .scss files: - * - * @import "flat_colors_full"; - * - * and use the color variables in your stylesheets: - * - * .class { - * color: $turquoise-500; - * } - * - * - - - - - - - - - - - - - - - - - - - * Note: - * - * $color and $color-500 are the same, simply there - * for your convenience. - */ - -/* Turquoise */ -$turquoise: #1abc9c; -$turquoise-50: #e8f8f5; -$turquoise-100: #d1f2eb; -$turquoise-200: #a3e4d7; -$turquoise-300: #76d7c4; -$turquoise-400: #48c9b0; -$turquoise-500: #1abc9c; -$turquoise-600: #17a589; -$turquoise-700: #148f77; -$turquoise-800: #117864; -$turquoise-900: #0e6251; - -/* Green Sea */ -$green-sea: #16a085; -$green-sea-50: #e8f6f3; -$green-sea-100: #d0ece7; -$green-sea-200: #a2d9ce; -$green-sea-300: #73c6b6; -$green-sea-400: #45b39d; -$green-sea-500: #16a085; -$green-sea-600: #138d75; -$green-sea-700: #117a65; -$green-sea-800: #0e6655; -$green-sea-900: #0b5345; - -/* Emerald */ -$emerald: #2ecc71; -$emerald-50: #eafaf1; -$emerald-100: #d5f5e3; -$emerald-200: #abebc6; -$emerald-300: #82e0aa; -$emerald-400: #58d68d; -$emerald-500: #2ecc71; -$emerald-600: #28b463; -$emerald-700: #239b56; -$emerald-800: #1d8348; -$emerald-900: #186a3b; - -/* Nephritis */ -$nephritis: #27ae60; -$nephritis-50: #e9f7ef; -$nephritis-100: #d4efdf; -$nephritis-200: #a9dfbf; -$nephritis-300: #7dcea0; -$nephritis-400: #52be80; -$nephritis-500: #27ae60; -$nephritis-600: #229954; -$nephritis-700: #1e8449; -$nephritis-800: #196f3d; -$nephritis-900: #145a32; - -/* Peter River */ -$peter-river: #3498db; -$peter-river-50: #ebf5fb; -$peter-river-100: #d6eaf8; -$peter-river-200: #aed6f1; -$peter-river-300: #85c1e9; -$peter-river-400: #5dade2; -$peter-river-500: #3498db; -$peter-river-600: #2e86c1; -$peter-river-700: #2874a6; -$peter-river-800: #21618c; -$peter-river-900: #1b4f72; - -/* Belize Hole */ -$belize-hole: #2980b9; -$belize-hole-50: #eaf2f8; -$belize-hole-100: #d4e6f1; -$belize-hole-200: #a9cce3; -$belize-hole-300: #7fb3d5; -$belize-hole-400: #5499c7; -$belize-hole-500: #2980b9; -$belize-hole-600: #2471a3; -$belize-hole-700: #1f618d; -$belize-hole-800: #1a5276; -$belize-hole-900: #154360; - -/* Amethyst */ -$amethyst: #9b59b6; -$amethyst-50: #f5eef8; -$amethyst-100: #ebdef0; -$amethyst-200: #d7bde2; -$amethyst-300: #c39bd3; -$amethyst-400: #af7ac5; -$amethyst-500: #9b59b6; -$amethyst-600: #884ea0; -$amethyst-700: #76448a; -$amethyst-800: #633974; -$amethyst-900: #512e5f; - -/* Wisteria */ -$wisteria: #8e44ad; -$wisteria-50: #f4ecf7; -$wisteria-100: #e8daef; -$wisteria-200: #d2b4de; -$wisteria-300: #bb8fce; -$wisteria-400: #a569bd; -$wisteria-500: #8e44ad; -$wisteria-600: #7d3c98; -$wisteria-700: #6c3483; -$wisteria-800: #5b2c6f; -$wisteria-900: #4a235a; - -/* Wet Asphalt */ -$wet-asphalt: #34495e; -$wet-asphalt-50: #ebedef; -$wet-asphalt-100: #d6dbdf; -$wet-asphalt-200: #aeb6bf; -$wet-asphalt-300: #85929e; -$wet-asphalt-400: #5d6d7e; -$wet-asphalt-500: #34495e; -$wet-asphalt-600: #2e4053; -$wet-asphalt-700: #283747; -$wet-asphalt-800: #212f3c; -$wet-asphalt-900: #1b2631; - -/* Midnight Blue */ -$midnight-blue: #2c3e50; -$midnight-blue-50: #eaecee; -$midnight-blue-100: #d5d8dc; -$midnight-blue-200: #abb2b9; -$midnight-blue-300: #808b96; -$midnight-blue-400: #566573; -$midnight-blue-500: #2c3e50; -$midnight-blue-600: #273746; -$midnight-blue-700: #212f3d; -$midnight-blue-800: #1c2833; -$midnight-blue-900: #17202a; - -/* Sunflower */ -$sunflower: #f1c40f; -$sunflower-50: #fef9e7; -$sunflower-100: #fcf3cf; -$sunflower-200: #f9e79f; -$sunflower-300: #f7dc6f; -$sunflower-400: #f4d03f; -$sunflower-500: #f1c40f; -$sunflower-600: #d4ac0d; -$sunflower-700: #b7950b; -$sunflower-800: #9a7d0a; -$sunflower-900: #7d6608; - -/* Orange */ -$orange: #f39c12; -$orange-50: #fef5e7; -$orange-100: #fdebd0; -$orange-200: #fad7a0; -$orange-300: #f8c471; -$orange-400: #f5b041; -$orange-500: #f39c12; -$orange-600: #d68910; -$orange-700: #b9770e; -$orange-800: #9c640c; -$orange-900: #7e5109; - -/* Carrot */ -$carrot: #e67e22; -$carrot-50: #fdf2e9; -$carrot-100: #fae5d3; -$carrot-200: #f5cba7; -$carrot-300: #f0b27a; -$carrot-400: #eb984e; -$carrot-500: #e67e22; -$carrot-600: #ca6f1e; -$carrot-700: #af601a; -$carrot-800: #935116; -$carrot-900: #784212; - -/* Pumpkin */ -$pumpkin: #d35400; -$pumpkin-50: #fbeee6; -$pumpkin-100: #f6ddcc; -$pumpkin-200: #edbb99; -$pumpkin-300: #e59866; -$pumpkin-400: #dc7633; -$pumpkin-500: #d35400; -$pumpkin-600: #ba4a00; -$pumpkin-700: #a04000; -$pumpkin-800: #873600; -$pumpkin-900: #6e2c00; - -/* Alizarin */ -$alizarin: #e74c3c; -$alizarin-50: #fdedec; -$alizarin-100: #fadbd8; -$alizarin-200: #f5b7b1; -$alizarin-300: #f1948a; -$alizarin-400: #ec7063; -$alizarin-500: #e74c3c; -$alizarin-600: #cb4335; -$alizarin-700: #b03a2e; -$alizarin-800: #943126; -$alizarin-900: #78281f; - -/* Pomegranate */ -$pomegranate: #c0392b; -$pomegranate-50: #f9ebea; -$pomegranate-100: #f2d7d5; -$pomegranate-200: #e6b0aa; -$pomegranate-300: #d98880; -$pomegranate-400: #cd6155; -$pomegranate-500: #c0392b; -$pomegranate-600: #a93226; -$pomegranate-700: #922b21; -$pomegranate-800: #7b241c; -$pomegranate-900: #641e16; - -/* Clouds */ -$clouds: #ecf0f1; -$clouds-50: #fdfefe; -$clouds-100: #fbfcfc; -$clouds-200: #f7f9f9; -$clouds-300: #f4f6f7; -$clouds-400: #f0f3f4; -$clouds-500: #ecf0f1; -$clouds-600: #d0d3d4; -$clouds-700: #b3b6b7; -$clouds-800: #979a9a; -$clouds-900: #7b7d7d; - -/* Silver */ -$silver: #bdc3c7; -$silver-50: #f8f9f9; -$silver-100: #f2f3f4; -$silver-200: #e5e7e9; -$silver-300: #d7dbdd; -$silver-400: #cacfd2; -$silver-500: #bdc3c7; -$silver-600: #a6acaf; -$silver-700: #909497; -$silver-800: #797d7f; -$silver-900: #626567; - -/* Concrete */ -$concrete: #95a5a6; -$concrete-50: #f4f6f6; -$concrete-100: #eaeded; -$concrete-200: #d5dbdb; -$concrete-300: #bfc9ca; -$concrete-400: #aab7b8; -$concrete-500: #95a5a6; -$concrete-600: #839192; -$concrete-700: #717d7e; -$concrete-800: #5f6a6a; -$concrete-900: #4d5656; - -/* Asbestos */ -$asbestos: #7f8c8d; -$asbestos-50: #f2f4f4; -$asbestos-100: #e5e8e8; -$asbestos-200: #ccd1d1; -$asbestos-300: #b2babb; -$asbestos-400: #99a3a4; -$asbestos-500: #7f8c8d; -$asbestos-600: #707b7c; -$asbestos-700: #616a6b; -$asbestos-800: #515a5a; -$asbestos-900: #424949; - -/* Want more? Check our our other color palettes at - * http://htmlcolorcodes.com/color-charts/ - */ \ No newline at end of file diff --git a/src/scss/standards/_flat_design_hex_map.scss b/src/scss/standards/_flat_design_hex_map.scss new file mode 100644 index 0000000..228c12e --- /dev/null +++ b/src/scss/standards/_flat_design_hex_map.scss @@ -0,0 +1,342 @@ +// Copyright 2023 Scape Agency BV + +// Licensed under the Apache License, Version 2.0 (the "License"), +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at + +// http://www.apache.org/licenses/LICENSE-2.0 + +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + + +// ============================================================================ +// Flat Design Colors +// ============================================================================ + + +$color_flat_design_hex: ( + +// Turquoise +// ---------------------------------------------------------------------------- + + turquoise: #1abc9c, + turquoise-50: #e8f8f5, + turquoise-100: #d1f2eb, + turquoise-200: #a3e4d7, + turquoise-300: #76d7c4, + turquoise-400: #48c9b0, + turquoise-500: #1abc9c, + turquoise-600: #17a589, + turquoise-700: #148f77, + turquoise-800: #117864, + turquoise-900: #0e6251, + + +// Green Sea +// ---------------------------------------------------------------------------- + + green-sea: #16a085, + green-sea-50: #e8f6f3, + green-sea-100: #d0ece7, + green-sea-200: #a2d9ce, + green-sea-300: #73c6b6, + green-sea-400: #45b39d, + green-sea-500: #16a085, + green-sea-600: #138d75, + green-sea-700: #117a65, + green-sea-800: #0e6655, + green-sea-900: #0b5345, + + +// Emerald +// ---------------------------------------------------------------------------- + + emerald: #2ecc71, + emerald-50: #eafaf1, + emerald-100: #d5f5e3, + emerald-200: #abebc6, + emerald-300: #82e0aa, + emerald-400: #58d68d, + emerald-500: #2ecc71, + emerald-600: #28b463, + emerald-700: #239b56, + emerald-800: #1d8348, + emerald-900: #186a3b, + + +// Nephritis +// ---------------------------------------------------------------------------- + + nephritis: #27ae60, + nephritis-50: #e9f7ef, + nephritis-100: #d4efdf, + nephritis-200: #a9dfbf, + nephritis-300: #7dcea0, + nephritis-400: #52be80, + nephritis-500: #27ae60, + nephritis-600: #229954, + nephritis-700: #1e8449, + nephritis-800: #196f3d, + nephritis-900: #145a32, + + +// Peter River +// ---------------------------------------------------------------------------- + + peter-river: #3498db, + peter-river-50: #ebf5fb, + peter-river-100: #d6eaf8, + peter-river-200: #aed6f1, + peter-river-300: #85c1e9, + peter-river-400: #5dade2, + peter-river-500: #3498db, + peter-river-600: #2e86c1, + peter-river-700: #2874a6, + peter-river-800: #21618c, + peter-river-900: #1b4f72, + + +// Belize Hole +// ---------------------------------------------------------------------------- + + belize-hole: #2980b9, + belize-hole-50: #eaf2f8, + belize-hole-100: #d4e6f1, + belize-hole-200: #a9cce3, + belize-hole-300: #7fb3d5, + belize-hole-400: #5499c7, + belize-hole-500: #2980b9, + belize-hole-600: #2471a3, + belize-hole-700: #1f618d, + belize-hole-800: #1a5276, + belize-hole-900: #154360, + + +// Amethyst +// ---------------------------------------------------------------------------- + + amethyst: #9b59b6, + amethyst-50: #f5eef8, + amethyst-100: #ebdef0, + amethyst-200: #d7bde2, + amethyst-300: #c39bd3, + amethyst-400: #af7ac5, + amethyst-500: #9b59b6, + amethyst-600: #884ea0, + amethyst-700: #76448a, + amethyst-800: #633974, + amethyst-900: #512e5f, + + +// Wisteria +// ---------------------------------------------------------------------------- + + wisteria: #8e44ad, + wisteria-50: #f4ecf7, + wisteria-100: #e8daef, + wisteria-200: #d2b4de, + wisteria-300: #bb8fce, + wisteria-400: #a569bd, + wisteria-500: #8e44ad, + wisteria-600: #7d3c98, + wisteria-700: #6c3483, + wisteria-800: #5b2c6f, + wisteria-900: #4a235a, + + +// Wet Asphalt +// ---------------------------------------------------------------------------- + + wet-asphalt: #34495e, + wet-asphalt-50: #ebedef, + wet-asphalt-100: #d6dbdf, + wet-asphalt-200: #aeb6bf, + wet-asphalt-300: #85929e, + wet-asphalt-400: #5d6d7e, + wet-asphalt-500: #34495e, + wet-asphalt-600: #2e4053, + wet-asphalt-700: #283747, + wet-asphalt-800: #212f3c, + wet-asphalt-900: #1b2631, + + +// Midnight Blue +// ---------------------------------------------------------------------------- + + midnight-blue: #2c3e50, + midnight-blue-50: #eaecee, + midnight-blue-100: #d5d8dc, + midnight-blue-200: #abb2b9, + midnight-blue-300: #808b96, + midnight-blue-400: #566573, + midnight-blue-500: #2c3e50, + midnight-blue-600: #273746, + midnight-blue-700: #212f3d, + midnight-blue-800: #1c2833, + midnight-blue-900: #17202a, + + +// Sunflower +// ---------------------------------------------------------------------------- + + sunflower: #f1c40f, + sunflower-50: #fef9e7, + sunflower-100: #fcf3cf, + sunflower-200: #f9e79f, + sunflower-300: #f7dc6f, + sunflower-400: #f4d03f, + sunflower-500: #f1c40f, + sunflower-600: #d4ac0d, + sunflower-700: #b7950b, + sunflower-800: #9a7d0a, + sunflower-900: #7d6608, + + +// Orange +// ---------------------------------------------------------------------------- + + orange: #f39c12, + orange-50: #fef5e7, + orange-100: #fdebd0, + orange-200: #fad7a0, + orange-300: #f8c471, + orange-400: #f5b041, + orange-500: #f39c12, + orange-600: #d68910, + orange-700: #b9770e, + orange-800: #9c640c, + orange-900: #7e5109, + + +// Carrot +// ---------------------------------------------------------------------------- + + carrot: #e67e22, + carrot-50: #fdf2e9, + carrot-100: #fae5d3, + carrot-200: #f5cba7, + carrot-300: #f0b27a, + carrot-400: #eb984e, + carrot-500: #e67e22, + carrot-600: #ca6f1e, + carrot-700: #af601a, + carrot-800: #935116, + carrot-900: #784212, + + +// Pumpkin +// ---------------------------------------------------------------------------- + + pumpkin: #d35400, + pumpkin-50: #fbeee6, + pumpkin-100: #f6ddcc, + pumpkin-200: #edbb99, + pumpkin-300: #e59866, + pumpkin-400: #dc7633, + pumpkin-500: #d35400, + pumpkin-600: #ba4a00, + pumpkin-700: #a04000, + pumpkin-800: #873600, + pumpkin-900: #6e2c00, + + +// Alizarin +// ---------------------------------------------------------------------------- + + alizarin: #e74c3c, + alizarin-50: #fdedec, + alizarin-100: #fadbd8, + alizarin-200: #f5b7b1, + alizarin-300: #f1948a, + alizarin-400: #ec7063, + alizarin-500: #e74c3c, + alizarin-600: #cb4335, + alizarin-700: #b03a2e, + alizarin-800: #943126, + alizarin-900: #78281f, + + +// Pomegranate +// ---------------------------------------------------------------------------- + + pomegranate: #c0392b, + pomegranate-50: #f9ebea, + pomegranate-100: #f2d7d5, + pomegranate-200: #e6b0aa, + pomegranate-300: #d98880, + pomegranate-400: #cd6155, + pomegranate-500: #c0392b, + pomegranate-600: #a93226, + pomegranate-700: #922b21, + pomegranate-800: #7b241c, + pomegranate-900: #641e16, + + +// Clouds +// ---------------------------------------------------------------------------- + + clouds: #ecf0f1, + clouds-50: #fdfefe, + clouds-100: #fbfcfc, + clouds-200: #f7f9f9, + clouds-300: #f4f6f7, + clouds-400: #f0f3f4, + clouds-500: #ecf0f1, + clouds-600: #d0d3d4, + clouds-700: #b3b6b7, + clouds-800: #979a9a, + clouds-900: #7b7d7d, + + +// Silver +// ---------------------------------------------------------------------------- + + silver: #bdc3c7, + silver-50: #f8f9f9, + silver-100: #f2f3f4, + silver-200: #e5e7e9, + silver-300: #d7dbdd, + silver-400: #cacfd2, + silver-500: #bdc3c7, + silver-600: #a6acaf, + silver-700: #909497, + silver-800: #797d7f, + silver-900: #626567, + + +// Concrete +// ---------------------------------------------------------------------------- + + concrete: #95a5a6, + concrete-50: #f4f6f6, + concrete-100: #eaeded, + concrete-200: #d5dbdb, + concrete-300: #bfc9ca, + concrete-400: #aab7b8, + concrete-500: #95a5a6, + concrete-600: #839192, + concrete-700: #717d7e, + concrete-800: #5f6a6a, + concrete-900: #4d5656, + + +// Asbestos +// ---------------------------------------------------------------------------- + + asbestos: #7f8c8d, + asbestos-50: #f2f4f4, + asbestos-100: #e5e8e8, + asbestos-200: #ccd1d1, + asbestos-300: #b2babb, + asbestos-400: #99a3a4, + asbestos-500: #7f8c8d, + asbestos-600: #707b7c, + asbestos-700: #616a6b, + asbestos-800: #515a5a, + asbestos-900: #424949, + +) \ No newline at end of file diff --git a/src/scss/standards/_flat_design_hex_var.scss b/src/scss/standards/_flat_design_hex_var.scss new file mode 100644 index 0000000..5179825 --- /dev/null +++ b/src/scss/standards/_flat_design_hex_var.scss @@ -0,0 +1,338 @@ +// Copyright 2023 Scape Agency BV + +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at + +// http://www.apache.org/licenses/LICENSE-2.0 + +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + + +// ============================================================================ +// Flat Design Colors +// ============================================================================ + + +// Turquoise +// ---------------------------------------------------------------------------- + +$turquoise: #1abc9c; +$turquoise-50: #e8f8f5; +$turquoise-100: #d1f2eb; +$turquoise-200: #a3e4d7; +$turquoise-300: #76d7c4; +$turquoise-400: #48c9b0; +$turquoise-500: #1abc9c; +$turquoise-600: #17a589; +$turquoise-700: #148f77; +$turquoise-800: #117864; +$turquoise-900: #0e6251; + + +// Green Sea +// ---------------------------------------------------------------------------- + +$green-sea: #16a085; +$green-sea-50: #e8f6f3; +$green-sea-100: #d0ece7; +$green-sea-200: #a2d9ce; +$green-sea-300: #73c6b6; +$green-sea-400: #45b39d; +$green-sea-500: #16a085; +$green-sea-600: #138d75; +$green-sea-700: #117a65; +$green-sea-800: #0e6655; +$green-sea-900: #0b5345; + + +// Emerald +// ---------------------------------------------------------------------------- + +$emerald: #2ecc71; +$emerald-50: #eafaf1; +$emerald-100: #d5f5e3; +$emerald-200: #abebc6; +$emerald-300: #82e0aa; +$emerald-400: #58d68d; +$emerald-500: #2ecc71; +$emerald-600: #28b463; +$emerald-700: #239b56; +$emerald-800: #1d8348; +$emerald-900: #186a3b; + + +// Nephritis +// ---------------------------------------------------------------------------- + +$nephritis: #27ae60; +$nephritis-50: #e9f7ef; +$nephritis-100: #d4efdf; +$nephritis-200: #a9dfbf; +$nephritis-300: #7dcea0; +$nephritis-400: #52be80; +$nephritis-500: #27ae60; +$nephritis-600: #229954; +$nephritis-700: #1e8449; +$nephritis-800: #196f3d; +$nephritis-900: #145a32; + + +// Peter River +// ---------------------------------------------------------------------------- + +$peter-river: #3498db; +$peter-river-50: #ebf5fb; +$peter-river-100: #d6eaf8; +$peter-river-200: #aed6f1; +$peter-river-300: #85c1e9; +$peter-river-400: #5dade2; +$peter-river-500: #3498db; +$peter-river-600: #2e86c1; +$peter-river-700: #2874a6; +$peter-river-800: #21618c; +$peter-river-900: #1b4f72; + + +// Belize Hole +// ---------------------------------------------------------------------------- + +$belize-hole: #2980b9; +$belize-hole-50: #eaf2f8; +$belize-hole-100: #d4e6f1; +$belize-hole-200: #a9cce3; +$belize-hole-300: #7fb3d5; +$belize-hole-400: #5499c7; +$belize-hole-500: #2980b9; +$belize-hole-600: #2471a3; +$belize-hole-700: #1f618d; +$belize-hole-800: #1a5276; +$belize-hole-900: #154360; + + +// Amethyst +// ---------------------------------------------------------------------------- + +$amethyst: #9b59b6; +$amethyst-50: #f5eef8; +$amethyst-100: #ebdef0; +$amethyst-200: #d7bde2; +$amethyst-300: #c39bd3; +$amethyst-400: #af7ac5; +$amethyst-500: #9b59b6; +$amethyst-600: #884ea0; +$amethyst-700: #76448a; +$amethyst-800: #633974; +$amethyst-900: #512e5f; + + +// Wisteria +// ---------------------------------------------------------------------------- + +$wisteria: #8e44ad; +$wisteria-50: #f4ecf7; +$wisteria-100: #e8daef; +$wisteria-200: #d2b4de; +$wisteria-300: #bb8fce; +$wisteria-400: #a569bd; +$wisteria-500: #8e44ad; +$wisteria-600: #7d3c98; +$wisteria-700: #6c3483; +$wisteria-800: #5b2c6f; +$wisteria-900: #4a235a; + + +// Wet Asphalt +// ---------------------------------------------------------------------------- + +$wet-asphalt: #34495e; +$wet-asphalt-50: #ebedef; +$wet-asphalt-100: #d6dbdf; +$wet-asphalt-200: #aeb6bf; +$wet-asphalt-300: #85929e; +$wet-asphalt-400: #5d6d7e; +$wet-asphalt-500: #34495e; +$wet-asphalt-600: #2e4053; +$wet-asphalt-700: #283747; +$wet-asphalt-800: #212f3c; +$wet-asphalt-900: #1b2631; + + +// Midnight Blue +// ---------------------------------------------------------------------------- + +$midnight-blue: #2c3e50; +$midnight-blue-50: #eaecee; +$midnight-blue-100: #d5d8dc; +$midnight-blue-200: #abb2b9; +$midnight-blue-300: #808b96; +$midnight-blue-400: #566573; +$midnight-blue-500: #2c3e50; +$midnight-blue-600: #273746; +$midnight-blue-700: #212f3d; +$midnight-blue-800: #1c2833; +$midnight-blue-900: #17202a; + + +// Sunflower +// ---------------------------------------------------------------------------- + +$sunflower: #f1c40f; +$sunflower-50: #fef9e7; +$sunflower-100: #fcf3cf; +$sunflower-200: #f9e79f; +$sunflower-300: #f7dc6f; +$sunflower-400: #f4d03f; +$sunflower-500: #f1c40f; +$sunflower-600: #d4ac0d; +$sunflower-700: #b7950b; +$sunflower-800: #9a7d0a; +$sunflower-900: #7d6608; + + +// Orange +// ---------------------------------------------------------------------------- + +$orange: #f39c12; +$orange-50: #fef5e7; +$orange-100: #fdebd0; +$orange-200: #fad7a0; +$orange-300: #f8c471; +$orange-400: #f5b041; +$orange-500: #f39c12; +$orange-600: #d68910; +$orange-700: #b9770e; +$orange-800: #9c640c; +$orange-900: #7e5109; + + +// Carrot +// ---------------------------------------------------------------------------- + +$carrot: #e67e22; +$carrot-50: #fdf2e9; +$carrot-100: #fae5d3; +$carrot-200: #f5cba7; +$carrot-300: #f0b27a; +$carrot-400: #eb984e; +$carrot-500: #e67e22; +$carrot-600: #ca6f1e; +$carrot-700: #af601a; +$carrot-800: #935116; +$carrot-900: #784212; + + +// Pumpkin +// ---------------------------------------------------------------------------- + +$pumpkin: #d35400; +$pumpkin-50: #fbeee6; +$pumpkin-100: #f6ddcc; +$pumpkin-200: #edbb99; +$pumpkin-300: #e59866; +$pumpkin-400: #dc7633; +$pumpkin-500: #d35400; +$pumpkin-600: #ba4a00; +$pumpkin-700: #a04000; +$pumpkin-800: #873600; +$pumpkin-900: #6e2c00; + + +// Alizarin +// ---------------------------------------------------------------------------- + +$alizarin: #e74c3c; +$alizarin-50: #fdedec; +$alizarin-100: #fadbd8; +$alizarin-200: #f5b7b1; +$alizarin-300: #f1948a; +$alizarin-400: #ec7063; +$alizarin-500: #e74c3c; +$alizarin-600: #cb4335; +$alizarin-700: #b03a2e; +$alizarin-800: #943126; +$alizarin-900: #78281f; + + +// Pomegranate +// ---------------------------------------------------------------------------- + +$pomegranate: #c0392b; +$pomegranate-50: #f9ebea; +$pomegranate-100: #f2d7d5; +$pomegranate-200: #e6b0aa; +$pomegranate-300: #d98880; +$pomegranate-400: #cd6155; +$pomegranate-500: #c0392b; +$pomegranate-600: #a93226; +$pomegranate-700: #922b21; +$pomegranate-800: #7b241c; +$pomegranate-900: #641e16; + + +// Clouds +// ---------------------------------------------------------------------------- + +$clouds: #ecf0f1; +$clouds-50: #fdfefe; +$clouds-100: #fbfcfc; +$clouds-200: #f7f9f9; +$clouds-300: #f4f6f7; +$clouds-400: #f0f3f4; +$clouds-500: #ecf0f1; +$clouds-600: #d0d3d4; +$clouds-700: #b3b6b7; +$clouds-800: #979a9a; +$clouds-900: #7b7d7d; + + +// Silver +// ---------------------------------------------------------------------------- + +$silver: #bdc3c7; +$silver-50: #f8f9f9; +$silver-100: #f2f3f4; +$silver-200: #e5e7e9; +$silver-300: #d7dbdd; +$silver-400: #cacfd2; +$silver-500: #bdc3c7; +$silver-600: #a6acaf; +$silver-700: #909497; +$silver-800: #797d7f; +$silver-900: #626567; + + +// Concrete +// ---------------------------------------------------------------------------- + +$concrete: #95a5a6; +$concrete-50: #f4f6f6; +$concrete-100: #eaeded; +$concrete-200: #d5dbdb; +$concrete-300: #bfc9ca; +$concrete-400: #aab7b8; +$concrete-500: #95a5a6; +$concrete-600: #839192; +$concrete-700: #717d7e; +$concrete-800: #5f6a6a; +$concrete-900: #4d5656; + + +// Asbestos +// ---------------------------------------------------------------------------- + +$asbestos: #7f8c8d; +$asbestos-50: #f2f4f4; +$asbestos-100: #e5e8e8; +$asbestos-200: #ccd1d1; +$asbestos-300: #b2babb; +$asbestos-400: #99a3a4; +$asbestos-500: #7f8c8d; +$asbestos-600: #707b7c; +$asbestos-700: #616a6b; +$asbestos-800: #515a5a; +$asbestos-900: #424949; \ No newline at end of file diff --git a/src/scss/standards/_material_design_colors.scss b/src/scss/standards/_material_design_colors.scss deleted file mode 100644 index 2143ca0..0000000 --- a/src/scss/standards/_material_design_colors.scss +++ /dev/null @@ -1,93 +0,0 @@ -/* Material Design color palette downloaded from - * http://htmlcolorcodes.com/color-charts/ - * - * Check out our powerful color picker - * http://htmlcolorcodes.com/color-picker/ - * - * Want to learn more about colors in SCSS? - * http://htmlcolorcodes.com/tutorials/ - * - * - - - - - - - - - - - - - - - - - - - * Credits: - * - * Original color palette by - * https://www.google.com/design/spec/style/color.html - * - * - - - - - - - - - - - - - - - - - - - * How to use: - * - * Include this file with your other .scss files: - * - * @import "material_colors"; - * - * and use the color variables in your stylesheets: - * - * .class { - * color: $red; - * } - */ - -/* Red */ -$red: #f44336; - -/* Pink */ -$pink: #e91e63; - -/* Purple */ -$purple: #9c27b0; - -/* Deep Purple */ -$deep-purple: #673ab7; - -/* Indigo */ -$indigo: #3f51b5; - -/* Blue */ -$blue: #2196f3; - -/* Light Blue */ -$light-blue: #03a9f4; - -/* Cyan */ -$cyan: #00bcd4; - -/* Teal */ -$teal: #009688; - -/* Green */ -$green: #4caf50; - -/* Light Green */ -$light-green: #8bc34a; - -/* Lime */ -$lime: #cddc39; - -/* Yellow */ -$yellow: #ffeb3b; - -/* Amber */ -$amber: #ffc107; - -/* Orange */ -$orange: #ff9800; - -/* Deep Orange */ -$deep-orange: #ff5722; - -/* Brown */ -$brown: #795548; - -/* Grey */ -$grey: #9e9e9e; - -/* Blue Grey */ -$blue-grey: #607d8b; - -/* White / Black */ -$white: #ffffff; -$black: #000000; - -/* Want more? Get the full Material Design color palette at - * http://htmlcolorcodes.com/color-charts/ - */ \ No newline at end of file diff --git a/src/scss/standards/_material_design_hex_map.scss b/src/scss/standards/_material_design_hex_map.scss new file mode 100644 index 0000000..17ede17 --- /dev/null +++ b/src/scss/standards/_material_design_hex_map.scss @@ -0,0 +1,396 @@ +// Copyright 2023 Scape Agency BV + +// Licensed under the Apache License, Version 2.0 (the "License"), +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at + +// http://www.apache.org/licenses/LICENSE-2.0 + +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + + +// ============================================================================ +// Material Design Colors +// ============================================================================ + +$color_material_design_hex: ( + + +// Red +// ---------------------------------------------------------------------------- + + red: #f44336, + red-50: #ffebee, + red-100: #ffcdd2, + red-200: #ef9a9a, + red-300: #e57373, + red-400: #ef5350, + red-500: #f44336, + red-600: #e53935, + red-700: #d32f2f, + red-800: #c62828, + red-900: #b71c1c, + red-a100: #ff8a80, + red-a200: #ff5252, + red-a400: #ff1744, + red-a700: #d50000, + + + +// Pink +// ---------------------------------------------------------------------------- + + pink: #e91e63, + pink-50: #fce4ec, + pink-100: #f8bbd0, + pink-200: #f48fb1, + pink-300: #f06292, + pink-400: #ec407a, + pink-500: #e91e63, + pink-600: #d81b60, + pink-700: #c2185b, + pink-800: #ad1457, + pink-900: #880e4f, + pink-a100: #ff80ab, + pink-a200: #ff4081, + pink-a400: #f50057, + pink-a700: #c51162, + + +// Purple +// ---------------------------------------------------------------------------- + + purple: #9c27b0, + purple-50: #f3e5f5, + purple-100: #e1bee7, + purple-200: #ce93d8, + purple-300: #ba68c8, + purple-400: #ab47bc, + purple-500: #9c27b0, + purple-600: #8e24aa, + purple-700: #7b1fa2, + purple-800: #6a1b9a, + purple-900: #4a148c, + purple-a100: #ea80fc, + purple-a200: #e040fb, + purple-a400: #d500f9, + purple-a700: #aa00ff, + + +// Deep Purple +// ---------------------------------------------------------------------------- + + deep-purple: #673ab7, + deep-purple-50: #ede7f6, + deep-purple-100: #d1c4e9, + deep-purple-200: #b39ddb, + deep-purple-300: #9575cd, + deep-purple-400: #7e57c2, + deep-purple-500: #673ab7, + deep-purple-600: #5e35b1, + deep-purple-700: #512da8, + deep-purple-800: #4527a0, + deep-purple-900: #311b92, + deep-purple-a100: #b388ff, + deep-purple-a200: #7c4dff, + deep-purple-a400: #651fff, + deep-purple-a700: #6200ea, + + +// Indigo +// ---------------------------------------------------------------------------- + + indigo: #3f51b5, + indigo-50: #e8eaf6, + indigo-100: #c5cae9, + indigo-200: #9fa8da, + indigo-300: #7986cb, + indigo-400: #5c6bc0, + indigo-500: #3f51b5, + indigo-600: #3949ab, + indigo-700: #303f9f, + indigo-800: #283593, + indigo-900: #1a237e, + indigo-a100: #8c9eff, + indigo-a200: #536dfe, + indigo-a400: #3d5afe, + indigo-a700: #304ffe, + + +// Blue +// ---------------------------------------------------------------------------- + + blue: #2196f3, + blue-50: #e3f2fd, + blue-100: #bbdefb, + blue-200: #90caf9, + blue-300: #64b5f6, + blue-400: #42a5f5, + blue-500: #2196f3, + blue-600: #1e88e5, + blue-700: #1976d2, + blue-800: #1565c0, + blue-900: #0d47a1, + blue-a100: #82b1ff, + blue-a200: #448aff, + blue-a400: #2979ff, + blue-a700: #2962ff, + + +// Light Blue +// ---------------------------------------------------------------------------- + + light-blue: #03a9f4, + light-blue-50: #e1f5fe, + light-blue-100: #b3e5fc, + light-blue-200: #81d4fa, + light-blue-300: #4fc3f7, + light-blue-400: #29b6f6, + light-blue-500: #03a9f4, + light-blue-600: #039be5, + light-blue-700: #0288d1, + light-blue-800: #0277bd, + light-blue-900: #01579b, + light-blue-a100: #80d8ff, + light-blue-a200: #40c4ff, + light-blue-a400: #00b0ff, + light-blue-a700: #0091ea, + + +// Cyan +// ---------------------------------------------------------------------------- + + cyan: #00bcd4, + cyan-50: #e0f7fa, + cyan-100: #b2ebf2, + cyan-200: #80deea, + cyan-300: #4dd0e1, + cyan-400: #26c6da, + cyan-500: #00bcd4, + cyan-600: #00acc1, + cyan-700: #0097a7, + cyan-800: #00838f, + cyan-900: #006064, + cyan-a100: #84ffff, + cyan-a200: #18ffff, + cyan-a400: #00e5ff, + cyan-a700: #00b8d4, + + +// Teal +// ---------------------------------------------------------------------------- + + teal: #009688, + teal-50: #e0f2f1, + teal-100: #b2dfdb, + teal-200: #80cbc4, + teal-300: #4db6ac, + teal-400: #26a69a, + teal-500: #009688, + teal-600: #00897b, + teal-700: #00796b, + teal-800: #00695c, + teal-900: #004d40, + teal-a100: #a7ffeb, + teal-a200: #64ffda, + teal-a400: #1de9b6, + teal-a700: #00bfa5, + + +// Green +// ---------------------------------------------------------------------------- + + green: #4caf50, + green-50: #e8f5e9, + green-100: #c8e6c9, + green-200: #a5d6a7, + green-300: #81c784, + green-400: #66bb6a, + green-500: #4caf50, + green-600: #43a047, + green-700: #388e3c, + green-800: #2e7d32, + green-900: #1b5e20, + green-a100: #b9f6ca, + green-a200: #69f0ae, + green-a400: #00e676, + green-a700: #00c853, + + +// Light Green +// ---------------------------------------------------------------------------- + + light-green: #8bc34a, + light-green-50: #f1f8e9, + light-green-100: #dcedc8, + light-green-200: #c5e1a5, + light-green-300: #aed581, + light-green-400: #9ccc65, + light-green-500: #8bc34a, + light-green-600: #7cb342, + light-green-700: #689f38, + light-green-800: #558b2f, + light-green-900: #33691e, + light-green-a100: #ccff90, + light-green-a200: #b2ff59, + light-green-a400: #76ff03, + light-green-a700: #64dd17, + + +// Lime +// ---------------------------------------------------------------------------- + + lime: #cddc39, + lime-50: #f9fbe7, + lime-100: #f0f4c3, + lime-200: #e6ee9c, + lime-300: #dce775, + lime-400: #d4e157, + lime-500: #cddc39, + lime-600: #c0ca33, + lime-700: #afb42b, + lime-800: #9e9d24, + lime-900: #827717, + lime-a100: #f4ff81, + lime-a200: #eeff41, + lime-a400: #c6ff00, + lime-a700: #aeea00, + + +// Yellow +// ---------------------------------------------------------------------------- + + yellow: #ffeb3b, + yellow-50: #fffde7, + yellow-100: #fff9c4, + yellow-200: #fff59d, + yellow-300: #fff176, + yellow-400: #ffee58, + yellow-500: #ffeb3b, + yellow-600: #fdd835, + yellow-700: #fbc02d, + yellow-800: #f9a825, + yellow-900: #f57f17, + yellow-a100: #ffff8d, + yellow-a200: #ffff00, + yellow-a400: #ffea00, + yellow-a700: #ffd600, + + +// Amber +// ---------------------------------------------------------------------------- + + amber: #ffc107, + amber-50: #fff8e1, + amber-100: #ffecb3, + amber-200: #ffe082, + amber-300: #ffd54f, + amber-400: #ffca28, + amber-500: #ffc107, + amber-600: #ffb300, + amber-700: #ffa000, + amber-800: #ff8f00, + amber-900: #ff6f00, + amber-a100: #ffe57f, + amber-a200: #ffd740, + amber-a400: #ffc400, + amber-a700: #ffab00, + + +// Orange +// ---------------------------------------------------------------------------- + + orange: #ff9800, + orange-50: #fff3e0, + orange-100: #ffe0b2, + orange-200: #ffcc80, + orange-300: #ffb74d, + orange-400: #ffa726, + orange-500: #ff9800, + orange-600: #fb8c00, + orange-700: #f57c00, + orange-800: #ef6c00, + orange-900: #e65100, + orange-a100: #ffd180, + orange-a200: #ffab40, + orange-a400: #ff9100, + orange-a700: #ff6d00, + + +// Deep Orange +// ---------------------------------------------------------------------------- + + deep-orange: #ff5722, + deep-orange-50: #fbe9e7, + deep-orange-100: #ffccbc, + deep-orange-200: #ffab91, + deep-orange-300: #ff8a65, + deep-orange-400: #ff7043, + deep-orange-500: #ff5722, + deep-orange-600: #f4511e, + deep-orange-700: #e64a19, + deep-orange-800: #d84315, + deep-orange-900: #bf360c, + deep-orange-a100: #ff9e80, + deep-orange-a200: #ff6e40, + deep-orange-a400: #ff3d00, + deep-orange-a700: #dd2c00, + + +// Brown +// ---------------------------------------------------------------------------- + + brown: #795548, + brown-50: #efebe9, + brown-100: #d7ccc8, + brown-200: #bcaaa4, + brown-300: #a1887f, + brown-400: #8d6e63, + brown-500: #795548, + brown-600: #6d4c41, + brown-700: #5d4037, + brown-800: #4e342e, + brown-900: #3e2723, + + +// Grey +// ---------------------------------------------------------------------------- + + grey: #9e9e9e, + grey-50: #fafafa, + grey-100: #f5f5f5, + grey-200: #eeeeee, + grey-300: #e0e0e0, + grey-400: #bdbdbd, + grey-500: #9e9e9e, + grey-600: #757575, + grey-700: #616161, + grey-800: #424242, + grey-900: #212121, + + +// Blue Grey +// ---------------------------------------------------------------------------- + + blue-grey: #607d8b, + blue-grey-50: #eceff1, + blue-grey-100: #cfd8dc, + blue-grey-200: #b0bec5, + blue-grey-300: #90a4ae, + blue-grey-400: #78909c, + blue-grey-500: #607d8b, + blue-grey-600: #546e7a, + blue-grey-700: #455a64, + blue-grey-800: #37474f, + blue-grey-900: #263238, + + +// White / Black +// ---------------------------------------------------------------------------- + + white: #ffffff, + black: #000000, \ No newline at end of file diff --git a/src/scss/standards/_material_design_colors_full.scss b/src/scss/standards/_material_design_hex_var.scss similarity index 69% rename from src/scss/standards/_material_design_colors_full.scss rename to src/scss/standards/_material_design_hex_var.scss index d157541..32ba33a 100644 --- a/src/scss/standards/_material_design_colors_full.scss +++ b/src/scss/standards/_material_design_hex_var.scss @@ -1,41 +1,27 @@ -/* Material Design color palette (full) downloaded from - * http://htmlcolorcodes.com/color-charts/ - * - * Check out our powerful color picker - * http://htmlcolorcodes.com/color-picker/ - * - * Want to learn more about colors in SCSS? - * http://htmlcolorcodes.com/tutorials/ - * - * - - - - - - - - - - - - - - - - - - - * Credits: - * - * Original color palette by - * https://www.google.com/design/spec/style/color.html - * - * - - - - - - - - - - - - - - - - - - - * How to use: - * - * Include this file with your other .scss files: - * - * @import "material_colors_full"; - * - * and use the color variables in your stylesheets: - * - * .class { - * color: $red-500; - * } - * - * - - - - - - - - - - - - - - - - - - - * Note: - * - * $color and $color-500 are the same, simply there - * for your convenience. - * - * Variables with numbers prefixed by 'a' are accent colors - */ - -/* Red */ +// Copyright 2023 Scape Agency BV + +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at + +// http://www.apache.org/licenses/LICENSE-2.0 + +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + + +// ============================================================================ +// Material Design Colors +// ============================================================================ + + + +// Red +// ---------------------------------------------------------------------------- + $red: #f44336; $red-50: #ffebee; $red-100: #ffcdd2; @@ -52,7 +38,11 @@ $red-a200: #ff5252; $red-a400: #ff1744; $red-a700: #d50000; -/* Pink */ + + +// Pink +// ---------------------------------------------------------------------------- + $pink: #e91e63; $pink-50: #fce4ec; $pink-100: #f8bbd0; @@ -69,7 +59,10 @@ $pink-a200: #ff4081; $pink-a400: #f50057; $pink-a700: #c51162; -/* Purple */ + +// Purple +// ---------------------------------------------------------------------------- + $purple: #9c27b0; $purple-50: #f3e5f5; $purple-100: #e1bee7; @@ -86,7 +79,10 @@ $purple-a200: #e040fb; $purple-a400: #d500f9; $purple-a700: #aa00ff; -/* Deep Purple */ + +// Deep Purple +// ---------------------------------------------------------------------------- + $deep-purple: #673ab7; $deep-purple-50: #ede7f6; $deep-purple-100: #d1c4e9; @@ -103,7 +99,10 @@ $deep-purple-a200: #7c4dff; $deep-purple-a400: #651fff; $deep-purple-a700: #6200ea; -/* Indigo */ + +// Indigo +// ---------------------------------------------------------------------------- + $indigo: #3f51b5; $indigo-50: #e8eaf6; $indigo-100: #c5cae9; @@ -120,7 +119,10 @@ $indigo-a200: #536dfe; $indigo-a400: #3d5afe; $indigo-a700: #304ffe; -/* Blue */ + +// Blue +// ---------------------------------------------------------------------------- + $blue: #2196f3; $blue-50: #e3f2fd; $blue-100: #bbdefb; @@ -137,7 +139,10 @@ $blue-a200: #448aff; $blue-a400: #2979ff; $blue-a700: #2962ff; -/* Light Blue */ + +// Light Blue +// ---------------------------------------------------------------------------- + $light-blue: #03a9f4; $light-blue-50: #e1f5fe; $light-blue-100: #b3e5fc; @@ -154,7 +159,10 @@ $light-blue-a200: #40c4ff; $light-blue-a400: #00b0ff; $light-blue-a700: #0091ea; -/* Cyan */ + +// Cyan +// ---------------------------------------------------------------------------- + $cyan: #00bcd4; $cyan-50: #e0f7fa; $cyan-100: #b2ebf2; @@ -171,7 +179,10 @@ $cyan-a200: #18ffff; $cyan-a400: #00e5ff; $cyan-a700: #00b8d4; -/* Teal */ + +// Teal +// ---------------------------------------------------------------------------- + $teal: #009688; $teal-50: #e0f2f1; $teal-100: #b2dfdb; @@ -188,7 +199,10 @@ $teal-a200: #64ffda; $teal-a400: #1de9b6; $teal-a700: #00bfa5; -/* Green */ + +// Green +// ---------------------------------------------------------------------------- + $green: #4caf50; $green-50: #e8f5e9; $green-100: #c8e6c9; @@ -205,7 +219,10 @@ $green-a200: #69f0ae; $green-a400: #00e676; $green-a700: #00c853; -/* Light Green */ + +// Light Green +// ---------------------------------------------------------------------------- + $light-green: #8bc34a; $light-green-50: #f1f8e9; $light-green-100: #dcedc8; @@ -222,7 +239,10 @@ $light-green-a200: #b2ff59; $light-green-a400: #76ff03; $light-green-a700: #64dd17; -/* Lime */ + +// Lime +// ---------------------------------------------------------------------------- + $lime: #cddc39; $lime-50: #f9fbe7; $lime-100: #f0f4c3; @@ -239,7 +259,10 @@ $lime-a200: #eeff41; $lime-a400: #c6ff00; $lime-a700: #aeea00; -/* Yellow */ + +// Yellow +// ---------------------------------------------------------------------------- + $yellow: #ffeb3b; $yellow-50: #fffde7; $yellow-100: #fff9c4; @@ -256,7 +279,10 @@ $yellow-a200: #ffff00; $yellow-a400: #ffea00; $yellow-a700: #ffd600; -/* Amber */ + +// Amber +// ---------------------------------------------------------------------------- + $amber: #ffc107; $amber-50: #fff8e1; $amber-100: #ffecb3; @@ -273,7 +299,10 @@ $amber-a200: #ffd740; $amber-a400: #ffc400; $amber-a700: #ffab00; -/* Orange */ + +// Orange +// ---------------------------------------------------------------------------- + $orange: #ff9800; $orange-50: #fff3e0; $orange-100: #ffe0b2; @@ -290,7 +319,10 @@ $orange-a200: #ffab40; $orange-a400: #ff9100; $orange-a700: #ff6d00; -/* Deep Orange */ + +// Deep Orange +// ---------------------------------------------------------------------------- + $deep-orange: #ff5722; $deep-orange-50: #fbe9e7; $deep-orange-100: #ffccbc; @@ -307,7 +339,10 @@ $deep-orange-a200: #ff6e40; $deep-orange-a400: #ff3d00; $deep-orange-a700: #dd2c00; -/* Brown */ + +// Brown +// ---------------------------------------------------------------------------- + $brown: #795548; $brown-50: #efebe9; $brown-100: #d7ccc8; @@ -320,7 +355,10 @@ $brown-700: #5d4037; $brown-800: #4e342e; $brown-900: #3e2723; -/* Grey */ + +// Grey +// ---------------------------------------------------------------------------- + $grey: #9e9e9e; $grey-50: #fafafa; $grey-100: #f5f5f5; @@ -333,7 +371,10 @@ $grey-700: #616161; $grey-800: #424242; $grey-900: #212121; -/* Blue Grey */ + +// Blue Grey +// ---------------------------------------------------------------------------- + $blue-grey: #607d8b; $blue-grey-50: #eceff1; $blue-grey-100: #cfd8dc; @@ -346,10 +387,9 @@ $blue-grey-700: #455a64; $blue-grey-800: #37474f; $blue-grey-900: #263238; -/* White / Black */ -$white: #ffffff; -$black: #000000; -/* Want more? Check our our other color palettes at - * http://htmlcolorcodes.com/color-charts/ - */ \ No newline at end of file +// White / Black +// ---------------------------------------------------------------------------- + +$white: #ffffff; +$black: #000000; \ No newline at end of file diff --git a/src/scss/standards/_tailwind_hex_map.scss b/src/scss/standards/_tailwind_hex_map.scss new file mode 100644 index 0000000..d835da6 --- /dev/null +++ b/src/scss/standards/_tailwind_hex_map.scss @@ -0,0 +1,765 @@ +// Copyright 2023 Scape Agency BV + +// Licensed under the Apache License, Version 2.0 (the License"), +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at + +// http://www.apache.org/licenses/LICENSE-2.0 + +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + + +// ============================================================================ +// Color | Tailwind +// ============================================================================ + +$color_tailwind_design_hex: ( + +// Color | Tailwind | Base +// ---------------------------------------------------------------------------- + + transparent: transparent, + black: #000000, + white: #ffffff, + + +// Color | Tailwind | Red +// ---------------------------------------------------------------------------- + + red: #f44336, + red-50: #ffebee, + red-100: #ffcdd2, + red-200: #ef9a9a, + red-300: #e57373, + red-400: #ef5350, + red-500: #f44336, + red-600: #e53935, + red-700: #d32f2f, + red-800: #c62828, + red-900: #b71c1c, + red-100-accent: #ff8a80, + red-200-accent: #ff5252, + red-400-accent: #ff1744, + red-700-accent: #d50000, + + +// Color | Tailwind | Pink +// ---------------------------------------------------------------------------- + + pink: #e91e63, + pink-50: #fce4ec, + pink-100: #f8bbd0, + pink-200: #f48fb1, + pink-300: #f06292, + pink-400: #ec407a, + pink-500: #e91e63, + pink-600: #d81b60, + pink-700: #c2185b, + pink-800: #ad1457, + pink-900: #880e4f, + pink-100-accent: #ff80ab, + pink-200-accent: #ff4081, + pink-400-accent: #f50057, + pink-700-accent: #c51162, + + +// Color | Tailwind | Purple +// ---------------------------------------------------------------------------- + + purple: #9c27b0, + purple-50: #f3e5f5, + purple-100: #e1bee7, + purple-200: #ce93d8, + purple-300: #ba68c8, + purple-400: #ab47bc, + purple-500: #9c27b0, + purple-600: #8e24aa, + purple-700: #7b1fa2, + purple-800: #6a1b9a, + purple-900: #4a148c, + purple-100-accent: #ea80fc, + purple-200-accent: #e040fb, + purple-400-accent: #d500f9, + purple-700-accent: #aa00ff, + + +// Color | Tailwind | Deep Purple +// ---------------------------------------------------------------------------- + + deep-purple: #673ab7, + deep-purple-50: #ede7f6, + deep-purple-100: #d1c4e9, + deep-purple-200: #b39ddb, + deep-purple-300: #9575cd, + deep-purple-400: #7e57c2, + deep-purple-500: #673ab7, + deep-purple-600: #5e35b1, + deep-purple-700: #512da8, + deep-purple-800: #4527a0, + deep-purple-900: #311b92, + deep-purple-100-accent: #b388ff, + deep-purple-200-accent: #7c4dff, + deep-purple-400-accent: #651fff, + deep-purple-700-accent: #6200ea, + + +// Color | Tailwind | Indigo +// ---------------------------------------------------------------------------- + + indigo: #3f51b5, + indigo-50: #e8eaf6, + indigo-100: #c5cae9, + indigo-200: #9fa8da, + indigo-300: #7986cb, + indigo-400: #5c6bc0, + indigo-500: #3f51b5, + indigo-600: #3949ab, + indigo-700: #303f9f, + indigo-800: #283593, + indigo-900: #1a237e, + indigo-100-accent: #8c9eff, + indigo-200-accent: #536dfe, + indigo-400-accent: #3d5afe, + indigo-700-accent: #304ffe, + + +// Color | Tailwind | Blue +// ---------------------------------------------------------------------------- + + blue: #2196f3, + blue-50: #e3f2fd, + blue-100: #bbdefb, + blue-200: #90caf9, + blue-300: #64b5f6, + blue-400: #42a5f5, + blue-500: #2196f3, + blue-600: #1e88e5, + blue-700: #1976d2, + blue-800: #1565c0, + blue-900: #0d47a1, + blue-100-accent: #82b1ff, + blue-200-accent: #448aff, + blue-400-accent: #2979ff, + blue-700-accent: #2962ff, + + +// Color | Tailwind | Light Blue +// ---------------------------------------------------------------------------- + + light-blue: #03a9f4, + light-blue-50: #e1f5fe, + light-blue-100: #b3e5fc, + light-blue-200: #81d4fa, + light-blue-300: #4fc3f7, + light-blue-400: #29b6f6, + light-blue-500: #03a9f4, + light-blue-600: #039be5, + light-blue-700: #0288d1, + light-blue-800: #0277bd, + light-blue-900: #01579b, + light-blue-100-accent: #80d8ff, + light-blue-200-accent: #40c4ff, + light-blue-400-accent: #00b0ff, + light-blue-700-accent: #0091ea, + + +// Color | Tailwind | Cyan +// ---------------------------------------------------------------------------- + + cyan: #00bcd4, + cyan-50: #e0f7fa, + cyan-100: #b2ebf2, + cyan-200: #80deea, + cyan-300: #4dd0e1, + cyan-400: #26c6da, + cyan-500: #00bcd4, + cyan-600: #00acc1, + cyan-700: #0097a7, + cyan-800: #00838f, + cyan-900: #006064, + cyan-100-accent: #84ffff, + cyan-200-accent: #18ffff, + cyan-400-accent: #00e5ff, + cyan-700-accent: #00b8d4, + + +// Color | Tailwind | Teal +// ---------------------------------------------------------------------------- + + teal: #009688, + teal-50: #e0f2f1, + teal-100: #b2dfdb, + teal-200: #80cbc4, + teal-300: #4db6ac, + teal-400: #26a69a, + teal-500: #009688, + teal-600: #00897b, + teal-700: #00796b, + teal-800: #00695c, + teal-900: #004d40, + teal-100-accent: #a7ffeb, + teal-200-accent: #64ffda, + teal-400-accent: #1de9b6, + teal-700-accent: #00bfa5, + + +// Color | Tailwind | Green +// ---------------------------------------------------------------------------- + + green: #4caf50, + green-50: #e8f5e9, + green-100: #c8e6c9, + green-200: #a5d6a7, + green-300: #81c784, + green-400: #66bb6a, + green-500: #4caf50, + green-600: #43a047, + green-700: #388e3c, + green-800: #2e7d32, + green-900: #1b5e20, + green-100-accent: #b9f6ca, + green-200-accent: #69f0ae, + green-400-accent: #00e676, + green-700-accent: #00c853, + + +// Color | Tailwind | Light Green +// ---------------------------------------------------------------------------- + + light-green: #8bc34a, + light-green-50: #f1f8e9, + light-green-100: #dcedc8, + light-green-200: #c5e1a5, + light-green-300: #aed581, + light-green-400: #9ccc65, + light-green-500: #8bc34a, + light-green-600: #7cb342, + light-green-700: #689f38, + light-green-800: #558b2f, + light-green-900: #33691e, + light-green-100-accent: #ccff90, + light-green-200-accent: #b2ff59, + light-green-400-accent: #76ff03, + light-green-700-accent: #64dd17, + + +// Color | Tailwind | Lime +// ---------------------------------------------------------------------------- + + lime: #cddc39, + lime-50: #f9fbe7, + lime-100: #f0f4c3, + lime-200: #e6ee9c, + lime-300: #dce775, + lime-400: #d4e157, + lime-500: #cddc39, + lime-600: #c0ca33, + lime-700: #afb42b, + lime-800: #9e9d24, + lime-900: #827717, + lime-100-accent: #f4ff81, + lime-200-accent: #eeff41, + lime-400-accent: #c6ff00, + lime-700-accent: #aeea00, + + +// Color | Tailwind | Yellow +// ---------------------------------------------------------------------------- + + yellow: #ffeb3b, + yellow-50: #fffde7, + yellow-100: #fff9c4, + yellow-200: #fff59d, + yellow-300: #fff176, + yellow-400: #ffee58, + yellow-500: #ffeb3b, + yellow-600: #fdd835, + yellow-700: #fbc02d, + yellow-800: #f9a825, + yellow-900: #f57f17, + yellow-100-accent: #ffff8d, + yellow-200-accent: #ffff00, + yellow-400-accent: #ffea00, + yellow-700-accent: #ffd600, + + +// Color | Tailwind | Amber +// ---------------------------------------------------------------------------- + + amber: #ffc107, + amber-50: #fff8e1, + amber-100: #ffecb3, + amber-200: #ffe082, + amber-300: #ffd54f, + amber-400: #ffca28, + amber-500: #ffc107, + amber-600: #ffb300, + amber-700: #ffa000, + amber-800: #ff8f00, + amber-900: #ff6f00, + amber-100-accent: #ffe57f, + amber-200-accent: #ffd740, + amber-400-accent: #ffc400, + amber-700-accent: #ffab00, + + +// Color | Tailwind | Orange +// ---------------------------------------------------------------------------- + + orange: #ff9800, + orange-50: #fff3e0, + orange-100: #ffe0b2, + orange-200: #ffcc80, + orange-300: #ffb74d, + orange-400: #ffa726, + orange-500: #ff9800, + orange-600: #fb8c00, + orange-700: #f57c00, + orange-800: #ef6c00, + orange-900: #e65100, + orange-100-accent: #ffd180, + orange-200-accent: #ffab40, + orange-400-accent: #ff9100, + orange-700-accent: #ff6d00, + + +// Color | Tailwind | Deep Orange +// ---------------------------------------------------------------------------- + + deep-orange: #ff5722, + deep-orange-50: #fbe9e7, + deep-orange-100: #ffccbc, + deep-orange-200: #ffab91, + deep-orange-300: #ff8a65, + deep-orange-400: #ff7043, + deep-orange-500: #ff5722, + deep-orange-600: #f4511e, + deep-orange-700: #e64a19, + deep-orange-800: #d84315, + deep-orange-900: #bf360c, + deep-orange-100-accent: #ff9e80, + deep-orange-200-accent: #ff6e40, + deep-orange-400-accent: #ff3d00, + deep-orange-700-accent: #dd2c00, + + +// Color | Tailwind | Brown +// ---------------------------------------------------------------------------- + + brown: #795548, + brown-50: #efebe9, + brown-100: #d7ccc8, + brown-200: #bcaaa4, + brown-300: #a1887f, + brown-400: #8d6e63, + brown-500: #795548, + brown-600: #6d4c41, + brown-700: #5d4037, + brown-800: #4e342e, + brown-900: #3e2723, + + +// Color | Tailwind | Grey +// ---------------------------------------------------------------------------- + + grey: #9e9e9e, + grey-50: #fafafa, + grey-100: #f5f5f5, + grey-200: #eeeeee, + grey-300: #e0e0e0, + grey-400: #bdbdbd, + grey-500: #9e9e9e, + grey-600: #757575, + grey-700: #616161, + grey-800: #424242, + grey-900: #212121, + + +// Color | Tailwind | Blue Grey +// ---------------------------------------------------------------------------- + + blue-grey: #607d8b, + blue-grey-50: #eceff1, + blue-grey-100: #cfd8dc, + blue-grey-200: #b0bec5, + blue-grey-300: #90a4ae, + blue-grey-400: #78909c, + blue-grey-500: #607d8b, + blue-grey-600: #546e7a, + blue-grey-700: #455a64, + blue-grey-800: #37474f, + blue-grey-900: #263238, + + +// Color | Tailwind | Red Contrast +// ---------------------------------------------------------------------------- + + red-contrast: white, + red-50-contrast: black, + red-100-contrast: black, + red-200-contrast: black, + red-300-contrast: black, + red-400-contrast: black, + red-500-contrast: white, + red-600-contrast: white, + red-700-contrast: white, + red-800-contrast: white, + red-900-contrast: white, + red-100-accent-contrast: black, + red-200-accent-contrast: white, + red-400-accent-contrast: white, + red-700-accent-contrast: white, + + +// Color | Tailwind | Pink Contrast +// ---------------------------------------------------------------------------- + + pink-contrast: white, + pink-50-contrast: black, + pink-100-contrast: black, + pink-200-contrast: black, + pink-300-contrast: black, + pink-400-contrast: black, + pink-500-contrast: white, + pink-600-contrast: white, + pink-700-contrast: white, + pink-800-contrast: white, + pink-900-contrast: white, + pink-100-accent-contrast: black, + pink-200-accent-contrast: white, + pink-400-accent-contrast: white, + pink-700-accent-contrast: white, + + +// Color | Tailwind | Purple Contrast +// ---------------------------------------------------------------------------- + + purple-contrast: white, + purple-50-contrast: black, + purple-100-contrast: black, + purple-200-contrast: black, + purple-300-contrast: white, + purple-400-contrast: white, + purple-500-contrast: white, + purple-600-contrast: white, + purple-700-contrast: white, + purple-800-contrast: white, + purple-900-contrast: white, + purple-100-accent-contrast: black, + purple-200-accent-contrast: white, + purple-400-accent-contrast: white, + purple-700-accent-contrast: white, + + +// Color | Tailwind | Deep Purple Contrast +// ---------------------------------------------------------------------------- + + deep-purple-contrast: white, + deep-purple-50-contrast: black, + deep-purple-100-contrast: black, + deep-purple-200-contrast: black, + deep-purple-300-contrast: white, + deep-purple-400-contrast: white, + deep-purple-500-contrast: white, + deep-purple-600-contrast: white, + deep-purple-700-contrast: white, + deep-purple-800-contrast: white, + deep-purple-900-contrast: white, + deep-purple-100-accent-contrast: black, + deep-purple-200-accent-contrast: white, + deep-purple-400-accent-contrast: white, + deep-purple-700-accent-contrast: white, + + +// Color | Tailwind | Indigo Contrast +// ---------------------------------------------------------------------------- + + indigo-contrast: white, + indigo-50-contrast: black, + indigo-100-contrast: black, + indigo-200-contrast: black, + indigo-300-contrast: white, + indigo-400-contrast: white, + indigo-500-contrast: white, + indigo-600-contrast: white, + indigo-700-contrast: white, + indigo-800-contrast: white, + indigo-900-contrast: white, + indigo-100-accent-contrast: black, + indigo-200-accent-contrast: white, + indigo-400-accent-contrast: white, + indigo-700-accent-contrast: white, + + +// Color | Tailwind | Blue Contrast +// ---------------------------------------------------------------------------- + + blue-contrast: white, + blue-50-contrast: black, + blue-100-contrast: black, + blue-200-contrast: black, + blue-300-contrast: black, + blue-400-contrast: black, + blue-500-contrast: white, + blue-600-contrast: white, + blue-700-contrast: white, + blue-800-contrast: white, + blue-900-contrast: white, + blue-100-accent-contrast: black, + blue-200-accent-contrast: white, + blue-400-accent-contrast: white, + blue-700-accent-contrast: white, + + +// Color | Tailwind | Light Blue Contrast +// ---------------------------------------------------------------------------- + + light-blue-contrast: white, + light-blue-50-contrast: black, + light-blue-100-contrast: black, + light-blue-200-contrast: black, + light-blue-300-contrast: black, + light-blue-400-contrast: black, + light-blue-500-contrast: white, + light-blue-600-contrast: white, + light-blue-700-contrast: white, + light-blue-800-contrast: white, + light-blue-900-contrast: white, + light-blue-100-accent-contrast: black, + light-blue-200-accent-contrast: black, + light-blue-400-accent-contrast: black, + light-blue-700-accent-contrast: white, + + +// Color | Tailwind | Cyan Contrast +// ---------------------------------------------------------------------------- + + cyan-contrast: white, + cyan-50-contrast: black, + cyan-100-contrast: black, + cyan-200-contrast: black, + cyan-300-contrast: black, + cyan-400-contrast: black, + cyan-500-contrast: white, + cyan-600-contrast: white, + cyan-700-contrast: white, + cyan-800-contrast: white, + cyan-900-contrast: white, + cyan-100-accent-contrast: black, + cyan-200-accent-contrast: black, + cyan-400-accent-contrast: black, + cyan-700-accent-contrast: black, + + +// Color | Tailwind | Teal Contrast +// ---------------------------------------------------------------------------- + + teal-contrast: white, + teal-50-contrast: black, + teal-100-contrast: black, + teal-200-contrast: black, + teal-300-contrast: black, + teal-400-contrast: black, + teal-500-contrast: white, + teal-600-contrast: white, + teal-700-contrast: white, + teal-800-contrast: white, + teal-900-contrast: white, + teal-100-accent-contrast: black, + teal-200-accent-contrast: black, + teal-400-accent-contrast: black, + teal-700-accent-contrast: black, + + +// Color | Tailwind | Green Contrast +// ---------------------------------------------------------------------------- + + green-contrast: white, + green-50-contrast: black, + green-100-contrast: black, + green-200-contrast: black, + green-300-contrast: black, + green-400-contrast: black, + green-500-contrast: white, + green-600-contrast: white, + green-700-contrast: white, + green-800-contrast: white, + green-900-contrast: white, + green-100-accent-contrast: black, + green-200-accent-contrast: black, + green-400-accent-contrast: black, + green-700-accent-contrast: black, + + +// Color | Tailwind | Light Green Contrast +// ---------------------------------------------------------------------------- + + light-green-contrast: black, + light-green-50-contrast: black, + light-green-100-contrast: black, + light-green-200-contrast: black, + light-green-300-contrast: black, + light-green-400-contrast: black, + light-green-500-contrast: black, + light-green-600-contrast: black, + light-green-700-contrast: black, + light-green-800-contrast: white, + light-green-900-contrast: white, + light-green-100-accent-contrast: black, + light-green-200-accent-contrast: black, + light-green-400-accent-contrast: black, + light-green-700-accent-contrast: black, + + +// Color | Tailwind | Lime Contrast +// ---------------------------------------------------------------------------- + + lime-contrast: black, + lime-50-contrast: black, + lime-100-contrast: black, + lime-200-contrast: black, + lime-300-contrast: black, + lime-400-contrast: black, + lime-500-contrast: black, + lime-600-contrast: black, + lime-700-contrast: black, + lime-800-contrast: black, + lime-900-contrast: white, + lime-100-accent-contrast: black, + lime-200-accent-contrast: black, + lime-400-accent-contrast: black, + lime-700-accent-contrast: black, + + +// Color | Tailwind | Yellow Contrast +// ---------------------------------------------------------------------------- + + yellow-contrast: black, + yellow-50-contrast: black, + yellow-100-contrast: black, + yellow-200-contrast: black, + yellow-300-contrast: black, + yellow-400-contrast: black, + yellow-500-contrast: black, + yellow-600-contrast: black, + yellow-700-contrast: black, + yellow-800-contrast: black, + yellow-900-contrast: black, + yellow-100-accent-contrast: black, + yellow-200-accent-contrast: black, + yellow-400-accent-contrast: black, + yellow-700-accent-contrast: black, + + +// Color | Tailwind | Amber Contrast +// ---------------------------------------------------------------------------- + + amber-contrast: black, + amber-50-contrast: black, + amber-100-contrast: black, + amber-200-contrast: black, + amber-300-contrast: black, + amber-400-contrast: black, + amber-500-contrast: black, + amber-600-contrast: black, + amber-700-contrast: black, + amber-800-contrast: black, + amber-900-contrast: black, + amber-100-accent-contrast: black, + amber-200-accent-contrast: black, + amber-400-accent-contrast: black, + amber-700-accent-contrast: black, + + +// Color | Tailwind | Orange Contrast +// ---------------------------------------------------------------------------- + + orange-contrast: black, + orange-50-contrast: black, + orange-100-contrast: black, + orange-200-contrast: black, + orange-300-contrast: black, + orange-400-contrast: black, + orange-500-contrast: black, + orange-600-contrast: black, + orange-700-contrast: black, + orange-800-contrast: white, + orange-900-contrast: white, + orange-100-accent-contrast: black, + orange-200-accent-contrast: black, + orange-400-accent-contrast: black, + orange-700-accent-contrast: black, + + +// Color | Tailwind | Deep Orange Contrast +// ---------------------------------------------------------------------------- + + deep-orange-contrast: white, + deep-orange-50-contrast: black, + deep-orange-100-contrast: black, + deep-orange-200-contrast: black, + deep-orange-300-contrast: black, + deep-orange-400-contrast: black, + deep-orange-500-contrast: white, + deep-orange-600-contrast: white, + deep-orange-700-contrast: white, + deep-orange-800-contrast: white, + deep-orange-900-contrast: white, + deep-orange-100-accent-contrast: black, + deep-orange-200-accent-contrast: black, + deep-orange-400-accent-contrast: white, + deep-orange-700-accent-contrast: white, + + +// Color | Tailwind | Brown Contrast +// ---------------------------------------------------------------------------- + + brown-contrast: white, + brown-50-contrast: black, + brown-100-contrast: black, + brown-200-contrast: black, + brown-300-contrast: white, + brown-400-contrast: white, + brown-500-contrast: white, + brown-600-contrast: white, + brown-700-contrast: white, + brown-800-contrast: white, + brown-900-contrast: white, + + +// Color | Tailwind | Grey Contrast +// ---------------------------------------------------------------------------- + + grey-contrast: black, + grey-50-contrast: black, + grey-100-contrast: black, + grey-200-contrast: black, + grey-300-contrast: black, + grey-400-contrast: black, + grey-500-contrast: black, + grey-600-contrast: white, + grey-700-contrast: white, + grey-800-contrast: white, + grey-900-contrast: white, + + +// Color | Tailwind | Blue Grey Contrast +// ---------------------------------------------------------------------------- + + blue-grey-contrast: white, + blue-grey-50-contrast: black, + blue-grey-100-contrast: black, + blue-grey-200-contrast: black, + blue-grey-300-contrast: black, + blue-grey-400-contrast: white, + blue-grey-500-contrast: white, + blue-grey-600-contrast: white, + blue-grey-700-contrast: white, + blue-grey-800-contrast: white, + blue-grey-900-contrast: white, + +) \ No newline at end of file diff --git a/src/scss/standards/_tailwind_hex_var.scss b/src/scss/standards/_tailwind_hex_var.scss index 0f76932..47d666e 100644 --- a/src/scss/standards/_tailwind_hex_var.scss +++ b/src/scss/standards/_tailwind_hex_var.scss @@ -1,13 +1,13 @@ // Copyright 2023 Scape Agency BV -// Licensed under the Apache License, Version 2.0 (the "License"); +// Licensed under the Apache License, Version 2.0 (the License"); // you may not use this file except in compliance with the License. // You may obtain a copy of the License at // http://www.apache.org/licenses/LICENSE-2.0 // Unless required by applicable law or agreed to in writing, software -// distributed under the License is distributed on an "AS IS" BASIS, +// distributed under the License is distributed on an AS IS" BASIS, // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. // See the License for the specific language governing permissions and // limitations under the License. @@ -19,744 +19,744 @@ // Color | Tailwind | Base -// ============================================================================ +// ---------------------------------------------------------------------------- -$transparent: "transparent"; -$black: "#000000"; -$white: "#ffffff"; +$transparent: transparent ; +$black: #000000 ; +$white: #ffffff ; // Color | Tailwind | Red -// ============================================================================ - -$red: "#f44336"; -$red-50: "#ffebee"; -$red-100: "#ffcdd2"; -$red-200: "#ef9a9a"; -$red-300: "#e57373"; -$red-400: "#ef5350"; -$red-500: "#f44336"; -$red-600: "#e53935"; -$red-700: "#d32f2f"; -$red-800: "#c62828"; -$red-900: "#b71c1c"; -$red-100-accent: "#ff8a80"; -$red-200-accent: "#ff5252"; -$red-400-accent: "#ff1744"; -$red-700-accent: "#d50000"; +// ---------------------------------------------------------------------------- + +$red: #f44336 ; +$red-50: #ffebee ; +$red-100: #ffcdd2 ; +$red-200: #ef9a9a ; +$red-300: #e57373 ; +$red-400: #ef5350 ; +$red-500: #f44336 ; +$red-600: #e53935 ; +$red-700: #d32f2f ; +$red-800: #c62828 ; +$red-900: #b71c1c ; +$red-100-accent: #ff8a80 ; +$red-200-accent: #ff5252 ; +$red-400-accent: #ff1744 ; +$red-700-accent: #d50000 ; // Color | Tailwind | Pink -// ============================================================================ - -$pink: "#e91e63"; -$pink-50: "#fce4ec"; -$pink-100: "#f8bbd0"; -$pink-200: "#f48fb1"; -$pink-300: "#f06292"; -$pink-400: "#ec407a"; -$pink-500: "#e91e63"; -$pink-600: "#d81b60"; -$pink-700: "#c2185b"; -$pink-800: "#ad1457"; -$pink-900: "#880e4f"; -$pink-100-accent: "#ff80ab"; -$pink-200-accent: "#ff4081"; -$pink-400-accent: "#f50057"; -$pink-700-accent: "#c51162"; +// ---------------------------------------------------------------------------- + +$pink: #e91e63 ; +$pink-50: #fce4ec ; +$pink-100: #f8bbd0 ; +$pink-200: #f48fb1 ; +$pink-300: #f06292 ; +$pink-400: #ec407a ; +$pink-500: #e91e63 ; +$pink-600: #d81b60 ; +$pink-700: #c2185b ; +$pink-800: #ad1457 ; +$pink-900: #880e4f ; +$pink-100-accent: #ff80ab ; +$pink-200-accent: #ff4081 ; +$pink-400-accent: #f50057 ; +$pink-700-accent: #c51162 ; // Color | Tailwind | Purple -// ============================================================================ - -$purple: "#9c27b0"; -$purple-50: "#f3e5f5"; -$purple-100: "#e1bee7"; -$purple-200: "#ce93d8"; -$purple-300: "#ba68c8"; -$purple-400: "#ab47bc"; -$purple-500: "#9c27b0"; -$purple-600: "#8e24aa"; -$purple-700: "#7b1fa2"; -$purple-800: "#6a1b9a"; -$purple-900: "#4a148c"; -$purple-100-accent: "#ea80fc"; -$purple-200-accent: "#e040fb"; -$purple-400-accent: "#d500f9"; -$purple-700-accent: "#aa00ff"; +// ---------------------------------------------------------------------------- + +$purple: #9c27b0 ; +$purple-50: #f3e5f5 ; +$purple-100: #e1bee7 ; +$purple-200: #ce93d8 ; +$purple-300: #ba68c8 ; +$purple-400: #ab47bc ; +$purple-500: #9c27b0 ; +$purple-600: #8e24aa ; +$purple-700: #7b1fa2 ; +$purple-800: #6a1b9a ; +$purple-900: #4a148c ; +$purple-100-accent: #ea80fc ; +$purple-200-accent: #e040fb ; +$purple-400-accent: #d500f9 ; +$purple-700-accent: #aa00ff ; // Color | Tailwind | Deep Purple -// ============================================================================ - -$deep-purple: "#673ab7"; -$deep-purple-50: "#ede7f6"; -$deep-purple-100: "#d1c4e9"; -$deep-purple-200: "#b39ddb"; -$deep-purple-300: "#9575cd"; -$deep-purple-400: "#7e57c2"; -$deep-purple-500: "#673ab7"; -$deep-purple-600: "#5e35b1"; -$deep-purple-700: "#512da8"; -$deep-purple-800: "#4527a0"; -$deep-purple-900: "#311b92"; -$deep-purple-100-accent: "#b388ff"; -$deep-purple-200-accent: "#7c4dff"; -$deep-purple-400-accent: "#651fff"; -$deep-purple-700-accent: "#6200ea"; +// ---------------------------------------------------------------------------- + +$deep-purple: #673ab7 ; +$deep-purple-50: #ede7f6 ; +$deep-purple-100: #d1c4e9 ; +$deep-purple-200: #b39ddb ; +$deep-purple-300: #9575cd ; +$deep-purple-400: #7e57c2 ; +$deep-purple-500: #673ab7 ; +$deep-purple-600: #5e35b1 ; +$deep-purple-700: #512da8 ; +$deep-purple-800: #4527a0 ; +$deep-purple-900: #311b92 ; +$deep-purple-100-accent: #b388ff ; +$deep-purple-200-accent: #7c4dff ; +$deep-purple-400-accent: #651fff ; +$deep-purple-700-accent: #6200ea ; // Color | Tailwind | Indigo -// ============================================================================ - -$indigo: "#3f51b5"; -$indigo-50: "#e8eaf6"; -$indigo-100: "#c5cae9"; -$indigo-200: "#9fa8da"; -$indigo-300: "#7986cb"; -$indigo-400: "#5c6bc0"; -$indigo-500: "#3f51b5"; -$indigo-600: "#3949ab"; -$indigo-700: "#303f9f"; -$indigo-800: "#283593"; -$indigo-900: "#1a237e"; -$indigo-100-accent: "#8c9eff"; -$indigo-200-accent: "#536dfe"; -$indigo-400-accent: "#3d5afe"; -$indigo-700-accent: "#304ffe"; +// ---------------------------------------------------------------------------- + +$indigo: #3f51b5 ; +$indigo-50: #e8eaf6 ; +$indigo-100: #c5cae9 ; +$indigo-200: #9fa8da ; +$indigo-300: #7986cb ; +$indigo-400: #5c6bc0 ; +$indigo-500: #3f51b5 ; +$indigo-600: #3949ab ; +$indigo-700: #303f9f ; +$indigo-800: #283593 ; +$indigo-900: #1a237e ; +$indigo-100-accent: #8c9eff ; +$indigo-200-accent: #536dfe ; +$indigo-400-accent: #3d5afe ; +$indigo-700-accent: #304ffe ; // Color | Tailwind | Blue -// ============================================================================ - -$blue: "#2196f3"; -$blue-50: "#e3f2fd"; -$blue-100: "#bbdefb"; -$blue-200: "#90caf9"; -$blue-300: "#64b5f6"; -$blue-400: "#42a5f5"; -$blue-500: "#2196f3"; -$blue-600: "#1e88e5"; -$blue-700: "#1976d2"; -$blue-800: "#1565c0"; -$blue-900: "#0d47a1"; -$blue-100-accent: "#82b1ff"; -$blue-200-accent: "#448aff"; -$blue-400-accent: "#2979ff"; -$blue-700-accent: "#2962ff"; +// ---------------------------------------------------------------------------- + +$blue: #2196f3 ; +$blue-50: #e3f2fd ; +$blue-100: #bbdefb ; +$blue-200: #90caf9 ; +$blue-300: #64b5f6 ; +$blue-400: #42a5f5 ; +$blue-500: #2196f3 ; +$blue-600: #1e88e5 ; +$blue-700: #1976d2 ; +$blue-800: #1565c0 ; +$blue-900: #0d47a1 ; +$blue-100-accent: #82b1ff ; +$blue-200-accent: #448aff ; +$blue-400-accent: #2979ff ; +$blue-700-accent: #2962ff ; // Color | Tailwind | Light Blue -// ============================================================================ - -$light-blue: "#03a9f4"; -$light-blue-50: "#e1f5fe"; -$light-blue-100: "#b3e5fc"; -$light-blue-200: "#81d4fa"; -$light-blue-300: "#4fc3f7"; -$light-blue-400: "#29b6f6"; -$light-blue-500: "#03a9f4"; -$light-blue-600: "#039be5"; -$light-blue-700: "#0288d1"; -$light-blue-800: "#0277bd"; -$light-blue-900: "#01579b"; -$light-blue-100-accent: "#80d8ff"; -$light-blue-200-accent: "#40c4ff"; -$light-blue-400-accent: "#00b0ff"; -$light-blue-700-accent: "#0091ea"; +// ---------------------------------------------------------------------------- + +$light-blue: #03a9f4 ; +$light-blue-50: #e1f5fe ; +$light-blue-100: #b3e5fc ; +$light-blue-200: #81d4fa ; +$light-blue-300: #4fc3f7 ; +$light-blue-400: #29b6f6 ; +$light-blue-500: #03a9f4 ; +$light-blue-600: #039be5 ; +$light-blue-700: #0288d1 ; +$light-blue-800: #0277bd ; +$light-blue-900: #01579b ; +$light-blue-100-accent: #80d8ff ; +$light-blue-200-accent: #40c4ff ; +$light-blue-400-accent: #00b0ff ; +$light-blue-700-accent: #0091ea ; // Color | Tailwind | Cyan -// ============================================================================ - -$cyan: "#00bcd4"; -$cyan-50: "#e0f7fa"; -$cyan-100: "#b2ebf2"; -$cyan-200: "#80deea"; -$cyan-300: "#4dd0e1"; -$cyan-400: "#26c6da"; -$cyan-500: "#00bcd4"; -$cyan-600: "#00acc1"; -$cyan-700: "#0097a7"; -$cyan-800: "#00838f"; -$cyan-900: "#006064"; -$cyan-100-accent: "#84ffff"; -$cyan-200-accent: "#18ffff"; -$cyan-400-accent: "#00e5ff"; -$cyan-700-accent: "#00b8d4"; +// ---------------------------------------------------------------------------- + +$cyan: #00bcd4 ; +$cyan-50: #e0f7fa ; +$cyan-100: #b2ebf2 ; +$cyan-200: #80deea ; +$cyan-300: #4dd0e1 ; +$cyan-400: #26c6da ; +$cyan-500: #00bcd4 ; +$cyan-600: #00acc1 ; +$cyan-700: #0097a7 ; +$cyan-800: #00838f ; +$cyan-900: #006064 ; +$cyan-100-accent: #84ffff ; +$cyan-200-accent: #18ffff ; +$cyan-400-accent: #00e5ff ; +$cyan-700-accent: #00b8d4 ; // Color | Tailwind | Teal -// ============================================================================ - -$teal: "#009688"; -$teal-50: "#e0f2f1"; -$teal-100: "#b2dfdb"; -$teal-200: "#80cbc4"; -$teal-300: "#4db6ac"; -$teal-400: "#26a69a"; -$teal-500: "#009688"; -$teal-600: "#00897b"; -$teal-700: "#00796b"; -$teal-800: "#00695c"; -$teal-900: "#004d40"; -$teal-100-accent: "#a7ffeb"; -$teal-200-accent: "#64ffda"; -$teal-400-accent: "#1de9b6"; -$teal-700-accent: "#00bfa5"; +// ---------------------------------------------------------------------------- + +$teal: #009688 ; +$teal-50: #e0f2f1 ; +$teal-100: #b2dfdb ; +$teal-200: #80cbc4 ; +$teal-300: #4db6ac ; +$teal-400: #26a69a ; +$teal-500: #009688 ; +$teal-600: #00897b ; +$teal-700: #00796b ; +$teal-800: #00695c ; +$teal-900: #004d40 ; +$teal-100-accent: #a7ffeb ; +$teal-200-accent: #64ffda ; +$teal-400-accent: #1de9b6 ; +$teal-700-accent: #00bfa5 ; // Color | Tailwind | Green -// ============================================================================ - -$green: "#4caf50"; -$green-50: "#e8f5e9"; -$green-100: "#c8e6c9"; -$green-200: "#a5d6a7"; -$green-300: "#81c784"; -$green-400: "#66bb6a"; -$green-500: "#4caf50"; -$green-600: "#43a047"; -$green-700: "#388e3c"; -$green-800: "#2e7d32"; -$green-900: "#1b5e20"; -$green-100-accent: "#b9f6ca"; -$green-200-accent: "#69f0ae"; -$green-400-accent: "#00e676"; -$green-700-accent: "#00c853"; +// ---------------------------------------------------------------------------- + +$green: #4caf50 ; +$green-50: #e8f5e9 ; +$green-100: #c8e6c9 ; +$green-200: #a5d6a7 ; +$green-300: #81c784 ; +$green-400: #66bb6a ; +$green-500: #4caf50 ; +$green-600: #43a047 ; +$green-700: #388e3c ; +$green-800: #2e7d32 ; +$green-900: #1b5e20 ; +$green-100-accent: #b9f6ca ; +$green-200-accent: #69f0ae ; +$green-400-accent: #00e676 ; +$green-700-accent: #00c853 ; // Color | Tailwind | Light Green -// ============================================================================ - -$light-green: "#8bc34a"; -$light-green-50: "#f1f8e9"; -$light-green-100: "#dcedc8"; -$light-green-200: "#c5e1a5"; -$light-green-300: "#aed581"; -$light-green-400: "#9ccc65"; -$light-green-500: "#8bc34a"; -$light-green-600: "#7cb342"; -$light-green-700: "#689f38"; -$light-green-800: "#558b2f"; -$light-green-900: "#33691e"; -$light-green-100-accent: "#ccff90"; -$light-green-200-accent: "#b2ff59"; -$light-green-400-accent: "#76ff03"; -$light-green-700-accent: "#64dd17"; +// ---------------------------------------------------------------------------- + +$light-green: #8bc34a ; +$light-green-50: #f1f8e9 ; +$light-green-100: #dcedc8 ; +$light-green-200: #c5e1a5 ; +$light-green-300: #aed581 ; +$light-green-400: #9ccc65 ; +$light-green-500: #8bc34a ; +$light-green-600: #7cb342 ; +$light-green-700: #689f38 ; +$light-green-800: #558b2f ; +$light-green-900: #33691e ; +$light-green-100-accent: #ccff90 ; +$light-green-200-accent: #b2ff59 ; +$light-green-400-accent: #76ff03 ; +$light-green-700-accent: #64dd17 ; // Color | Tailwind | Lime -// ============================================================================ - -$lime: "#cddc39"; -$lime-50: "#f9fbe7"; -$lime-100: "#f0f4c3"; -$lime-200: "#e6ee9c"; -$lime-300: "#dce775"; -$lime-400: "#d4e157"; -$lime-500: "#cddc39"; -$lime-600: "#c0ca33"; -$lime-700: "#afb42b"; -$lime-800: "#9e9d24"; -$lime-900: "#827717"; -$lime-100-accent: "#f4ff81"; -$lime-200-accent: "#eeff41"; -$lime-400-accent: "#c6ff00"; -$lime-700-accent: "#aeea00"; +// ---------------------------------------------------------------------------- + +$lime: #cddc39 ; +$lime-50: #f9fbe7 ; +$lime-100: #f0f4c3 ; +$lime-200: #e6ee9c ; +$lime-300: #dce775 ; +$lime-400: #d4e157 ; +$lime-500: #cddc39 ; +$lime-600: #c0ca33 ; +$lime-700: #afb42b ; +$lime-800: #9e9d24 ; +$lime-900: #827717 ; +$lime-100-accent: #f4ff81 ; +$lime-200-accent: #eeff41 ; +$lime-400-accent: #c6ff00 ; +$lime-700-accent: #aeea00 ; // Color | Tailwind | Yellow -// ============================================================================ - -$yellow: "#ffeb3b"; -$yellow-50: "#fffde7"; -$yellow-100: "#fff9c4"; -$yellow-200: "#fff59d"; -$yellow-300: "#fff176"; -$yellow-400: "#ffee58"; -$yellow-500: "#ffeb3b"; -$yellow-600: "#fdd835"; -$yellow-700: "#fbc02d"; -$yellow-800: "#f9a825"; -$yellow-900: "#f57f17"; -$yellow-100-accent: "#ffff8d"; -$yellow-200-accent: "#ffff00"; -$yellow-400-accent: "#ffea00"; -$yellow-700-accent: "#ffd600"; +// ---------------------------------------------------------------------------- + +$yellow: #ffeb3b ; +$yellow-50: #fffde7 ; +$yellow-100: #fff9c4 ; +$yellow-200: #fff59d ; +$yellow-300: #fff176 ; +$yellow-400: #ffee58 ; +$yellow-500: #ffeb3b ; +$yellow-600: #fdd835 ; +$yellow-700: #fbc02d ; +$yellow-800: #f9a825 ; +$yellow-900: #f57f17 ; +$yellow-100-accent: #ffff8d ; +$yellow-200-accent: #ffff00 ; +$yellow-400-accent: #ffea00 ; +$yellow-700-accent: #ffd600 ; // Color | Tailwind | Amber -// ============================================================================ - -$amber: "#ffc107"; -$amber-50: "#fff8e1"; -$amber-100: "#ffecb3"; -$amber-200: "#ffe082"; -$amber-300: "#ffd54f"; -$amber-400: "#ffca28"; -$amber-500: "#ffc107"; -$amber-600: "#ffb300"; -$amber-700: "#ffa000"; -$amber-800: "#ff8f00"; -$amber-900: "#ff6f00"; -$amber-100-accent: "#ffe57f"; -$amber-200-accent: "#ffd740"; -$amber-400-accent: "#ffc400"; -$amber-700-accent: "#ffab00"; +// ---------------------------------------------------------------------------- + +$amber: #ffc107 ; +$amber-50: #fff8e1 ; +$amber-100: #ffecb3 ; +$amber-200: #ffe082 ; +$amber-300: #ffd54f ; +$amber-400: #ffca28 ; +$amber-500: #ffc107 ; +$amber-600: #ffb300 ; +$amber-700: #ffa000 ; +$amber-800: #ff8f00 ; +$amber-900: #ff6f00 ; +$amber-100-accent: #ffe57f ; +$amber-200-accent: #ffd740 ; +$amber-400-accent: #ffc400 ; +$amber-700-accent: #ffab00 ; // Color | Tailwind | Orange -// ============================================================================ - -$orange: "#ff9800"; -$orange-50: "#fff3e0"; -$orange-100: "#ffe0b2"; -$orange-200: "#ffcc80"; -$orange-300: "#ffb74d"; -$orange-400: "#ffa726"; -$orange-500: "#ff9800"; -$orange-600: "#fb8c00"; -$orange-700: "#f57c00"; -$orange-800: "#ef6c00"; -$orange-900: "#e65100"; -$orange-100-accent: "#ffd180"; -$orange-200-accent: "#ffab40"; -$orange-400-accent: "#ff9100"; -$orange-700-accent: "#ff6d00"; +// ---------------------------------------------------------------------------- + +$orange: #ff9800 ; +$orange-50: #fff3e0 ; +$orange-100: #ffe0b2 ; +$orange-200: #ffcc80 ; +$orange-300: #ffb74d ; +$orange-400: #ffa726 ; +$orange-500: #ff9800 ; +$orange-600: #fb8c00 ; +$orange-700: #f57c00 ; +$orange-800: #ef6c00 ; +$orange-900: #e65100 ; +$orange-100-accent: #ffd180 ; +$orange-200-accent: #ffab40 ; +$orange-400-accent: #ff9100 ; +$orange-700-accent: #ff6d00 ; // Color | Tailwind | Deep Orange -// ============================================================================ - -$deep-orange: "#ff5722"; -$deep-orange-50: "#fbe9e7"; -$deep-orange-100: "#ffccbc"; -$deep-orange-200: "#ffab91"; -$deep-orange-300: "#ff8a65"; -$deep-orange-400: "#ff7043"; -$deep-orange-500: "#ff5722"; -$deep-orange-600: "#f4511e"; -$deep-orange-700: "#e64a19"; -$deep-orange-800: "#d84315"; -$deep-orange-900: "#bf360c"; -$deep-orange-100-accent: "#ff9e80"; -$deep-orange-200-accent: "#ff6e40"; -$deep-orange-400-accent: "#ff3d00"; -$deep-orange-700-accent: "#dd2c00"; +// ---------------------------------------------------------------------------- + +$deep-orange: #ff5722 ; +$deep-orange-50: #fbe9e7 ; +$deep-orange-100: #ffccbc ; +$deep-orange-200: #ffab91 ; +$deep-orange-300: #ff8a65 ; +$deep-orange-400: #ff7043 ; +$deep-orange-500: #ff5722 ; +$deep-orange-600: #f4511e ; +$deep-orange-700: #e64a19 ; +$deep-orange-800: #d84315 ; +$deep-orange-900: #bf360c ; +$deep-orange-100-accent: #ff9e80 ; +$deep-orange-200-accent: #ff6e40 ; +$deep-orange-400-accent: #ff3d00 ; +$deep-orange-700-accent: #dd2c00 ; // Color | Tailwind | Brown -// ============================================================================ +// ---------------------------------------------------------------------------- -$brown: "#795548"; -$brown-50: "#efebe9"; -$brown-100: "#d7ccc8"; -$brown-200: "#bcaaa4"; -$brown-300: "#a1887f"; -$brown-400: "#8d6e63"; -$brown-500: "#795548"; -$brown-600: "#6d4c41"; -$brown-700: "#5d4037"; -$brown-800: "#4e342e"; -$brown-900: "#3e2723"; +$brown: #795548 ; +$brown-50: #efebe9 ; +$brown-100: #d7ccc8 ; +$brown-200: #bcaaa4 ; +$brown-300: #a1887f ; +$brown-400: #8d6e63 ; +$brown-500: #795548 ; +$brown-600: #6d4c41 ; +$brown-700: #5d4037 ; +$brown-800: #4e342e ; +$brown-900: #3e2723 ; // Color | Tailwind | Grey -// ============================================================================ +// ---------------------------------------------------------------------------- -$grey: "#9e9e9e"; -$grey-50: "#fafafa"; -$grey-100: "#f5f5f5"; -$grey-200: "#eeeeee"; -$grey-300: "#e0e0e0"; -$grey-400: "#bdbdbd"; -$grey-500: "#9e9e9e"; -$grey-600: "#757575"; -$grey-700: "#616161"; -$grey-800: "#424242"; -$grey-900: "#212121"; +$grey: #9e9e9e ; +$grey-50: #fafafa ; +$grey-100: #f5f5f5 ; +$grey-200: #eeeeee ; +$grey-300: #e0e0e0 ; +$grey-400: #bdbdbd ; +$grey-500: #9e9e9e ; +$grey-600: #757575 ; +$grey-700: #616161 ; +$grey-800: #424242 ; +$grey-900: #212121 ; // Color | Tailwind | Blue Grey -// ============================================================================ +// ---------------------------------------------------------------------------- -$blue-grey: "#607d8b"; -$blue-grey-50: "#eceff1"; -$blue-grey-100: "#cfd8dc"; -$blue-grey-200: "#b0bec5"; -$blue-grey-300: "#90a4ae"; -$blue-grey-400: "#78909c"; -$blue-grey-500: "#607d8b"; -$blue-grey-600: "#546e7a"; -$blue-grey-700: "#455a64"; -$blue-grey-800: "#37474f"; -$blue-grey-900: "#263238"; +$blue-grey: #607d8b ; +$blue-grey-50: #eceff1 ; +$blue-grey-100: #cfd8dc ; +$blue-grey-200: #b0bec5 ; +$blue-grey-300: #90a4ae ; +$blue-grey-400: #78909c ; +$blue-grey-500: #607d8b ; +$blue-grey-600: #546e7a ; +$blue-grey-700: #455a64 ; +$blue-grey-800: #37474f ; +$blue-grey-900: #263238 ; // Color | Tailwind | Red Contrast -// ============================================================================ - -$red-contrast: "white"; -$red-50-contrast: "black"; -$red-100-contrast: "black"; -$red-200-contrast: "black"; -$red-300-contrast: "black"; -$red-400-contrast: "black"; -$red-500-contrast: "white"; -$red-600-contrast: "white"; -$red-700-contrast: "white"; -$red-800-contrast: "white"; -$red-900-contrast: "white"; -$red-100-accent-contrast: "black"; -$red-200-accent-contrast: "white"; -$red-400-accent-contrast: "white"; -$red-700-accent-contrast: "white"; +// ---------------------------------------------------------------------------- + +$red-contrast: white ; +$red-50-contrast: black ; +$red-100-contrast: black ; +$red-200-contrast: black ; +$red-300-contrast: black ; +$red-400-contrast: black ; +$red-500-contrast: white ; +$red-600-contrast: white ; +$red-700-contrast: white ; +$red-800-contrast: white ; +$red-900-contrast: white ; +$red-100-accent-contrast: black ; +$red-200-accent-contrast: white ; +$red-400-accent-contrast: white ; +$red-700-accent-contrast: white ; // Color | Tailwind | Pink Contrast -// ============================================================================ - -$pink-contrast: "white"; -$pink-50-contrast: "black"; -$pink-100-contrast: "black"; -$pink-200-contrast: "black"; -$pink-300-contrast: "black"; -$pink-400-contrast: "black"; -$pink-500-contrast: "white"; -$pink-600-contrast: "white"; -$pink-700-contrast: "white"; -$pink-800-contrast: "white"; -$pink-900-contrast: "white"; -$pink-100-accent-contrast: "black"; -$pink-200-accent-contrast: "white"; -$pink-400-accent-contrast: "white"; -$pink-700-accent-contrast: "white"; +// ---------------------------------------------------------------------------- + +$pink-contrast: white ; +$pink-50-contrast: black ; +$pink-100-contrast: black ; +$pink-200-contrast: black ; +$pink-300-contrast: black ; +$pink-400-contrast: black ; +$pink-500-contrast: white ; +$pink-600-contrast: white ; +$pink-700-contrast: white ; +$pink-800-contrast: white ; +$pink-900-contrast: white ; +$pink-100-accent-contrast: black ; +$pink-200-accent-contrast: white ; +$pink-400-accent-contrast: white ; +$pink-700-accent-contrast: white ; // Color | Tailwind | Purple Contrast -// ============================================================================ - -$purple-contrast: "white"; -$purple-50-contrast: "black"; -$purple-100-contrast: "black"; -$purple-200-contrast: "black"; -$purple-300-contrast: "white"; -$purple-400-contrast: "white"; -$purple-500-contrast: "white"; -$purple-600-contrast: "white"; -$purple-700-contrast: "white"; -$purple-800-contrast: "white"; -$purple-900-contrast: "white"; -$purple-100-accent-contrast: "black"; -$purple-200-accent-contrast: "white"; -$purple-400-accent-contrast: "white"; -$purple-700-accent-contrast: "white"; +// ---------------------------------------------------------------------------- + +$purple-contrast: white ; +$purple-50-contrast: black ; +$purple-100-contrast: black ; +$purple-200-contrast: black ; +$purple-300-contrast: white ; +$purple-400-contrast: white ; +$purple-500-contrast: white ; +$purple-600-contrast: white ; +$purple-700-contrast: white ; +$purple-800-contrast: white ; +$purple-900-contrast: white ; +$purple-100-accent-contrast: black ; +$purple-200-accent-contrast: white ; +$purple-400-accent-contrast: white ; +$purple-700-accent-contrast: white ; // Color | Tailwind | Deep Purple Contrast -// ============================================================================ - -$deep-purple-contrast: "white"; -$deep-purple-50-contrast: "black"; -$deep-purple-100-contrast: "black"; -$deep-purple-200-contrast: "black"; -$deep-purple-300-contrast: "white"; -$deep-purple-400-contrast: "white"; -$deep-purple-500-contrast: "white"; -$deep-purple-600-contrast: "white"; -$deep-purple-700-contrast: "white"; -$deep-purple-800-contrast: "white"; -$deep-purple-900-contrast: "white"; -$deep-purple-100-accent-contrast: "black"; -$deep-purple-200-accent-contrast: "white"; -$deep-purple-400-accent-contrast: "white"; -$deep-purple-700-accent-contrast: "white"; +// ---------------------------------------------------------------------------- + +$deep-purple-contrast: white ; +$deep-purple-50-contrast: black ; +$deep-purple-100-contrast: black ; +$deep-purple-200-contrast: black ; +$deep-purple-300-contrast: white ; +$deep-purple-400-contrast: white ; +$deep-purple-500-contrast: white ; +$deep-purple-600-contrast: white ; +$deep-purple-700-contrast: white ; +$deep-purple-800-contrast: white ; +$deep-purple-900-contrast: white ; +$deep-purple-100-accent-contrast: black ; +$deep-purple-200-accent-contrast: white ; +$deep-purple-400-accent-contrast: white ; +$deep-purple-700-accent-contrast: white ; // Color | Tailwind | Indigo Contrast -// ============================================================================ - -$indigo-contrast: "white"; -$indigo-50-contrast: "black"; -$indigo-100-contrast: "black"; -$indigo-200-contrast: "black"; -$indigo-300-contrast: "white"; -$indigo-400-contrast: "white"; -$indigo-500-contrast: "white"; -$indigo-600-contrast: "white"; -$indigo-700-contrast: "white"; -$indigo-800-contrast: "white"; -$indigo-900-contrast: "white"; -$indigo-100-accent-contrast: "black"; -$indigo-200-accent-contrast: "white"; -$indigo-400-accent-contrast: "white"; -$indigo-700-accent-contrast: "white"; +// ---------------------------------------------------------------------------- + +$indigo-contrast: white ; +$indigo-50-contrast: black ; +$indigo-100-contrast: black ; +$indigo-200-contrast: black ; +$indigo-300-contrast: white ; +$indigo-400-contrast: white ; +$indigo-500-contrast: white ; +$indigo-600-contrast: white ; +$indigo-700-contrast: white ; +$indigo-800-contrast: white ; +$indigo-900-contrast: white ; +$indigo-100-accent-contrast: black ; +$indigo-200-accent-contrast: white ; +$indigo-400-accent-contrast: white ; +$indigo-700-accent-contrast: white ; // Color | Tailwind | Blue Contrast -// ============================================================================ - -$blue-contrast: "white"; -$blue-50-contrast: "black"; -$blue-100-contrast: "black"; -$blue-200-contrast: "black"; -$blue-300-contrast: "black"; -$blue-400-contrast: "black"; -$blue-500-contrast: "white"; -$blue-600-contrast: "white"; -$blue-700-contrast: "white"; -$blue-800-contrast: "white"; -$blue-900-contrast: "white"; -$blue-100-accent-contrast: "black"; -$blue-200-accent-contrast: "white"; -$blue-400-accent-contrast: "white"; -$blue-700-accent-contrast: "white"; +// ---------------------------------------------------------------------------- + +$blue-contrast: white ; +$blue-50-contrast: black ; +$blue-100-contrast: black ; +$blue-200-contrast: black ; +$blue-300-contrast: black ; +$blue-400-contrast: black ; +$blue-500-contrast: white ; +$blue-600-contrast: white ; +$blue-700-contrast: white ; +$blue-800-contrast: white ; +$blue-900-contrast: white ; +$blue-100-accent-contrast: black ; +$blue-200-accent-contrast: white ; +$blue-400-accent-contrast: white ; +$blue-700-accent-contrast: white ; // Color | Tailwind | Light Blue Contrast -// ============================================================================ - -$light-blue-contrast: "white"; -$light-blue-50-contrast: "black"; -$light-blue-100-contrast: "black"; -$light-blue-200-contrast: "black"; -$light-blue-300-contrast: "black"; -$light-blue-400-contrast: "black"; -$light-blue-500-contrast: "white"; -$light-blue-600-contrast: "white"; -$light-blue-700-contrast: "white"; -$light-blue-800-contrast: "white"; -$light-blue-900-contrast: "white"; -$light-blue-100-accent-contrast: "black"; -$light-blue-200-accent-contrast: "black"; -$light-blue-400-accent-contrast: "black"; -$light-blue-700-accent-contrast: "white"; +// ---------------------------------------------------------------------------- + +$light-blue-contrast: white ; +$light-blue-50-contrast: black ; +$light-blue-100-contrast: black ; +$light-blue-200-contrast: black ; +$light-blue-300-contrast: black ; +$light-blue-400-contrast: black ; +$light-blue-500-contrast: white ; +$light-blue-600-contrast: white ; +$light-blue-700-contrast: white ; +$light-blue-800-contrast: white ; +$light-blue-900-contrast: white ; +$light-blue-100-accent-contrast: black ; +$light-blue-200-accent-contrast: black ; +$light-blue-400-accent-contrast: black ; +$light-blue-700-accent-contrast: white ; // Color | Tailwind | Cyan Contrast -// ============================================================================ - -$cyan-contrast: "white"; -$cyan-50-contrast: "black"; -$cyan-100-contrast: "black"; -$cyan-200-contrast: "black"; -$cyan-300-contrast: "black"; -$cyan-400-contrast: "black"; -$cyan-500-contrast: "white"; -$cyan-600-contrast: "white"; -$cyan-700-contrast: "white"; -$cyan-800-contrast: "white"; -$cyan-900-contrast: "white"; -$cyan-100-accent-contrast: "black"; -$cyan-200-accent-contrast: "black"; -$cyan-400-accent-contrast: "black"; -$cyan-700-accent-contrast: "black"; +// ---------------------------------------------------------------------------- + +$cyan-contrast: white ; +$cyan-50-contrast: black ; +$cyan-100-contrast: black ; +$cyan-200-contrast: black ; +$cyan-300-contrast: black ; +$cyan-400-contrast: black ; +$cyan-500-contrast: white ; +$cyan-600-contrast: white ; +$cyan-700-contrast: white ; +$cyan-800-contrast: white ; +$cyan-900-contrast: white ; +$cyan-100-accent-contrast: black ; +$cyan-200-accent-contrast: black ; +$cyan-400-accent-contrast: black ; +$cyan-700-accent-contrast: black ; // Color | Tailwind | Teal Contrast -// ============================================================================ - -$teal-contrast: "white"; -$teal-50-contrast: "black"; -$teal-100-contrast: "black"; -$teal-200-contrast: "black"; -$teal-300-contrast: "black"; -$teal-400-contrast: "black"; -$teal-500-contrast: "white"; -$teal-600-contrast: "white"; -$teal-700-contrast: "white"; -$teal-800-contrast: "white"; -$teal-900-contrast: "white"; -$teal-100-accent-contrast: "black"; -$teal-200-accent-contrast: "black"; -$teal-400-accent-contrast: "black"; -$teal-700-accent-contrast: "black"; +// ---------------------------------------------------------------------------- + +$teal-contrast: white ; +$teal-50-contrast: black ; +$teal-100-contrast: black ; +$teal-200-contrast: black ; +$teal-300-contrast: black ; +$teal-400-contrast: black ; +$teal-500-contrast: white ; +$teal-600-contrast: white ; +$teal-700-contrast: white ; +$teal-800-contrast: white ; +$teal-900-contrast: white ; +$teal-100-accent-contrast: black ; +$teal-200-accent-contrast: black ; +$teal-400-accent-contrast: black ; +$teal-700-accent-contrast: black ; // Color | Tailwind | Green Contrast -// ============================================================================ - -$green-contrast: "white"; -$green-50-contrast: "black"; -$green-100-contrast: "black"; -$green-200-contrast: "black"; -$green-300-contrast: "black"; -$green-400-contrast: "black"; -$green-500-contrast: "white"; -$green-600-contrast: "white"; -$green-700-contrast: "white"; -$green-800-contrast: "white"; -$green-900-contrast: "white"; -$green-100-accent-contrast: "black"; -$green-200-accent-contrast: "black"; -$green-400-accent-contrast: "black"; -$green-700-accent-contrast: "black"; +// ---------------------------------------------------------------------------- + +$green-contrast: white ; +$green-50-contrast: black ; +$green-100-contrast: black ; +$green-200-contrast: black ; +$green-300-contrast: black ; +$green-400-contrast: black ; +$green-500-contrast: white ; +$green-600-contrast: white ; +$green-700-contrast: white ; +$green-800-contrast: white ; +$green-900-contrast: white ; +$green-100-accent-contrast: black ; +$green-200-accent-contrast: black ; +$green-400-accent-contrast: black ; +$green-700-accent-contrast: black ; // Color | Tailwind | Light Green Contrast -// ============================================================================ - -$light-green-contrast: "black"; -$light-green-50-contrast: "black"; -$light-green-100-contrast: "black"; -$light-green-200-contrast: "black"; -$light-green-300-contrast: "black"; -$light-green-400-contrast: "black"; -$light-green-500-contrast: "black"; -$light-green-600-contrast: "black"; -$light-green-700-contrast: "black"; -$light-green-800-contrast: "white"; -$light-green-900-contrast: "white"; -$light-green-100-accent-contrast: "black"; -$light-green-200-accent-contrast: "black"; -$light-green-400-accent-contrast: "black"; -$light-green-700-accent-contrast: "black"; +// ---------------------------------------------------------------------------- + +$light-green-contrast: black ; +$light-green-50-contrast: black ; +$light-green-100-contrast: black ; +$light-green-200-contrast: black ; +$light-green-300-contrast: black ; +$light-green-400-contrast: black ; +$light-green-500-contrast: black ; +$light-green-600-contrast: black ; +$light-green-700-contrast: black ; +$light-green-800-contrast: white ; +$light-green-900-contrast: white ; +$light-green-100-accent-contrast: black ; +$light-green-200-accent-contrast: black ; +$light-green-400-accent-contrast: black ; +$light-green-700-accent-contrast: black ; // Color | Tailwind | Lime Contrast -// ============================================================================ - -$lime-contrast: "black"; -$lime-50-contrast: "black"; -$lime-100-contrast: "black"; -$lime-200-contrast: "black"; -$lime-300-contrast: "black"; -$lime-400-contrast: "black"; -$lime-500-contrast: "black"; -$lime-600-contrast: "black"; -$lime-700-contrast: "black"; -$lime-800-contrast: "black"; -$lime-900-contrast: "white"; -$lime-100-accent-contrast: "black"; -$lime-200-accent-contrast: "black"; -$lime-400-accent-contrast: "black"; -$lime-700-accent-contrast: "black"; +// ---------------------------------------------------------------------------- + +$lime-contrast: black ; +$lime-50-contrast: black ; +$lime-100-contrast: black ; +$lime-200-contrast: black ; +$lime-300-contrast: black ; +$lime-400-contrast: black ; +$lime-500-contrast: black ; +$lime-600-contrast: black ; +$lime-700-contrast: black ; +$lime-800-contrast: black ; +$lime-900-contrast: white ; +$lime-100-accent-contrast: black ; +$lime-200-accent-contrast: black ; +$lime-400-accent-contrast: black ; +$lime-700-accent-contrast: black ; // Color | Tailwind | Yellow Contrast -// ============================================================================ - -$yellow-contrast: "black"; -$yellow-50-contrast: "black"; -$yellow-100-contrast: "black"; -$yellow-200-contrast: "black"; -$yellow-300-contrast: "black"; -$yellow-400-contrast: "black"; -$yellow-500-contrast: "black"; -$yellow-600-contrast: "black"; -$yellow-700-contrast: "black"; -$yellow-800-contrast: "black"; -$yellow-900-contrast: "black"; -$yellow-100-accent-contrast: "black"; -$yellow-200-accent-contrast: "black"; -$yellow-400-accent-contrast: "black"; -$yellow-700-accent-contrast: "black"; +// ---------------------------------------------------------------------------- + +$yellow-contrast: black ; +$yellow-50-contrast: black ; +$yellow-100-contrast: black ; +$yellow-200-contrast: black ; +$yellow-300-contrast: black ; +$yellow-400-contrast: black ; +$yellow-500-contrast: black ; +$yellow-600-contrast: black ; +$yellow-700-contrast: black ; +$yellow-800-contrast: black ; +$yellow-900-contrast: black ; +$yellow-100-accent-contrast: black ; +$yellow-200-accent-contrast: black ; +$yellow-400-accent-contrast: black ; +$yellow-700-accent-contrast: black ; // Color | Tailwind | Amber Contrast -// ============================================================================ - -$amber-contrast: "black"; -$amber-50-contrast: "black"; -$amber-100-contrast: "black"; -$amber-200-contrast: "black"; -$amber-300-contrast: "black"; -$amber-400-contrast: "black"; -$amber-500-contrast: "black"; -$amber-600-contrast: "black"; -$amber-700-contrast: "black"; -$amber-800-contrast: "black"; -$amber-900-contrast: "black"; -$amber-100-accent-contrast: "black"; -$amber-200-accent-contrast: "black"; -$amber-400-accent-contrast: "black"; -$amber-700-accent-contrast: "black"; +// ---------------------------------------------------------------------------- + +$amber-contrast: black ; +$amber-50-contrast: black ; +$amber-100-contrast: black ; +$amber-200-contrast: black ; +$amber-300-contrast: black ; +$amber-400-contrast: black ; +$amber-500-contrast: black ; +$amber-600-contrast: black ; +$amber-700-contrast: black ; +$amber-800-contrast: black ; +$amber-900-contrast: black ; +$amber-100-accent-contrast: black ; +$amber-200-accent-contrast: black ; +$amber-400-accent-contrast: black ; +$amber-700-accent-contrast: black ; // Color | Tailwind | Orange Contrast -// ============================================================================ - -$orange-contrast: "black"; -$orange-50-contrast: "black"; -$orange-100-contrast: "black"; -$orange-200-contrast: "black"; -$orange-300-contrast: "black"; -$orange-400-contrast: "black"; -$orange-500-contrast: "black"; -$orange-600-contrast: "black"; -$orange-700-contrast: "black"; -$orange-800-contrast: "white"; -$orange-900-contrast: "white"; -$orange-100-accent-contrast: "black"; -$orange-200-accent-contrast: "black"; -$orange-400-accent-contrast: "black"; -$orange-700-accent-contrast: "black"; +// ---------------------------------------------------------------------------- + +$orange-contrast: black ; +$orange-50-contrast: black ; +$orange-100-contrast: black ; +$orange-200-contrast: black ; +$orange-300-contrast: black ; +$orange-400-contrast: black ; +$orange-500-contrast: black ; +$orange-600-contrast: black ; +$orange-700-contrast: black ; +$orange-800-contrast: white ; +$orange-900-contrast: white ; +$orange-100-accent-contrast: black ; +$orange-200-accent-contrast: black ; +$orange-400-accent-contrast: black ; +$orange-700-accent-contrast: black ; // Color | Tailwind | Deep Orange Contrast -// ============================================================================ - -$deep-orange-contrast: "white"; -$deep-orange-50-contrast: "black"; -$deep-orange-100-contrast: "black"; -$deep-orange-200-contrast: "black"; -$deep-orange-300-contrast: "black"; -$deep-orange-400-contrast: "black"; -$deep-orange-500-contrast: "white"; -$deep-orange-600-contrast: "white"; -$deep-orange-700-contrast: "white"; -$deep-orange-800-contrast: "white"; -$deep-orange-900-contrast: "white"; -$deep-orange-100-accent-contrast: "black"; -$deep-orange-200-accent-contrast: "black"; -$deep-orange-400-accent-contrast: "white"; -$deep-orange-700-accent-contrast: "white"; +// ---------------------------------------------------------------------------- + +$deep-orange-contrast: white ; +$deep-orange-50-contrast: black ; +$deep-orange-100-contrast: black ; +$deep-orange-200-contrast: black ; +$deep-orange-300-contrast: black ; +$deep-orange-400-contrast: black ; +$deep-orange-500-contrast: white ; +$deep-orange-600-contrast: white ; +$deep-orange-700-contrast: white ; +$deep-orange-800-contrast: white ; +$deep-orange-900-contrast: white ; +$deep-orange-100-accent-contrast: black ; +$deep-orange-200-accent-contrast: black ; +$deep-orange-400-accent-contrast: white ; +$deep-orange-700-accent-contrast: white ; // Color | Tailwind | Brown Contrast -// ============================================================================ +// ---------------------------------------------------------------------------- -$brown-contrast: "white"; -$brown-50-contrast: "black"; -$brown-100-contrast: "black"; -$brown-200-contrast: "black"; -$brown-300-contrast: "white"; -$brown-400-contrast: "white"; -$brown-500-contrast: "white"; -$brown-600-contrast: "white"; -$brown-700-contrast: "white"; -$brown-800-contrast: "white"; -$brown-900-contrast: "white"; +$brown-contrast: white ; +$brown-50-contrast: black ; +$brown-100-contrast: black ; +$brown-200-contrast: black ; +$brown-300-contrast: white ; +$brown-400-contrast: white ; +$brown-500-contrast: white ; +$brown-600-contrast: white ; +$brown-700-contrast: white ; +$brown-800-contrast: white ; +$brown-900-contrast: white ; // Color | Tailwind | Grey Contrast -// ============================================================================ +// ---------------------------------------------------------------------------- -$grey-contrast: "black"; -$grey-50-contrast: "black"; -$grey-100-contrast: "black"; -$grey-200-contrast: "black"; -$grey-300-contrast: "black"; -$grey-400-contrast: "black"; -$grey-500-contrast: "black"; -$grey-600-contrast: "white"; -$grey-700-contrast: "white"; -$grey-800-contrast: "white"; -$grey-900-contrast: "white"; +$grey-contrast: black ; +$grey-50-contrast: black ; +$grey-100-contrast: black ; +$grey-200-contrast: black ; +$grey-300-contrast: black ; +$grey-400-contrast: black ; +$grey-500-contrast: black ; +$grey-600-contrast: white ; +$grey-700-contrast: white ; +$grey-800-contrast: white ; +$grey-900-contrast: white ; // Color | Tailwind | Blue Grey Contrast -// ============================================================================ - -$blue-grey-contrast: "white"; -$blue-grey-50-contrast: "black"; -$blue-grey-100-contrast: "black"; -$blue-grey-200-contrast: "black"; -$blue-grey-300-contrast: "black"; -$blue-grey-400-contrast: "white"; -$blue-grey-500-contrast: "white"; -$blue-grey-600-contrast: "white"; -$blue-grey-700-contrast: "white"; -$blue-grey-800-contrast: "white"; -$blue-grey-900-contrast: "white"; +// ---------------------------------------------------------------------------- + +$blue-grey-contrast: white ; +$blue-grey-50-contrast: black ; +$blue-grey-100-contrast: black ; +$blue-grey-200-contrast: black ; +$blue-grey-300-contrast: black ; +$blue-grey-400-contrast: white ; +$blue-grey-500-contrast: white ; +$blue-grey-600-contrast: white ; +$blue-grey-700-contrast: white ; +$blue-grey-800-contrast: white ; +$blue-grey-900-contrast: white ; diff --git a/src/scss/standards/standards.scss b/src/scss/standards/standards.scss index a9ed40f..44e9815 100644 --- a/src/scss/standards/standards.scss +++ b/src/scss/standards/standards.scss @@ -17,6 +17,14 @@ // Color Standards // ============================================================================ - - -// _x11_hex_map \ No newline at end of file +@import "_as2700_hex_map.scss"; +@import "_bs381_hex_map.scss"; +@import "_copic_hex_map.scss"; +@import "_flat_design_hex_map.scss"; +@import "_fs595_hex_map.scss"; +@import "_material_design_hex_map.scss"; +@import "_nbs_hex_map.scss"; +@import "_ncs_hex_map.scss"; +@import "_ral_hex_map.scss"; +@import "_tailwind_hex_map.scss"; +@import "_x11_hex_map.scss"; \ No newline at end of file