polaris_view_helpers 0.0.3 → 0.0.4

data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/foundation/duration.scss

@@ -0,0 +1,24 @@
+$unit: 100ms;
+
+$duration-data: (
+  fast: $unit,
+  base: $unit * 2,
+  slow: $unit * 3,
+  slower: $unit * 4,
+  slowest: $unit * 5,
+);
+
+/// Returns the duration value for a given variant.
+///
+/// @param {String} $variant - The key for the given variant.
+/// @return {Number} The spacing for the variant (in miliseconds).
+
+@function duration($variant: base) {
+  $fetched-value: map-get($duration-data, $variant);
+
+  @if type-of($fetched-value) == number {
+    @return $fetched-value;
+  } @else {
+    @error 'Duration variant `#{$variant}` not found. Available variants: #{available-names($duration-data)}';
+  }
+}

data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/foundation/easing.scss

@@ -0,0 +1,23 @@
+$easing-data: (
+  base: cubic-bezier(0.64, 0, 0.35, 1),
+  in: cubic-bezier(0.36, 0, 1, 1),
+  out: cubic-bezier(0, 0, 0.42, 1),
+  excite: cubic-bezier(0.18, 0.67, 0.6, 1.22),
+  overshoot: cubic-bezier(0.07, 0.28, 0.32, 1.22),
+  anticipate: cubic-bezier(0.38, -0.4, 0.88, 0.65),
+);
+
+/// Returns the timing-function value for a given variant.
+///
+/// @param {String} $variant - The key for the given variant.
+/// @return {String} The cubic-bezier function (string) for the variant.
+
+@function easing($variant: base) {
+  $fetched-value: map-get($easing-data, $variant);
+
+  @if type-of($fetched-value) == string {
+    @return $fetched-value;
+  } @else {
+    @error 'Easing variant `#{$variant}` not found. Available variants: #{available-names($easing-data)}';
+  }
+}

data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/foundation/layout.scss

@@ -0,0 +1,46 @@
+////
+/// Layout
+/// @group foundation/layout
+////
+
+$layout-width-data: (
+  primary: (
+    min: rem(480px),
+    max: rem(672px)
+  ),
+  secondary: (
+    min: rem(240px),
+    max: rem(344px)
+  ),
+  nav: (
+    base: rem(240px)
+  ),
+  page-with-nav: (
+    base: rem(700px)
+  ),
+  page-content: (
+    not-condensed: rem(680px),
+    partially-condensed: rem(450px)
+  ),
+  inner-spacing: (
+    base: spacing(loose)
+  ),
+  outer-spacing: (
+    min: spacing(loose),
+    max: spacing(extra-loose)
+  )
+);
+
+/// Returns the widths of the specified column.
+/// @param {String} $name - The column name.
+/// @return {Number} The width for the column.
+
+@function layout-width($name, $value: base) {
+  $fetched-value: map-get(map-get($layout-width-data, $name), $value);
+
+  @if type-of($fetched-value) != null {
+    @return $fetched-value;
+  } @else {
+    @error 'Column `#{$name} - #{$value}` not found. Available columns: #{available-names($layout-width-data)}';
+  }
+}

data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/foundation/shadows.scss

@@ -0,0 +1,25 @@
+/* Shadows are intentionally very subtle gradiations. */
+/* stylelint-disable no-indistinguishable-colors */
+$shadows-data: (
+  faint: (0 1px 0 0 rgba(22, 29, 37, 0.05)),
+  base: (0 0 0 1px rgba(63, 63, 68, 0.05), 0 1px 3px 0 rgba(63, 63, 68, 0.15)),
+  deep: (0 0 0 1px rgba(6, 44, 82, 0.1), 0 2px 16px rgba(33, 43, 54, 0.08)),
+  layer: (0 31px 41px 0 rgba(32, 42, 53, 0.2), 0 2px 16px 0 rgba(32, 42, 54, 0.08)),
+  transparent: 0 0 0 0 transparent
+);
+/* stylelint-enable no-indistinguishable-colors */
+
+
+/// Returns the shadow for the specified depth
+/// @param {String} $depth [base] - The shadow's depth.
+/// @return {List} The shadow value.
+
+@function shadow($depth: base) {
+  $fetched-value: map-get($shadows-data, $depth);
+
+  @if type-of($fetched-value) == list {
+    @return $fetched-value;
+  } @else {
+    @error 'Shadow variant `#{$depth}` not found. Available variants: #{available-names($shadows-data)}';
+  }
+}

data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/foundation/spacing.scss

