Skip to content

Commit 6956f0a

Browse files
extrabrightextrabright
authored
Merge pull request #31 from webpixels/1.2
1.2
2 parents 524cdc4 + 14d14ca commit 6956f0a

File tree

17 files changed

+183
-173
lines changed

17 files changed

+183
-173
lines changed

‎dist/extra.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/extra.css.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/index.css‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/index.css.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/main.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/main.css.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/utility.css‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/utility.css.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "@webpixels/css",
33
"description": "Utility and component-centric design system based on Bootstrap for fast, responsive UI development.",
4-
"version": "1.2.3",
4+
"version": "1.2.4",
55
"version_short": "1.2",
66
"license": "MIT",
77
"style": "dist/index.css",

‎scss/core/_colors.scss‎

Lines changed: 164 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,164 @@
1+
// Color system
2+
3+
// White/Grays/Black colors
4+
$white: #FFF !default;
5+
$gray-50: #FAFAFA !default; // Alternate background
6+
$gray-100: #F5F9FC !default; // Base background
7+
$gray-200: #E7EAF0 !default;
8+
$gray-300: #CFD6DF !default;
9+
$gray-400: #ABB6C5 !default;
10+
$gray-500: #8898A9 !default; // Disabled text
11+
$gray-600: #6B7B93 !default; // Placeholder text
12+
$gray-700: #525F7F !default; // Text content
13+
$gray-800: #2D3748 !default; // Text content old(44444e)
14+
$gray-900: #16192C !default; // Text content
15+
$black: #000 !default;
16+
17+
// Base colors
18+
$blue: #0099FF !default;
19+
$indigo: #5C60F5 !default;
20+
$purple: #8957FF !default;
21+
$pink: #FF579A !default;
22+
$magenta: #EE33FF !default;
23+
$red: #FF3366 !default;
24+
$orange: #FF8C00 !default;
25+
$yellow: #FFBB00 !default;
26+
$lime: #84cc16 !default;
27+
$green: #00CC88 !default;
28+
$teal: #22DDDD !default;
29+
$cyan: #00D4FF !default;
30+
31+
// fusv-disable
32+
$blue-100: tint-color($blue, 80%) !default;
33+
$blue-200: tint-color($blue, 60%) !default;
34+
$blue-300: tint-color($blue, 40%) !default;
35+
$blue-400: tint-color($blue, 20%) !default;
36+
$blue-500: $blue !default;
37+
$blue-600: shade-color($blue, 20%) !default;
38+
$blue-700: shade-color($blue, 40%) !default;
39+
$blue-800: shade-color($blue, 60%) !default;
40+
$blue-900: shade-color($blue, 80%) !default;
41+
42+
$indigo-100: tint-color($indigo, 80%) !default;
43+
$indigo-200: tint-color($indigo, 60%) !default;
44+
$indigo-300: tint-color($indigo, 40%) !default;
45+
$indigo-400: tint-color($indigo, 20%) !default;
46+
$indigo-500: $indigo !default;
47+
$indigo-600: shade-color($indigo, 20%) !default;
48+
$indigo-700: shade-color($indigo, 40%) !default;
49+
$indigo-800: shade-color($indigo, 60%) !default;
50+
$indigo-900: shade-color($indigo, 80%) !default;
51+
52+
$purple-100: tint-color($purple, 80%) !default;
53+
$purple-200: tint-color($purple, 60%) !default;
54+
$purple-300: tint-color($purple, 40%) !default;
55+
$purple-400: tint-color($purple, 20%) !default;
56+
$purple-500: $purple !default;
57+
$purple-600: shade-color($purple, 20%) !default;
58+
$purple-700: shade-color($purple, 40%) !default;
59+
$purple-800: shade-color($purple, 60%) !default;
60+
$purple-900: shade-color($purple, 80%) !default;
61+
62+
$pink-100: tint-color($pink, 80%) !default;
63+
$pink-200: tint-color($pink, 60%) !default;
64+
$pink-300: tint-color($pink, 40%) !default;
65+
$pink-400: tint-color($pink, 20%) !default;
66+
$pink-500: $pink !default;
67+
$pink-600: shade-color($pink, 20%) !default;
68+
$pink-700: shade-color($pink, 40%) !default;
69+
$pink-800: shade-color($pink, 60%) !default;
70+
$pink-900: shade-color($pink, 80%) !default;
71+
72+
$magenta-100: tint-color($magenta, 80%) !default;
73+
$magenta-200: tint-color($magenta, 60%) !default;
74+
$magenta-300: tint-color($magenta, 40%) !default;
75+
$magenta-400: tint-color($magenta, 20%) !default;
76+
$magenta-500: $magenta !default;
77+
$magenta-600: shade-color($magenta, 20%) !default;
78+
$magenta-700: shade-color($magenta, 40%) !default;
79+
$magenta-800: shade-color($magenta, 60%) !default;
80+
$magenta-900: shade-color($magenta, 80%) !default;
81+
82+
$red-100: tint-color($red, 80%) !default;
83+
$red-200: tint-color($red, 60%) !default;
84+
$red-300: tint-color($red, 40%) !default;
85+
$red-400: tint-color($red, 20%) !default;
86+
$red-500: $red !default;
87+
$red-600: shade-color($red, 20%) !default;
88+
$red-700: shade-color($red, 40%) !default;
89+
$red-800: shade-color($red, 60%) !default;
90+
$red-900: shade-color($red, 80%) !default;
91+
92+
$orange-100: tint-color($orange, 80%) !default;
93+
$orange-200: tint-color($orange, 60%) !default;
94+
$orange-300: tint-color($orange, 40%) !default;
95+
$orange-400: tint-color($orange, 20%) !default;
96+
$orange-500: $orange !default;
97+
$orange-600: shade-color($orange, 20%) !default;
98+
$orange-700: shade-color($orange, 40%) !default;
99+
$orange-800: shade-color($orange, 60%) !default;
100+
$orange-900: shade-color($orange, 80%) !default;
101+
102+
$yellow-100: tint-color($yellow, 80%) !default;
103+
$yellow-200: tint-color($yellow, 60%) !default;
104+
$yellow-300: tint-color($yellow, 40%) !default;
105+
$yellow-400: tint-color($yellow, 20%) !default;
106+
$yellow-500: $yellow !default;
107+
$yellow-600: shade-color($yellow, 20%) !default;
108+
$yellow-700: shade-color($yellow, 40%) !default;
109+
$yellow-800: shade-color($yellow, 60%) !default;
110+
$yellow-900: shade-color($yellow, 80%) !default;
111+
112+
$lime-100: tint-color($lime, 80%) !default;
113+
$lime-200: tint-color($lime, 60%) !default;
114+
$lime-300: tint-color($lime, 40%) !default;
115+
$lime-400: tint-color($lime, 20%) !default;
116+
$lime-500: $lime !default;
117+
$lime-600: shade-color($lime, 20%) !default;
118+
$lime-700: shade-color($lime, 40%) !default;
119+
$lime-800: shade-color($lime, 60%) !default;
120+
$lime-900: shade-color($lime, 80%) !default;
121+
122+
$green-100: tint-color($green, 80%) !default;
123+
$green-200: tint-color($green, 60%) !default;
124+
$green-300: tint-color($green, 40%) !default;
125+
$green-400: tint-color($green, 20%) !default;
126+
$green-500: $green !default;
127+
$green-600: shade-color($green, 20%) !default;
128+
$green-700: shade-color($green, 40%) !default;
129+
$green-800: shade-color($green, 60%) !default;
130+
$green-900: shade-color($green, 80%) !default;
131+
132+
$teal-100: tint-color($teal, 80%) !default;
133+
$teal-200: tint-color($teal, 60%) !default;
134+
$teal-300: tint-color($teal, 40%) !default;
135+
$teal-400: tint-color($teal, 20%) !default;
136+
$teal-500: $teal !default;
137+
$teal-600: shade-color($teal, 20%) !default;
138+
$teal-700: shade-color($teal, 40%) !default;
139+
$teal-800: shade-color($teal, 60%) !default;
140+
$teal-900: shade-color($teal, 80%) !default;
141+
142+
$cyan-100: tint-color($cyan, 80%) !default;
143+
$cyan-200: tint-color($cyan, 60%) !default;
144+
$cyan-300: tint-color($cyan, 40%) !default;
145+
$cyan-400: tint-color($cyan, 20%) !default;
146+
$cyan-500: $cyan !default;
147+
$cyan-600: shade-color($cyan, 20%) !default;
148+
$cyan-700: shade-color($cyan, 40%) !default;
149+
$cyan-800: shade-color($cyan, 60%) !default;
150+
$cyan-900: shade-color($cyan, 80%) !default;
151+
// fusv-enable
152+
153+
// Brand colors
154+
$bootstrap: #7952b3 !default;
155+
$laravel: #ff2d20 !default;
156+
$react: #61dafb !default;
157+
$facebook: #3b5999 !default;
158+
$twitter: #1da1f2 !default;
159+
$instagram: #e4405f !default;
160+
$pinterest: #bd081c !default;
161+
$youtube: #cd201f !default;
162+
$dribbble: #ea4c89 !default;
163+
$github: #222222 !default;
164+
$reddit: #FF4301 !default;

0 commit comments

Comments
 (0)