feat(variables): add prefix to all sass variables (#43)

* add prefix to all variables * remove more variables
wework · Feb 27, 2019 · d75fbeb · d75fbeb
1 parent d5271f8
commit d75fbeb
Show file tree

Hide file tree

Showing 11 changed files with 79 additions and 89 deletions.
diff --git a/packages/ray/lib/components/button/_button.scss b/packages/ray/lib/components/button/_button.scss
@@ -1,15 +1,15 @@
-$btn-border-radius: $border-radius;
+$ray-btn-border-radius: $ray-border-radius;
 
 .#{$prefix}btn {
  font-family: inherit;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1;
  display: inline-block;
- border: $border-width solid $ray-color-blue-50;
- border-radius: $btn-border-radius;
+ border: $ray-border-width solid $ray-color-blue-50;
+ border-radius: $ray-btn-border-radius;
  cursor: pointer;
- padding: $btn-v-spacing $btn-h-spacing;
+ padding: $ray-btn-v-spacing $ray-btn-h-spacing;
  min-width: 120px;
  white-space: nowrap;
  text-align: center;
@@ -107,7 +107,7 @@ $btn-border-radius: $border-radius;
 }
 
 .#{$prefix}btn--compact {
- padding: $btn-v-spacing-compact $btn-h-spacing-compact;
+ padding: $ray-btn-v-spacing-compact $ray-btn-h-spacing-compact;
  line-height: 1;
  height: auto;
 }

diff --git a/packages/ray/lib/components/card/_card.scss b/packages/ray/lib/components/card/_card.scss
@@ -3,7 +3,7 @@ $card-border-color: $ray-color-gray-10;
 
 .#{$prefix}card {
  width: 100%;
- border-radius: $border-radius;
+ border-radius: $ray-border-radius;
  background-color: $ray-color-white;
  overflow: hidden;
  height: 100%;
@@ -16,8 +16,8 @@ $card-border-color: $ray-color-gray-10;
  border: 1px solid $card-border-color;
 
  &:not(:first-child) {
- border-bottom-left-radius: $border-radius;
- border-bottom-right-radius: $border-radius;
+ border-bottom-left-radius: $ray-border-radius;
+ border-bottom-right-radius: $ray-border-radius;
  border-top: 0;
  }
  }

diff --git a/packages/ray/lib/components/form-item/_form-item.scss b/packages/ray/lib/components/form-item/_form-item.scss
@@ -7,9 +7,9 @@
  display: block;
  color: $ray-color-text-medium;
  font-weight: 400;
- font-size: $field-label-size-focus;
+ font-size: $ray-field-label-size-focus;
  margin-top: 0.25rem;
- margin-left: $field-h-spacing;
+ margin-left: $ray-field-h-spacing;
  line-height: 1;
  width: 100%;
  text-overflow: ellipsis;

diff --git a/packages/ray/lib/components/radio-checkbox/_radio-checkbox.scss b/packages/ray/lib/components/radio-checkbox/_radio-checkbox.scss
@@ -1,5 +1,5 @@
-$radio-checkbox-border-width: 3px;
-$radio-checkbox-width: 1rem;
+$ray-radio-checkbox-border-width: 3px;
+$ray-radio-checkbox-width: 1rem;
 
 .#{$prefix}radio,
 .#{$prefix}checkbox {