@@ -0,0 +1,25 @@
+$unit: 4px;
+
+$spacing-data: (
+  none: 0,
+  extra-tight: rem($unit),
+  tight: rem($unit * 2),
+  base: rem($unit * 4),
+  loose: rem($unit * 5),
+  extra-loose: rem($unit * 8)
+);
+
+/// Returns the spacing value for a given variant.
+///
+/// @param {String} $variant - The key for the given variant.
+/// @return {Number} The spacing for the variant.
+
+@function spacing($variant: base) {
+  $fetched-value: map-get($spacing-data, $variant);
+
+  @if type-of($fetched-value) == number {
+    @return $fetched-value;
+  } @else {
+    @error 'Spacing variant `#{$variant}` not found. Available variants: #{available-names($spacing-data)}';
+  }
+}

data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/foundation/typography.scss

@@ -0,0 +1,127 @@
+$typography-condensed: em(640px);
+
+$font-family-data: (
+  base: #{-apple-system, 'BlinkMacSystemFont', 'San Francisco', 'Roboto', 'Segoe UI', 'Helvetica Neue', sans-serif},
+  monospace: #{Monaco, Consolas, 'Lucida Console', monospace}
+);
+
+$line-height-data: (
+  caption: (
+    base: rem(20px),
+    large-screen: rem(16px)
+  ),
+  heading: (
+    base: rem(24px)
+  ),
+  subheading: (
+    base: rem(16px)
+  ),
+  input: (
+    base: rem(24px)
+  ),
+  body: (
+    base: rem(20px)
+  ),
+  display-x-large: (
+    base: rem(36px),
+    large-screen: rem(44px)
+  ),
+  display-large: (
+    base: rem(28px),
+    large-screen: rem(32px)
+  ),
+  display-medium: (
+    base: rem(28px),
+    large-screen: rem(32px)
+  ),
+  display-small: (
+    base: rem(24px),
+    large-screen: rem(28px)
+  )
+);
+
+$font-size-data: (
+  caption: (
+    base: rem(13px),
+    large-screen: rem(12px)
+  ),
+  heading: (
+    base: rem(17px),
+    large-screen: rem(16px)
+  ),
+  subheading: (
+    base: rem(13px),
+    large-screen: rem(12px)
+  ),
+  input: (
+    base: rem(16px),
+    large-screen: rem(14px)
+  ),
+  body: (
+    base: rem(15px),
+    large-screen: rem(14px)
+  ),
+  display-x-large: (
+    base: rem(27px),
+    large-screen: rem(42px)
+  ),
+  display-large: (
+    base: rem(24px),
+    large-screen: rem(28px)
+  ),
+  display-medium: (
+    base: rem(21px),
+    large-screen: rem(26px)
+  ),
+  display-small: (
+    base: rem(16px),
+    large-screen: rem(20px)
+  )
+);
+
+/// Returns the font stack for a given family.
+///
+/// @param {String} $family - The key for the given family.
+/// @return {Number} The font stack for the family.
+
+@function font-family($family: base) {
+  $fetched-value: map-get($font-family-data, $family);
+
+  @if $fetched-value != null {
+    @return $fetched-value;
+  } @else {
+    @error 'Font family `#{$family}` not found. Available font families: #{available-names($font-family-data)}';
+  }
+}
+
+/// Returns the line height for a given text style and variant.
+///
+/// @param {String} $style - The font style.
+/// @param {String} $variant [base] - The variant on the font-size.
+/// @return {Number} The line-height for the text-style.
+
+@function line-height($style, $variant: base) {
+  $fetched-line-height: map-get(map-get($line-height-data, $style), $variant);
+
+  @if type-of($fetched-line-height) != null {
+    @return $fetched-line-height;
+  } @else {
+    @error 'Line height `#{$style} - #{$variant}` not found. Available line heights: #{available-names($line-height-data)}';
+  }
+}
+
+/// Returns the font size for a given text style and variant.
+///
+/// @param {String} $style - The font style.
+/// @param {String} $variant [base] - The variant on the font-size.
+/// @return {Number} The font-size for the text-style.
+
+@function font-size($style, $variant: base) {
+  $fetched-font-size: map-get(map-get($font-size-data, $style), $variant);
+
+  @if type-of($fetched-font-size) != null {
+    @return $fetched-font-size;
+  } @else {
+    @error 'Line height `#{$style} - #{$variant}` not found. Available font sizes: #{available-names($line-height-data)}';
+  }
+}

data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/foundation/utilities.scss

