Skip to content

Commit 4b38cce

Browse files
mdomdo
committed
Test our idea for updated file structure
- Moves all settings to new _settings.scss - Moves all colors to new _colors.scss
1 parent 7e09017 commit 4b38cce

File tree

3 files changed

+117
-120
lines changed

3 files changed

+117
-120
lines changed

‎scss/_colors.scss

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
//
2+
// Color system
3+
//
4+
5+
$blue: #007bff !default;
6+
$indigo: #6610f2 !default;
7+
$purple: #6f42c1 !default;
8+
$pink: #e83e8c !default;
9+
$red: #dc3545 !default;
10+
$orange: #fd7e14 !default;
11+
$yellow: #ffc107 !default;
12+
$green: #28a745 !default;
13+
$teal: #20c997 !default;
14+
$cyan: #17a2b8 !default;
15+
16+
$white: #fff !default;
17+
$gray-100: #f8f9fa !default;
18+
$gray-200: #e9ecef !default;
19+
$gray-300: #dee2e6 !default;
20+
$gray-400: #ced4da !default;
21+
$gray-500: #adb5bd !default;
22+
$gray-600: #6c757d !default;
23+
$gray-700: #495057 !default;
24+
$gray-800: #343a40 !default;
25+
$gray-900: #212529 !default;
26+
$black: #000 !default;
27+
28+
29+
//
30+
// Tints and shades
31+
//
32+
33+
// TODO: Add colors from upcoming tints/shades PR
34+
35+
36+
// Maps
37+
//
38+
// Manually take every color we want and create Sass maps for us to loop over
39+
// to generate classes programmatically.
40+
41+
$colors: (
42+
"blue": $blue,
43+
"indigo": $indigo,
44+
"purple": $purple,
45+
"pink": $pink,
46+
"red": $red,
47+
"orange": $orange,
48+
"yellow": $yellow,
49+
"green": $green,
50+
"teal": $teal,
51+
"cyan": $cyan,
52+
"white": $white,
53+
"gray": $gray-600,
54+
"gray-dark": $gray-800
55+
) !default;
56+
57+
$grays: (
58+
"100": $gray-100,
59+
"200": $gray-200,
60+
"300": $gray-300,
61+
"400": $gray-400,
62+
"500": $gray-500,
63+
"600": $gray-600,
64+
"700": $gray-700,
65+
"800": $gray-800,
66+
"900": $gray-900
67+
) !default;
68+
69+
$theme-colors: (
70+
"primary": $primary,
71+
"secondary": $secondary,
72+
"success": $success,
73+
"info": $info,
74+
"warning": $warning,
75+
"danger": $danger,
76+
"light": $light,
77+
"dark": $dark
78+
) !default;
79+
80+
81+
// Functions support
82+
//
83+
// Required variables for supporting our custom color related functions. You can
84+
// find these nside our `_functions.scss` file.
85+
86+
// Set a specific jump point for requesting color jumps
87+
$theme-color-interval: 8% !default;
88+
89+
// The yiq lightness value that determines when the lightness of color changes from "dark" to "light". Acceptable values are between 0 and 255.
90+
$yiq-contrasted-threshold: 150 !default;
91+
92+
// Customize the light and dark text colors for use in our YIQ color contrast function.
93+
$yiq-text-dark: $gray-900 !default;
94+
$yiq-text-light: $white !default;

‎scss/_settings.scss

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
// Settings
2+
//
3+
// Quickly modify global styling by enabling or disabling optional features.
4+
5+
// Bootstrap options
6+
$enable-caret: true !default;
7+
$enable-rounded: true !default;
8+
$enable-shadows: false !default;
9+
$enable-gradients: false !default;
10+
$enable-transitions: true !default;
11+
$enable-prefers-reduced-motion-media-query: true !default;
12+
$enable-grid-classes: true !default;
13+
$enable-pointer-cursor-for-buttons: true !default;
14+
$enable-responsive-font-sizes: false !default;
15+
$enable-validation-icons: true !default;
16+
$enable-deprecation-messages: true !default;
17+
18+
// Characters which are escaped by the escape-svg function
19+
$escaped-characters: (
20+
("<","%3c"),
21+
(">","%3e"),
22+
("#","%23"),
23+
) !default;

‎scss/_variables.scss