@@ -12,18 +12,18 @@ $radio-checkbox-width: 1rem;
  &__input {
  appearance: none;
  background-color: $ray-color-white;
- border: $radio-checkbox-border-width double $ray-color-black;
- width: $radio-checkbox-width;
- height: $radio-checkbox-width;
+ border: $ray-radio-checkbox-border-width double $ray-color-black;
+ width: $ray-radio-checkbox-width;
+ height: $ray-radio-checkbox-width;
  transform: translateY(16%);
 
  &::after {
  content: '';
- width: calc(#{$radio-checkbox-width} - 2 * #{$radio-checkbox-border-width});
- height: calc(#{$radio-checkbox-width} - 2 * #{$radio-checkbox-border-width});
+ width: calc(#{$ray-radio-checkbox-width} - 2 * #{$ray-radio-checkbox-border-width});
+ height: calc(#{$ray-radio-checkbox-width} - 2 * #{$ray-radio-checkbox-border-width});
  background: $ray-color-white;
  display: block;
- transition: $transition;
+ transition: $ray-transition;
  }
 
  &:checked {
@@ -76,5 +76,5 @@ $radio-checkbox-width: 1rem;
 }
 
 .#{$prefix}checkbox__input {
- border-radius: $border-radius;
+ border-radius: $ray-border-radius;
 }
diff --git a/packages/ray/lib/components/select/_select.scss b/packages/ray/lib/components/select/_select.scss
@@ -1,17 +1,17 @@
 @import '../../global/mixins/form-items';
 
 .#{$prefix}select {
- border: $border-width solid $ray-color-gray-60;
+ border: $ray-border-width solid $ray-color-gray-60;
  background-color: $ray-color-white;
- border-radius: $border-radius;
+ border-radius: $ray-border-radius;
  position: relative;
- height: $field-height;
+ height: $ray-field-height;
 
  &::after {
  content: '';
  pointer-events: none;
  position: absolute;
- right: $field-h-spacing;
+ right: $ray-field-h-spacing;
  top: 0px;
  bottom: 0px;
  width: 0px;
@@ -32,14 +32,14 @@
  &__input {
  appearance: none;
  font-family: inherit;
- border-radius: $border-radius;
+ border-radius: $ray-border-radius;
  line-height: 1;
  width: 100%;
  height: 100%;
- font-size: $field-label-size;
+ font-size: $ray-field-label-size;
  display: block;
  background-color: transparent;
- padding: 0 $field-h-spacing;
+ padding: 0 $ray-field-h-spacing;
  outline: 0;
  border: 0;
  cursor: pointer;
@@ -95,7 +95,7 @@
  }
 
  &--compact {
- height: $field-height-compact;
+ height: $ray-field-height-compact;
 
  .#{$prefix}select__label {
  display: flex;

diff --git a/packages/ray/lib/components/table/_table.scss b/packages/ray/lib/components/table/_table.scss
@@ -10,7 +10,7 @@
 
  th {
  font-size: 12px;
- font-family: $font-stack-mono;
+ font-family: $ray-font-stack-mono;
  color: $ray-color-gray-60;
  text-align: left;
  text-transform: uppercase;

diff --git a/packages/ray/lib/components/text-field/_text-field.scss b/packages/ray/lib/components/text-field/_text-field.scss
@@ -2,11 +2,11 @@
 
 .#{$prefix}text-field,
 .#{$prefix}text-area {
- border: $border-width solid $ray-color-gray-60;
+ border: $ray-border-width solid $ray-color-gray-60;
  background-color: $ray-color-white;
- border-radius: $border-radius;
+ border-radius: $ray-border-radius;
  position: relative;
- height: $field-height;
+ height: $ray-field-height;
 
  &__label {
  @include label;
@@ -15,14 +15,14 @@
 
  &__input {
  font-family: inherit;
- border-radius: $border-radius;
+ border-radius: $ray-border-radius;
  line-height: 1;
  width: 100%;
  height: 100%;
- font-size: $field-label-size;
+ font-size: $ray-field-label-size;
  display: block;
  background-color: transparent;
- padding: 0 $field-h-spacing;
+ padding: 0 $ray-field-h-spacing;
  outline: 0;
  border: 0;
  cursor: pointer;
@@ -106,11 +106,11 @@
  }
 
  &--compact {
- height: $field-height-compact;
+ height: $ray-field-height-compact;
 
  .#{$prefix}text-field__label,
  .#{$prefix}text-area__label {
- padding-top: $field-v-spacing-compact;
+ padding-top: $ray-field-v-spacing-compact;
  }
 
  .#{$prefix}text-field__input,
@@ -134,25 +134,25 @@
  &,
  &__input {
  height: auto;
- min-height: $field-height - 2 * $border-width;
+ min-height: $ray-field-height - 2 * $ray-border-width;
  }
 
  &__input {
  display: inline-block;
  padding-top: 1rem;
  resize: vertical;
- line-height: $field-line-height;
- height: $field-height - 2 * $border-width;
+ line-height: $ray-field-line-height;
+ height: $ray-field-height - 2 * $ray-border-width;
  }
 
  &--compact {
- min-height: $field-height-compact;
+ min-height: $ray-field-height-compact;
  line-height: 0;
 
  .#{$prefix}text-area__input {
- padding-top: $field-v-spacing-compact / 2;
- height: $field-height-compact - 2 * $border-width;
- min-height: $field-height-compact - 2 * $border-width;
+ padding-top: $ray-field-v-spacing-compact / 2;
+ height: $ray-field-height-compact - 2 * $ray-border-width;
+ min-height: $ray-field-height-compact - 2 * $ray-border-width;
  }
  }
 }
diff --git a/packages/ray/lib/global/_base.scss b/packages/ray/lib/global/_base.scss
@@ -3,7 +3,7 @@ html {
 }
 
 body {
- font-family: $font-stack-sans-serif;
+ font-family: $ray-font-stack-sans-serif;
  color: $ray-color-text-dark;
  min-height: 100vh;
  display: flex;

diff --git a/packages/ray/lib/global/_functions.scss b/packages/ray/lib/global/_functions.scss
@@ -26,7 +26,7 @@
  $values: map-values($map);
  $first-value: nth($values, 1);
  @if $first-value != 0 {
- @warn "First breakpoint in `$grid-breakpoints` must start at 0, but starts at #{$first-value}.";
+ @warn "First breakpoint in `$ray-grid-breakpoints` must start at 0, but starts at #{$first-value}.";
  }
 }
 

diff --git a/packages/ray/lib/global/_variables.scss b/packages/ray/lib/global/_variables.scss
@@ -1,66 +1,56 @@
 @import './functions';
 $prefix: 'ray-';
-$font-stack-sans-serif: 'Apercu', Avenir, -apple-system, BlinkMacSystemFont,
+$ray-font-stack-sans-serif: 'Apercu', Avenir, -apple-system, BlinkMacSystemFont,
  'Helvetica Neue', Helvetica, 'Calibri', 'Roboto', Arial, sans-serif !default;
-$font-stack-mono: 'Apercu Mono', monospace !default;
+$ray-font-stack-mono: 'Apercu Mono', monospace !default;
 
-$transition: all 0.125s ease;
+$ray-transition: all 0.125s ease;
 
-$breakpoint-mobile-px: 400px !default;
-$breakpoint-tablet-px: 600px !default;
-$breakpoint-desktop-px: 840px !default;
-$breakpoint-desktop-large-px: 1024px !default;
-
-$border-radius: 0.25rem !default;
-$border-width: 1px !default;
+$ray-border-radius: 0.25rem !default;
+$ray-border-width: 1px !default;
 
 $ray-color-text-light: $ray-color-gray-30;
 $ray-color-text-medium: $ray-color-gray-60;
 $ray-color-text-dark: $ray-color-black;
 
-$field-v-spacing: 20px;
-$field-v-spacing-compact: 12px;
-$field-h-spacing: 12px;
-$field-label-size: 1rem;
-$field-label-size-focus: 12px;
-$field-height: 56px;
-$field-height-compact: 40px;
-$field-line-height: 28px;
-
-$padding-5: 5rem;
+$ray-field-v-spacing: 20px;
+$ray-field-v-spacing-compact: 12px;
+$ray-field-h-spacing: 12px;
+$ray-field-label-size: 1rem;
+$ray-field-label-size-focus: 12px;
+$ray-field-height: 56px;
+$ray-field-height-compact: 40px;
+$ray-field-line-height: 28px;
 
-$btn-v-spacing: 20px - $border-width;
-$btn-v-spacing-compact: 12px - $border-width;
-$btn-h-spacing: 24px - $border-width;
-$btn-h-spacing-compact: 12px - $border-width;
+$ray-btn-v-spacing: 20px - $ray-border-width;
+$ray-btn-v-spacing-compact: 12px - $ray-border-width;
+$ray-btn-h-spacing: 24px - $ray-border-width;
+$ray-btn-h-spacing-compact: 12px - $ray-border-width;
 
 // Grid breakpoints
 //
 // Define the minimum dimensions at which your layout will change,
 // adapting to different screen sizes, for use in media queries.
 
-$grid-columns: 12;
-$grid-gutter-width: 24px;
-
-$grid-breakpoints: (
+$ray-grid-breakpoints: (
  sm: 0px,
  md: 600px,
  lg: 1195px
 );
 
-$container-max-widths: (
+$ray-container-max-widths: (
  sm: 100%,
  md: 100%,
  lg: 1320px
 );
 
-$container-gutters: (
+$ray-container-gutters: (
  sm: 1rem,
  md: 3rem,
  lg: 3.75rem
 );
 
-@include _assert-ascending($grid-breakpoints, '$grid-breakpoints');
-@include _assert-starts-at-zero($grid-breakpoints);
+@include _assert-ascending($ray-grid-breakpoints, '$ray-grid-breakpoints');
+@include _assert-starts-at-zero($ray-grid-breakpoints);
 
-$enable-grid-classes: true !default;
+$ray-enable-grid-classes: true !default;
diff --git a/packages/ray/lib/global/mixins/_form-items.scss b/packages/ray/lib/global/mixins/_form-items.scss
@@ -1,17 +1,17 @@
 @mixin label {
  @include no-select;
 
- font-family: $font-stack-mono;
- font-size: $field-label-size;
+ font-family: $ray-font-stack-mono;
+ font-size: $ray-field-label-size;
  line-height: 1;
  font-weight: 400;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
- padding-left: $field-h-spacing;
- padding-right: $field-h-spacing;
- padding-top: $field-v-spacing;
+ padding-left: $ray-field-h-spacing;
+ padding-right: $ray-field-h-spacing;
+ padding-top: $ray-field-v-spacing;
  color: $ray-color-text-medium;
  transition: padding 0.2s ease;
  height: 100%;
@@ -26,14 +26,14 @@
 }
 
 @mixin label--active {
- font-size: $field-label-size-focus;
+ font-size: $ray-field-label-size-focus;
  padding-top: 0;
  pointer-events: none;
 
- top: -$field-h-spacing / 2;
- left: $field-h-spacing / 2;
- padding-left: $field-h-spacing / 2;
- padding-right: $field-h-spacing / 2;
+ top: -$ray-field-h-spacing / 2;
+ left: $ray-field-h-spacing / 2;
+ padding-left: $ray-field-h-spacing / 2;
+ padding-right: $ray-field-h-spacing / 2;
  width: auto;
  height: auto;
  background: $ray-color-white;
@@ -49,7 +49,7 @@
  }
 
  to {
- height: $border-radius;
+ height: $ray-border-radius;
  opacity: 0;
  }
 }