Skip to content

Commit f053b8e

Browse files
BenjaminHoodyBenjaminHoody
authored
feature: CSS variables (#1114)
This adds support for CSS variables to support styling of Components with browser standards and values direct from Swimlane design system.
1 parent 9931619 commit f053b8e

File tree

6 files changed

+157
-1
lines changed

6 files changed

+157
-1
lines changed

‎projects/swimlane/ngx-ui/CHANGELOG.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@
22

33
## HEAD (unreleased)
44

5+
- Feature: Added new CSS Variables for colors, spacing, and typography
6+
57
## 50.0.0-alpha.2 (2025-07-11)
68

79
- Feature (`ngx-date-range-picker`): Added a date range component

‎projects/swimlane/ngx-ui/src/lib/styles/colors/_vars.scss‎

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
/* Primitives / Color - Swimlane Default */
2+
:root {
3+
4+
// Blue
5+
--blue-100: rgb(224, 239, 255);
6+
--blue-200: rgb(173, 212, 255);
7+
--blue-300: rgb(122, 185, 255);
8+
--blue-400: rgb(71, 158, 255);
9+
--blue-500: rgb(20, 131, 255);
10+
--blue-600: rgb(0, 106, 224);
11+
--blue-700: rgb(0, 82, 173);
12+
--blue-800: rgb(0, 58, 122);
13+
--blue-900: rgb(0, 34, 71);
14+
15+
// Light Blue
16+
--lightblue-100: rgb(234, 249, 255);
17+
--lightblue-200: rgb(184, 234, 254);
18+
--lightblue-300: rgb(134, 219, 253);
19+
--lightblue-400: rgb(84, 205, 252);
20+
--lightblue-500: rgb(34, 190, 251);
21+
--lightblue-600: rgb(4, 166, 230);
22+
--lightblue-700: rgb(3, 130, 180);
23+
--lightblue-800: rgb(2, 94, 130);
24+
--lightblue-900: rgb(1, 58, 80);
25+
26+
//Green
27+
--green-100: rgb(206, 249, 240);
28+
--green-200: rgb(161, 243, 226);
29+
--green-300: rgb(116, 237, 212);
30+
--green-400: rgb(71, 231, 198);
31+
--green-500: rgb(29, 222, 182);
32+
--green-600: rgb(23, 177, 145);
33+
--green-700: rgb(17, 132, 108);
34+
--green-800: rgb(11, 87, 71);
35+
--green-900: rgb(5, 42, 34);
36+
37+
//Orange
38+
--orange-100: rgb(255, 244, 224);
39+
--orange-200: rgb(255, 225, 173);
40+
--orange-300: rgb(255, 206, 122);
41+
--orange-400: rgb(255, 187, 71);
42+
--orange-500: rgb(255, 168, 20);
43+
--orange-600: rgb(224, 141, 0);
44+
--orange-700: rgb(173, 109, 0);
45+
--orange-800: rgb(122, 77, 0);
46+
--orange-900: rgb(71, 45, 0);
47+
48+
// Base
49+
--white: rgb(255, 255, 255);
50+
--black: rgb(0, 0, 0);
51+
52+
// Red
53+
--red-100: rgb(255, 230, 224);
54+
--red-200: rgb(255, 190, 173);
55+
--red-300: rgb(255, 150, 122);
56+
--red-400: rgb(255, 109, 71);
57+
--red-500: rgb(255, 69, 20);
58+
--red-600: rgb(224, 47, 0);
59+
--red-700: rgb(173, 36, 0);
60+
--red-800: rgb(122, 25, 0);
61+
--red-900: rgb(71, 15, 0);
62+
63+
// Purple
64+
--purple-100: rgb(255, 255, 255);
65+
--purple-200: rgb(239, 234, 252);
66+
--purple-300: rgb(205, 190, 245);
67+
--purple-400: rgb(172, 145, 239);
68+
--purple-500: rgb(138, 101, 232);
69+
--purple-600: rgb(104, 57, 225);
70+
--purple-700: rgb(78, 30, 201);
71+
--purple-800: rgb(61, 23, 157);
72+
--purple-900: rgb(44, 17, 112);
73+
74+
// Grey
75+
// This is the old blue-grey color
76+
--grey-050: rgb(235, 237, 242);
77+
--grey-100: rgb(205, 210, 221);
78+
--grey-150: rgb(190, 197, 211);
79+
--grey-200: rgb(175, 183, 200);
80+
--grey-250: rgb(160, 170, 190);
81+
--grey-300: rgb(144, 156, 180);
82+
--grey-350: rgb(129, 143, 169);
83+
--grey-400: rgb(114, 129, 159);
84+
--grey-450: rgb(100, 116, 147);
85+
--grey-500: rgb(90, 104, 132);
86+
--grey-550: rgb(80, 92, 117);
87+
--grey-600: rgb(69, 80, 102);
88+
--grey-650: rgb(59, 68, 87);
89+
--grey-700: rgb(49, 56, 71);
90+
--grey-725: rgb(43, 50, 64);
91+
--grey-750: rgb(38, 44, 56);
92+
--grey-775: rgb(33, 38, 49);
93+
--grey-800: rgb(28, 32, 41);
94+
--grey-825: rgb(23, 26, 33);
95+
--grey-850: rgb(18, 20, 26);
96+
--grey-875: rgb(12, 14, 18);
97+
--grey-900: rgb(7, 8, 11);
98+
99+
// Error
100+
--color-error: var(—red-500);
101+
}

‎projects/swimlane/ngx-ui/src/lib/styles/index.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/**
22
* Core
33
*/
4-
4+
@forward 'variables';
55
@forward 'vendor/index';
66
@forward 'colors/index';
77
@forward 'fonts/index';

‎projects/swimlane/ngx-ui/src/lib/styles/layouts/_vars.scss‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
:root {
2+
3+
// Spacing Gaps
4+
--spacing-0: 0px;
5+
--spacing-2: 2px;
6+
--spacing-4: 4px;
7+
--spacing-8: 8px;
8+
--spacing-10: 10px;
9+
--spacing-12: 12px;
10+
--spacing-16: 16px;
11+
--spacing-20: 20px;
12+
--spacing-24: 24px;
13+
--spacing-30: 30px;
14+
--spacing-36: 36px;
15+
--spacing-48: 48px;
16+
17+
// Radius Gaps
18+
--radius-0: 0px;
19+
--radius-2: 2px;
20+
--radius-4: 4px;
21+
--radius-6: 6px;
22+
--radius-8: 8px;
23+
--radius-1000: 1000px;
24+
}

‎projects/swimlane/ngx-ui/src/lib/styles/typography/_vars.scss‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
:root {
2+
--font-size-base: 16px;
3+
--font-size-xxs: 0.625em; /* 10px */
4+
--font-size-xs: 0.75em; /* 12px */
5+
--font-size-s: 0.875em; /* 14px */
6+
--font-size-m: 1em; /* 16px */
7+
--font-size-l: 1.125em; /* 18px */
8+
--font-size-xl: 1.25em; /* 20px */
9+
--font-size-2xl: 1.5em; /* 24px */
10+
--font-size-3xl: 1.75em; /* 28px */
11+
--font-size-4xl: 2em; /* 32px*/
12+
--font-size-5xl: 2.25em; /* 36px */
13+
--font-size-6xl: 3em; /* 48px */
14+
15+
16+
--font-line-height-100: 1.1;
17+
--font-line-height-200: 1.42;
18+
--font-line-height-300: 20px;
19+
--font-line-height-400: 40px;
20+
21+
22+
--font-weight-light: 300;
23+
--font-weight-regular: 400;
24+
--font-weight-semibold: 600;
25+
--font-weight-bold: 700;
26+
}

‎projects/swimlane/ngx-ui/src/lib/styles/variables.scss‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
@forward 'colors/_vars';
2+
@forward 'layouts/_vars';
3+
@forward 'typography/_vars';

0 commit comments

Comments
 (0)