Lines changed: 0 additions & 120 deletions
Original file line numberDiff line numberDiff line change
@@ -3,126 +3,6 @@
33
// Variables should follow the `$component-state-property-size` formula for
44
// consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.
55

6-
// Color system
7-
8-
$white: #fff !default;
9-
$gray-100: #f8f9fa !default;
10-
$gray-200: #e9ecef !default;
11-
$gray-300: #dee2e6 !default;
12-
$gray-400: #ced4da !default;
13-
$gray-500: #adb5bd !default;
14-
$gray-600: #6c757d !default;
15-
$gray-700: #495057 !default;
16-
$gray-800: #343a40 !default;
17-
$gray-900: #212529 !default;
18-
$black: #000 !default;
19-
20-
$grays: () !default;
21-
// stylelint-disable-next-line scss/dollar-variable-default
22-
$grays: map-merge(
23-
(
24-
"100": $gray-100,
25-
"200": $gray-200,
26-
"300": $gray-300,
27-
"400": $gray-400,
28-
"500": $gray-500,
29-
"600": $gray-600,
30-
"700": $gray-700,
31-
"800": $gray-800,
32-
"900": $gray-900
33-
),
34-
$grays
35-
);
36-
37-
$blue: #007bff !default;
38-
$indigo: #6610f2 !default;
39-
$purple: #6f42c1 !default;
40-
$pink: #e83e8c !default;
41-
$red: #dc3545 !default;
42-
$orange: #fd7e14 !default;
43-
$yellow: #ffc107 !default;
44-
$green: #28a745 !default;
45-
$teal: #20c997 !default;
46-
$cyan: #17a2b8 !default;
47-
48-
$colors: () !default;
49-
// stylelint-disable-next-line scss/dollar-variable-default
50-
$colors: map-merge(
51-
(
52-
"blue": $blue,
53-
"indigo": $indigo,
54-
"purple": $purple,
55-
"pink": $pink,
56-
"red": $red,
57-
"orange": $orange,
58-
"yellow": $yellow,
59-
"green": $green,
60-
"teal": $teal,
61-
"cyan": $cyan,
62-
"white": $white,
63-
"gray": $gray-600,
64-
"gray-dark": $gray-800
65-
),
66-
$colors
67-
);
68-
69-
$primary: $blue !default;
70-
$secondary: $gray-600 !default;
71-
$success: $green !default;
72-
$info: $cyan !default;
73-
$warning: $yellow !default;
74-
$danger: $red !default;
75-
$light: $gray-100 !default;
76-
$dark: $gray-800 !default;
77-
78-
$theme-colors: () !default;
79-
// stylelint-disable-next-line scss/dollar-variable-default
80-
$theme-colors: map-merge(
81-
(
82-
"primary": $primary,
83-
"secondary": $secondary,
84-
"success": $success,
85-
"info": $info,
86-
"warning": $warning,
87-
"danger": $danger,
88-
"light": $light,
89-
"dark": $dark
90-
),
91-
$theme-colors
92-
);
93-
94-
// Set a specific jump point for requesting color jumps
95-
$theme-color-interval: 8% !default;
96-
97-
// The yiq lightness value that determines when the lightness of color changes from "dark" to "light". Acceptable values are between 0 and 255.
98-
$yiq-contrasted-threshold: 150 !default;
99-
100-
// Customize the light and dark text colors for use in our YIQ color contrast function.
101-
$yiq-text-dark: $gray-900 !default;
102-
$yiq-text-light: $white !default;
103-
104-
// Characters which are escaped by the escape-svg function
105-
$escaped-characters: (
106-
("<","%3c"),
107-
(">","%3e"),
108-
("#","%23"),
109-
) !default;
110-
111-
// Options
112-
//
113-
// Quickly modify global styling by enabling or disabling optional features.
114-
115-
$enable-caret: true !default;
116-
$enable-rounded: true !default;
117-
$enable-shadows: false !default;
118-
$enable-gradients: false !default;
119-
$enable-transitions: true !default;
120-
$enable-prefers-reduced-motion-media-query: true !default;
121-
$enable-grid-classes: true !default;
122-
$enable-pointer-cursor-for-buttons: true !default;
123-
$enable-responsive-font-sizes: false !default;
124-
$enable-validation-icons: true !default;
125-
$enable-deprecation-messages: true !default;
1266

1277

1288
// Spacing

0 commit comments

Comments
 (0)