@@ -0,0 +1,90 @@
+$default-browser-font-size: 16px;
+$base-font-size: 10px;
+
+/// Returns the value in rem for a given pixel value.
+/// @param {Number} $value - The pixel value to be converted.
+/// @return {Number} The converted value in rem.
+
+@function rem($value) {
+  $unit: unit($value);
+
+  @if $unit == 'rem' {
+    @return $value;
+  } @else if $unit == 'px' {
+    @return $value / $base-font-size * 1rem;
+  } @else if $unit == 'em' {
+    @return $unit / 1em * 1rem;
+  } @else {
+    @error 'Value must be in px, em, or rem.';
+  }
+}
+
+/// Returns the value in pixels for a given rem value.
+/// @param {Number} $value - The rem value to be converted.
+/// @return {Number} The converted value in pixels.
+
+@function px($value) {
+  $unit: unit($value);
+
+  @if $unit == 'px' {
+    @return $value;
+  } @else if $unit == 'em' {
+    @return ($value / 1em) * $base-font-size;
+  } @else if $unit == 'rem' {
+    @return ($value / 1rem) * $base-font-size;
+  } @else {
+    @error 'Value must be in rem, em, or px.';
+  }
+}
+
+/// Returns the value in pixels for a given pixel value. Note that this
+/// only works for elements that have had no font-size changes.
+/// @param {Number} $value - The pixel value to be converted.
+/// @return {Number} The converted value in ems.
+
+@function em($value) {
+  $unit: unit($value);
+
+  @if $unit == 'em' {
+    @return $value;
+  } @else if $unit == 'rem' {
+    @return $value / 1rem * 1em * ($base-font-size / $default-browser-font-size);
+  } @else if $unit == 'px' {
+    @return $value / $default-browser-font-size * 1em;
+  } @else {
+    @error 'Value must be in px, rem, or em.';
+  }
+}
+
+/// Returns the list of available names in a given map.
+/// @param {Map} $map - The map of data to list the names from.
+/// @param {Number} $map - The level of depth to get names from.
+/// @return {String} The list of names in the map.
+
+@function available-names($map, $level: 1) {
+  @if type-of($map) != 'map' {
+    @return null;
+  }
+
+  $output: '';
+  $newline: '\A ';
+
+  @if $level == 1 {
+    @each $key, $value in $map {
+      $output: $output + '#{$newline}- #{$key} #{available-names($value, $level + 1)}';
+    }
+  } @else {
+    $output: '(';
+    $i: 1;
+
+    @each $key, $value in $map {
+      $sep: if($i < length($map), ', ', '');
+      $output: $output + '#{$key}#{$sep}#{available-names($value, $level + 1)}';
+      $i: $i + 1;
+    }
+
+    $output: $output + ')';
+  }
+
+  @return $output;
+}

data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/foundation/z-index.scss

@@ -0,0 +1,19 @@
+$global-elements: (
+  content: 100,
+  overlay: 400,
+);
+
+/// Returns the z-index of the specified element.
+/// @param {String} $element - The key for the element.
+/// @param {Map} $context - The map in which to search for the element.
+/// @return {Number} The z-index for the element.
+
+@function z-index($element, $context: $global-elements) {
+  $index: map-get($context, $element);
+
+  @if $index {
+    @return $index;
+  } @else {
+    @error 'z-index `#{$element}` in `#{$context}` not found.';
+  }
+}

data/vendor/assets/stylesheets/shopify-polaris-1.0.3/styles/global.scss

@@ -0,0 +1,55 @@
+html,
+body {
+  @include text-style-body;
+  @include text-emphasis-normal;
+  font-family: font-family();
+}
+
+html {
+  position: relative;
+  box-sizing: border-box;
+  font-size: ($base-font-size / $default-browser-font-size) * 100%;
+  -webkit-font-smoothing: antialiased;
+
+  // This needs to come after -webkit-font-smoothing
+  // stylelint-disable-next-line declaration-block-properties-order
+  -moz-osx-font-smoothing: grayscale;
+
+  text-size-adjust: 100%;
+  text-rendering: optimizeLegibility;
+}
+
+body {
+  min-height: 100%;
+  margin: 0;
+  padding: 0;
+  background-color: color(sky, light);
+}
+
+* {
+  box-sizing: inherit;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p {
+  margin: 0;
+  font-size: 1em;
+  font-weight: 400;
+}
+
+a:not([data-polaris-unstyled]) {
+  color: color(blue);
+  text-decoration: none;
+
+  &:hover,
+  &:focus,
+  &:active {
+    outline: none;
+    color: color(blue, dark);
+  }
+}