Skip to content

Commit 1eeb986

Browse files
kyleshikekyleshike
authored
Provides CSS properties for typography, layout and color (#1168)
1 parent 798b783 commit 1eeb986

File tree

2 files changed

+232
-1
lines changed

2 files changed

+232
-1
lines changed

‎bin/link-rs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,4 +10,4 @@ fi
1010
yarn build
1111
yalc publish
1212
cd $RAILS_SERVER_PATH
13-
yalc link @user-interviews/ui-design-system
13+
yalc add @user-interviews/ui-design-system

‎scss/css_properties.scss‎

Lines changed: 231 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,231 @@
1+
@import 'borders';
2+
@import 'box_shadow';
3+
@import 'colors';
4+
@import 'elevations';
5+
@import 'spacing';
6+
@import 'typography';
7+
@import 'z_stack';
8+
9+
:root {
10+
--ux-border-radius: #{$ux-border-radius};
11+
12+
--ux-navbar-shadow-color: #{$ux-navbar-shadow-color};
13+
--ux-box-shadow: #{$ux-box-shadow};
14+
--ux-box-shadow-light: #{$ux-box-shadow-light};
15+
--ux-box-shadow-card: #{$ux-box-shadow-card};
16+
--ux-box-shadow-table-sticky-column-left: #{$ux-box-shadow-table-sticky-column-left};
17+
--ux-box-shadow-table-sticky-column-right: #{$ux-box-shadow-table-sticky-column-right};
18+
--ux-box-shadow-top: #{$ux-box-shadow-top};
19+
--ux-box-shadow-top-light: #{$ux-box-shadow-top-light};
20+
--ux-drawer-box-shadow-right: #{$ux-drawer-box-shadow-right};
21+
--ux-drawer-box-shadow-left: #{$ux-drawer-box-shadow-left};
22+
23+
--ux-elevations-00: #{$ux-elevations-00};
24+
--ux-elevations-10: #{$ux-elevations-10};
25+
--ux-elevations-20: #{$ux-elevations-20};
26+
--ux-elevations-30: #{$ux-elevations-30};
27+
--ux-elevations-40: #{$ux-elevations-40};
28+
--ux-elevations-50: #{$ux-elevations-50};
29+
30+
--ux-black: #{$ux-black};
31+
--ux-blue: #{$ux-blue};
32+
--ux-cream: #{$ux-cream};
33+
--ux-emerald: #{$ux-emerald};
34+
--ux-gray: #{$ux-gray};
35+
--ux-green: #{$ux-green};
36+
--ux-light-blue: #{$ux-light-blue};
37+
--ux-navy: #{$ux-navy};
38+
--ux-orange: #{$ux-orange};
39+
--ux-purple: #{$ux-purple};
40+
--ux-red: #{$ux-red};
41+
--ux-sand: #{$ux-sand};
42+
--ux-teal: #{$ux-teal};
43+
--ux-yellow: #{$ux-yellow};
44+
--ux-white: #{$ux-white};
45+
--brand-color-facebook: #{$brand-color-facebook};
46+
--brand-color-google: #{$brand-color-google};
47+
--brand-color-google-alt: #{$brand-color-google-alt};
48+
--brand-color-linkedin: #{$brand-color-linkedin};
49+
--brand-color-office365: #{$brand-color-office365};
50+
--brand-color-twitter: #{$brand-color-twitter};
51+
--brand-color-yahoo: #{$brand-color-yahoo};
52+
--ux-blue-100: #{$ux-blue-100};
53+
--ux-blue-200: #{$ux-blue-200};
54+
--ux-blue-300: #{$ux-blue-300};
55+
--ux-blue-400: #{$ux-blue-400};
56+
--ux-blue-500: #{$ux-blue-500};
57+
--ux-blue-600: #{$ux-blue-600};
58+
--ux-blue-700: #{$ux-blue-700};
59+
--ux-blue-800: #{$ux-blue-800};
60+
--ux-blue-900: #{$ux-blue-900};
61+
--ux-emerald-100: #{$ux-emerald-100};
62+
--ux-emerald-200: #{$ux-emerald-200};
63+
--ux-emerald-300: #{$ux-emerald-300};
64+
--ux-emerald-400: #{$ux-emerald-400};
65+
--ux-emerald-500: #{$ux-emerald-500};
66+
--ux-emerald-600: #{$ux-emerald-600};
67+
--ux-emerald-700: #{$ux-emerald-700};
68+
--ux-emerald-800: #{$ux-emerald-800};
69+
--ux-emerald-900: #{$ux-emerald-900};
70+
--ux-gray-100: #{$ux-gray-100};
71+
--ux-gray-200: #{$ux-gray-200};
72+
--ux-gray-300: #{$ux-gray-300};
73+
--ux-gray-400: #{$ux-gray-400};
74+
--ux-gray-500: #{$ux-gray-500};
75+
--ux-gray-600: #{$ux-gray-600};
76+
--ux-gray-700: #{$ux-gray-700};
77+
--ux-gray-800: #{$ux-gray-800};
78+
--ux-gray-900: #{$ux-gray-900};
79+
--ux-green-100: #{$ux-green-100};
80+
--ux-green-200: #{$ux-green-200};
81+
--ux-green-300: #{$ux-green-300};
82+
--ux-green-400: #{$ux-green-400};
83+
--ux-green-500: #{$ux-green-500};
84+
--ux-green-600: #{$ux-green-600};
85+
--ux-green-700: #{$ux-green-700};
86+
--ux-green-800: #{$ux-green-800};
87+
--ux-green-900: #{$ux-green-900};
88+
--ux-navy-100: #{$ux-navy-100};
89+
--ux-navy-200: #{$ux-navy-200};
90+
--ux-navy-300: #{$ux-navy-300};
91+
--ux-navy-400: #{$ux-navy-400};
92+
--ux-navy-500: #{$ux-navy-500};
93+
--ux-navy-600: #{$ux-navy-600};
94+
--ux-navy-700: #{$ux-navy-700};
95+
--ux-navy-800: #{$ux-navy-800};
96+
--ux-navy-900: #{$ux-navy-900};
97+
--ux-neutral-100: #{$ux-neutral-100};
98+
--ux-neutral-200: #{$ux-neutral-200};
99+
--ux-neutral-300: #{$ux-neutral-300};
100+
--ux-neutral-400: #{$ux-neutral-400};
101+
--ux-neutral-500: #{$ux-neutral-500};
102+
--ux-neutral-600: #{$ux-neutral-600};
103+
--ux-neutral-700: #{$ux-neutral-700};
104+
--ux-neutral-800: #{$ux-neutral-800};
105+
--ux-neutral-900: #{$ux-neutral-900};
106+
--ux-orange-100: #{$ux-orange-100};
107+
--ux-orange-200: #{$ux-orange-200};
108+
--ux-orange-300: #{$ux-orange-300};
109+
--ux-orange-400: #{$ux-orange-400};
110+
--ux-orange-500: #{$ux-orange-500};
111+
--ux-orange-600: #{$ux-orange-600};
112+
--ux-orange-700: #{$ux-orange-700};
113+
--ux-orange-800: #{$ux-orange-800};
114+
--ux-orange-900: #{$ux-orange-900};
115+
--ux-red-100: #{$ux-red-100};
116+
--ux-red-200: #{$ux-red-200};
117+
--ux-red-300: #{$ux-red-300};
118+
--ux-red-400: #{$ux-red-400};
119+
--ux-red-500: #{$ux-red-500};
120+
--ux-red-600: #{$ux-red-600};
121+
--ux-red-700: #{$ux-red-700};
122+
--ux-red-800: #{$ux-red-800};
123+
--ux-red-900: #{$ux-red-900};
124+
--ux-sand-100: #{$ux-sand-100};
125+
--ux-sand-200: #{$ux-sand-200};
126+
--ux-sand-300: #{$ux-sand-300};
127+
--ux-sand-400: #{$ux-sand-400};
128+
--ux-sand-500: #{$ux-sand-500};
129+
--ux-sand-600: #{$ux-sand-600};
130+
--ux-sand-700: #{$ux-sand-700};
131+
--ux-sand-800: #{$ux-sand-800};
132+
--ux-sand-900: #{$ux-sand-900};
133+
--ux-teal-100: #{$ux-teal-100};
134+
--ux-teal-200: #{$ux-teal-200};
135+
--ux-teal-300: #{$ux-teal-300};
136+
--ux-teal-400: #{$ux-teal-400};
137+
--ux-teal-500: #{$ux-teal-500};
138+
--ux-teal-600: #{$ux-teal-600};
139+
--ux-teal-700: #{$ux-teal-700};
140+
--ux-teal-800: #{$ux-teal-800};
141+
--ux-teal-900: #{$ux-teal-900};
142+
--ux-yellow-100: #{$ux-yellow-100};
143+
--ux-yellow-200: #{$ux-yellow-200};
144+
--ux-yellow-300: #{$ux-yellow-300};
145+
--ux-yellow-400: #{$ux-yellow-400};
146+
--ux-yellow-500: #{$ux-yellow-500};
147+
--ux-yellow-600: #{$ux-yellow-600};
148+
--ux-yellow-700: #{$ux-yellow-700};
149+
--ux-yellow-800: #{$ux-yellow-800};
150+
--ux-yellow-900: #{$ux-yellow-900};
151+
--ux-purple-100: #{$ux-purple-100};
152+
--ux-purple-200: #{$ux-purple-200};
153+
--ux-purple-300: #{$ux-purple-300};
154+
--ux-purple-400: #{$ux-purple-400};
155+
--ux-purple-500: #{$ux-purple-500};
156+
--ux-purple-600: #{$ux-purple-600};
157+
--ux-purple-700: #{$ux-purple-700};
158+
--ux-purple-800: #{$ux-purple-800};
159+
--ux-purple-900: #{$ux-purple-900};
160+
161+
--synth-spacing-1: #{$synth-spacing-1};
162+
--synth-spacing-2: #{$synth-spacing-2};
163+
--synth-spacing-3: #{$synth-spacing-3};
164+
--synth-spacing-4: #{$synth-spacing-4};
165+
--synth-spacing-5: #{$synth-spacing-5};
166+
--synth-spacing-6: #{$synth-spacing-6};
167+
--synth-spacing-7: #{$synth-spacing-7};
168+
--synth-spacing-8: #{$synth-spacing-8};
169+
--synth-spacing-9: #{$synth-spacing-9};
170+
--synth-spacing-10: #{$synth-spacing-10};
171+
--synth-spacing-11: #{$synth-spacing-11};
172+
--synth-spacing-12: #{$synth-spacing-12};
173+
174+
--synth-success-green-dark: #{$synth-success-green-dark};
175+
--synth-success-green-medium: #{$synth-success-green-medium};
176+
--synth-success-green-light: #{$synth-success-green-light};
177+
--synth-error-red-dark: #{$synth-error-red-dark};
178+
--synth-error-red-medium: #{$synth-error-red-medium};
179+
--synth-error-red-light: #{$synth-error-red-light};
180+
--synth-warning-amber-dark: #{$synth-warning-amber-dark};
181+
--synth-warning-amber-medium: #{$synth-warning-amber-medium};
182+
--synth-warning-amber-light: #{$synth-warning-amber-light};
183+
--synth-warning-amber-alternate: #{$synth-warning-amber-alternate};
184+
--synth-alert-bg-neutral: #{$synth-alert-bg-neutral};
185+
--synth-div-stroke-neutral: #{$synth-div-stroke-neutral};
186+
--synth-header-neutral: #{$synth-header-neutral};
187+
--synth-page-neutral: #{$synth-page-neutral};
188+
--synth-text-neutral: #{$synth-text-neutral};
189+
--synth-unselected-neutral: #{$synth-unselected-neutral};
190+
--synth-accent-green: #{$synth-accent-green};
191+
--synth-dark-background-selected-blue: #{$synth-dark-background-selected-blue};
192+
--synth-dark-background-pressed-blue: #{$synth-dark-background-pressed-blue};
193+
--synth-hover-state: #{$synth-hover-state};
194+
--synth-indicator-stroke-green: #{$synth-indicator-stroke-green};
195+
--synth-navbar-blue: #{$synth-navbar-blue};
196+
--synth-primary-cta-blue: #{$synth-primary-cta-blue};
197+
--synth-selected-state-green: #{$synth-selected-state-green};
198+
--synth-hyperlink-color: #{$synth-hyperlink-color};
199+
--synth-hover-blue: #{$synth-hover-blue};
200+
--synth-header-gray-blue: #{$synth-header-gray-blue};
201+
202+
--synth-font-family: #{$synth-font-family};
203+
--synth-font-weight-regular: #{$synth-font-weight-regular};
204+
--synth-font-weight-medium: #{$synth-font-weight-medium};
205+
--synth-font-weight-bold: #{$synth-font-weight-bold};
206+
--synth-font-size-base: #{$synth-font-size-base};
207+
208+
--z-index-1050: #{$z-index-1050};
209+
--z-index-1045: #{$z-index-1045};
210+
--z-index-1040: #{$z-index-1040};
211+
--z-index-1030: #{$z-index-1030};
212+
--z-index-1025: #{$z-index-1025};
213+
--z-index-1020: #{$z-index-1020};
214+
--z-index-115: #{$z-index-115};
215+
--z-index-100: #{$z-index-100};
216+
--z-index-30: #{$z-index-30};
217+
--z-index-20: #{$z-index-20};
218+
--z-index-11: #{$z-index-11};
219+
--z-index-10: #{$z-index-10};
220+
--z-index-3: #{$z-index-3};
221+
--z-index-2: #{$z-index-2};
222+
--z-index-1: #{$z-index-1};
223+
--z-index-popover: #{$z-index-popover};
224+
--z-index-flash: #{$z-index-flash};
225+
--z-index-drawer: #{$z-index-drawer};
226+
--z-index-modal-backdrop: #{$z-index-modal-backdrop};
227+
--z-index-fixed: #{$z-index-fixed};
228+
--z-index-overlay: #{$z-index-overlay};
229+
--z-index-table-cell-sticky-column: #{$z-index-table-cell-sticky-column};
230+
--z-index-table-foot-sticky-row: #{$z-index-table-foot-sticky-row};
231+
}

0 commit comments

Comments
 (0)