Skip to content

Commit

Permalink
Provides CSS properties for typography, layout and color (#1168)
Browse files Browse the repository at this point in the history
  • Loading branch information
@kyleshike
kyleshike authored Mar 25, 2024
1 parent 798b783 commit 1eeb986
Show file tree
Hide file tree
Showing 2 changed files with 232 additions and 1 deletion.
2 changes: 1 addition & 1 deletion bin/link-rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,4 +10,4 @@ fi
yarn build
yalc publish
cd $RAILS_SERVER_PATH
yalc link @user-interviews/ui-design-system
yalc add @user-interviews/ui-design-system
231 changes: 231 additions & 0 deletions scss/css_properties.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,231 @@
@import 'borders';
@import 'box_shadow';
@import 'colors';
@import 'elevations';
@import 'spacing';
@import 'typography';
@import 'z_stack';

:root {
--ux-border-radius: #{$ux-border-radius};

--ux-navbar-shadow-color: #{$ux-navbar-shadow-color};
--ux-box-shadow: #{$ux-box-shadow};
--ux-box-shadow-light: #{$ux-box-shadow-light};
--ux-box-shadow-card: #{$ux-box-shadow-card};
--ux-box-shadow-table-sticky-column-left: #{$ux-box-shadow-table-sticky-column-left};
--ux-box-shadow-table-sticky-column-right: #{$ux-box-shadow-table-sticky-column-right};
--ux-box-shadow-top: #{$ux-box-shadow-top};
--ux-box-shadow-top-light: #{$ux-box-shadow-top-light};
--ux-drawer-box-shadow-right: #{$ux-drawer-box-shadow-right};
--ux-drawer-box-shadow-left: #{$ux-drawer-box-shadow-left};

--ux-elevations-00: #{$ux-elevations-00};
--ux-elevations-10: #{$ux-elevations-10};
--ux-elevations-20: #{$ux-elevations-20};
--ux-elevations-30: #{$ux-elevations-30};
--ux-elevations-40: #{$ux-elevations-40};
--ux-elevations-50: #{$ux-elevations-50};

--ux-black: #{$ux-black};
--ux-blue: #{$ux-blue};
--ux-cream: #{$ux-cream};
--ux-emerald: #{$ux-emerald};
--ux-gray: #{$ux-gray};
--ux-green: #{$ux-green};
--ux-light-blue: #{$ux-light-blue};
--ux-navy: #{$ux-navy};
--ux-orange: #{$ux-orange};
--ux-purple: #{$ux-purple};
--ux-red: #{$ux-red};
--ux-sand: #{$ux-sand};
--ux-teal: #{$ux-teal};
--ux-yellow: #{$ux-yellow};
--ux-white: #{$ux-white};
--brand-color-facebook: #{$brand-color-facebook};
--brand-color-google: #{$brand-color-google};
--brand-color-google-alt: #{$brand-color-google-alt};
--brand-color-linkedin: #{$brand-color-linkedin};
--brand-color-office365: #{$brand-color-office365};
--brand-color-twitter: #{$brand-color-twitter};
--brand-color-yahoo: #{$brand-color-yahoo};
--ux-blue-100: #{$ux-blue-100};
--ux-blue-200: #{$ux-blue-200};
--ux-blue-300: #{$ux-blue-300};
--ux-blue-400: #{$ux-blue-400};
--ux-blue-500: #{$ux-blue-500};
--ux-blue-600: #{$ux-blue-600};
--ux-blue-700: #{$ux-blue-700};
--ux-blue-800: #{$ux-blue-800};
--ux-blue-900: #{$ux-blue-900};
--ux-emerald-100: #{$ux-emerald-100};
--ux-emerald-200: #{$ux-emerald-200};
--ux-emerald-300: #{$ux-emerald-300};
--ux-emerald-400: #{$ux-emerald-400};
--ux-emerald-500: #{$ux-emerald-500};
--ux-emerald-600: #{$ux-emerald-600};
--ux-emerald-700: #{$ux-emerald-700};
--ux-emerald-800: #{$ux-emerald-800};
--ux-emerald-900: #{$ux-emerald-900};
--ux-gray-100: #{$ux-gray-100};
--ux-gray-200: #{$ux-gray-200};
--ux-gray-300: #{$ux-gray-300};
--ux-gray-400: #{$ux-gray-400};
--ux-gray-500: #{$ux-gray-500};
--ux-gray-600: #{$ux-gray-600};
--ux-gray-700: #{$ux-gray-700};
--ux-gray-800: #{$ux-gray-800};
--ux-gray-900: #{$ux-gray-900};
--ux-green-100: #{$ux-green-100};
--ux-green-200: #{$ux-green-200};
--ux-green-300: #{$ux-green-300};
--ux-green-400: #{$ux-green-400};
--ux-green-500: #{$ux-green-500};
--ux-green-600: #{$ux-green-600};
--ux-green-700: #{$ux-green-700};
--ux-green-800: #{$ux-green-800};
--ux-green-900: #{$ux-green-900};
--ux-navy-100: #{$ux-navy-100};
--ux-navy-200: #{$ux-navy-200};
--ux-navy-300: #{$ux-navy-300};
--ux-navy-400: #{$ux-navy-400};
--ux-navy-500: #{$ux-navy-500};
--ux-navy-600: #{$ux-navy-600};
--ux-navy-700: #{$ux-navy-700};
--ux-navy-800: #{$ux-navy-800};
--ux-navy-900: #{$ux-navy-900};
--ux-neutral-100: #{$ux-neutral-100};
--ux-neutral-200: #{$ux-neutral-200};
--ux-neutral-300: #{$ux-neutral-300};
--ux-neutral-400: #{$ux-neutral-400};
--ux-neutral-500: #{$ux-neutral-500};
--ux-neutral-600: #{$ux-neutral-600};
--ux-neutral-700: #{$ux-neutral-700};
--ux-neutral-800: #{$ux-neutral-800};
--ux-neutral-900: #{$ux-neutral-900};
--ux-orange-100: #{$ux-orange-100};
--ux-orange-200: #{$ux-orange-200};
--ux-orange-300: #{$ux-orange-300};
--ux-orange-400: #{$ux-orange-400};
--ux-orange-500: #{$ux-orange-500};
--ux-orange-600: #{$ux-orange-600};
--ux-orange-700: #{$ux-orange-700};
--ux-orange-800: #{$ux-orange-800};
--ux-orange-900: #{$ux-orange-900};
--ux-red-100: #{$ux-red-100};
--ux-red-200: #{$ux-red-200};
--ux-red-300: #{$ux-red-300};
--ux-red-400: #{$ux-red-400};
--ux-red-500: #{$ux-red-500};
--ux-red-600: #{$ux-red-600};
--ux-red-700: #{$ux-red-700};
--ux-red-800: #{$ux-red-800};
--ux-red-900: #{$ux-red-900};
--ux-sand-100: #{$ux-sand-100};
--ux-sand-200: #{$ux-sand-200};
--ux-sand-300: #{$ux-sand-300};
--ux-sand-400: #{$ux-sand-400};
--ux-sand-500: #{$ux-sand-500};
--ux-sand-600: #{$ux-sand-600};
--ux-sand-700: #{$ux-sand-700};
--ux-sand-800: #{$ux-sand-800};
--ux-sand-900: #{$ux-sand-900};
--ux-teal-100: #{$ux-teal-100};
--ux-teal-200: #{$ux-teal-200};
--ux-teal-300: #{$ux-teal-300};
--ux-teal-400: #{$ux-teal-400};
--ux-teal-500: #{$ux-teal-500};
--ux-teal-600: #{$ux-teal-600};
--ux-teal-700: #{$ux-teal-700};
--ux-teal-800: #{$ux-teal-800};
--ux-teal-900: #{$ux-teal-900};
--ux-yellow-100: #{$ux-yellow-100};
--ux-yellow-200: #{$ux-yellow-200};
--ux-yellow-300: #{$ux-yellow-300};
--ux-yellow-400: #{$ux-yellow-400};
--ux-yellow-500: #{$ux-yellow-500};
--ux-yellow-600: #{$ux-yellow-600};
--ux-yellow-700: #{$ux-yellow-700};
--ux-yellow-800: #{$ux-yellow-800};
--ux-yellow-900: #{$ux-yellow-900};
--ux-purple-100: #{$ux-purple-100};
--ux-purple-200: #{$ux-purple-200};
--ux-purple-300: #{$ux-purple-300};
--ux-purple-400: #{$ux-purple-400};
--ux-purple-500: #{$ux-purple-500};
--ux-purple-600: #{$ux-purple-600};
--ux-purple-700: #{$ux-purple-700};
--ux-purple-800: #{$ux-purple-800};
--ux-purple-900: #{$ux-purple-900};

--synth-spacing-1: #{$synth-spacing-1};
--synth-spacing-2: #{$synth-spacing-2};
--synth-spacing-3: #{$synth-spacing-3};
--synth-spacing-4: #{$synth-spacing-4};
--synth-spacing-5: #{$synth-spacing-5};
--synth-spacing-6: #{$synth-spacing-6};
--synth-spacing-7: #{$synth-spacing-7};
--synth-spacing-8: #{$synth-spacing-8};
--synth-spacing-9: #{$synth-spacing-9};
--synth-spacing-10: #{$synth-spacing-10};
--synth-spacing-11: #{$synth-spacing-11};
--synth-spacing-12: #{$synth-spacing-12};

--synth-success-green-dark: #{$synth-success-green-dark};
--synth-success-green-medium: #{$synth-success-green-medium};
--synth-success-green-light: #{$synth-success-green-light};
--synth-error-red-dark: #{$synth-error-red-dark};
--synth-error-red-medium: #{$synth-error-red-medium};
--synth-error-red-light: #{$synth-error-red-light};
--synth-warning-amber-dark: #{$synth-warning-amber-dark};
--synth-warning-amber-medium: #{$synth-warning-amber-medium};
--synth-warning-amber-light: #{$synth-warning-amber-light};
--synth-warning-amber-alternate: #{$synth-warning-amber-alternate};
--synth-alert-bg-neutral: #{$synth-alert-bg-neutral};
--synth-div-stroke-neutral: #{$synth-div-stroke-neutral};
--synth-header-neutral: #{$synth-header-neutral};
--synth-page-neutral: #{$synth-page-neutral};
--synth-text-neutral: #{$synth-text-neutral};
--synth-unselected-neutral: #{$synth-unselected-neutral};
--synth-accent-green: #{$synth-accent-green};
--synth-dark-background-selected-blue: #{$synth-dark-background-selected-blue};
--synth-dark-background-pressed-blue: #{$synth-dark-background-pressed-blue};
--synth-hover-state: #{$synth-hover-state};
--synth-indicator-stroke-green: #{$synth-indicator-stroke-green};
--synth-navbar-blue: #{$synth-navbar-blue};
--synth-primary-cta-blue: #{$synth-primary-cta-blue};
--synth-selected-state-green: #{$synth-selected-state-green};
--synth-hyperlink-color: #{$synth-hyperlink-color};
--synth-hover-blue: #{$synth-hover-blue};
--synth-header-gray-blue: #{$synth-header-gray-blue};

--synth-font-family: #{$synth-font-family};
--synth-font-weight-regular: #{$synth-font-weight-regular};
--synth-font-weight-medium: #{$synth-font-weight-medium};
--synth-font-weight-bold: #{$synth-font-weight-bold};
--synth-font-size-base: #{$synth-font-size-base};

--z-index-1050: #{$z-index-1050};
--z-index-1045: #{$z-index-1045};
--z-index-1040: #{$z-index-1040};
--z-index-1030: #{$z-index-1030};
--z-index-1025: #{$z-index-1025};
--z-index-1020: #{$z-index-1020};
--z-index-115: #{$z-index-115};
--z-index-100: #{$z-index-100};
--z-index-30: #{$z-index-30};
--z-index-20: #{$z-index-20};
--z-index-11: #{$z-index-11};
--z-index-10: #{$z-index-10};
--z-index-3: #{$z-index-3};
--z-index-2: #{$z-index-2};
--z-index-1: #{$z-index-1};
--z-index-popover: #{$z-index-popover};
--z-index-flash: #{$z-index-flash};
--z-index-drawer: #{$z-index-drawer};
--z-index-modal-backdrop: #{$z-index-modal-backdrop};
--z-index-fixed: #{$z-index-fixed};
--z-index-overlay: #{$z-index-overlay};
--z-index-table-cell-sticky-column: #{$z-index-table-cell-sticky-column};
--z-index-table-foot-sticky-row: #{$z-index-table-foot-sticky-row};
}

0 comments on commit 1eeb986

Please sign in to comment.