@fs-design/pantry 1.562.7

package/src/components/table/_index.scss

@@ -0,0 +1,41 @@
+.table-scrollable {
+  overflow-x: auto;
+}
+
+table {
+  border: 1px solid $l-base-gray-lightest;
+  border-collapse: collapse;
+}
+
+thead + tbody,
+tbody + tfoot {
+  border-top: 1px solid $l-base-gray-lightest;
+}
+
+td,
+th {
+  padding: $spacing-5;
+  white-space: nowrap;
+}
+
+thead {
+  text-align: left;
+  font-weight: $font-weight-medium;
+  color: $color-gray-700;
+}
+
+tbody {
+  color: $l-base-gray-darkest;
+
+  tr:hover {
+    background-color: $color-gray-100;
+  }
+
+  tr.is-active {
+    background-color: $l-primary-lightest;
+  }
+}
+
+tr + tr {
+  border-top: 1px solid $l-base-gray-lightest;
+}

package/src/components/textarea/_index.scss

@@ -0,0 +1,36 @@
+$textarea-transition-fn: cubic-bezier(0, 0, 0.2, 1);
+
+.form-textarea {
+  display: block;
+  width: 100%;
+  background: $color-white;
+  border: 1px solid $color-gray-300;
+  border-radius: $border-radius-small;
+  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.12);
+  padding: $spacing-3 $spacing-5;
+  color: $color-gray-900;
+  font-family: inherit;
+  font-size: $font-size-default;
+  line-height: $line-height-default;
+  resize: vertical;
+  will-change: border-color, box-shadow;
+  transition: border-color 100ms $textarea-transition-fn,
+    box-shadow 100ms $textarea-transition-fn;
+
+  &:disabled,
+  &:read-only {
+    background: $color-gray-100;
+    color: $color-gray-700;
+    box-shadow: none;
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+  }
+
+  &:focus {
+    outline: 0;
+    border-color: $color-blue-200;
+    box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.12), 0 0 0 1px $color-blue-200;
+  }
+}

package/src/shared/variables/border-radius/border-radius.scss

@@ -0,0 +1,4 @@
+
+$border-radius-small: 2px;
+$border-radius-default: 4px;
+$border-radius-large: 8px;

package/src/shared/variables/breakpoints/breakpoints.common.js

@@ -0,0 +1,7 @@
+module.exports = {
+  breakpointSmall: "544px",
+  breakpointMedium: "768px",
+  breakpointLarge: "1004px",
+  breakpointSmallUp: "545px",
+  breakpointMediumUp: "769px",
+};

package/src/shared/variables/colors/colors.common.js

@@ -0,0 +1,83 @@
+module.exports = {
+  colorBlue000: "#f3f5fd",
+  colorBlue100: "#d6e4ff",
+  colorBlue200: "#79a6ff",
+  colorBlue300: "#3e7eff",
+  colorBlue400: "#2c50ff",
+  colorBlue500: "#003cc1",
+  colorBlue600: "#0b2e8f",
+  colorBlue700: "#111f66",
+  colorBlue800: "#171f46",
+  colorBlue900: "#070d29",
+  colorPurple000: "#f6f5fa",
+  colorPurple100: "#f2f0fa",
+  colorPurple200: "#d2c2ff",
+  colorPurple300: "#8b52ff",
+  colorPurple400: "#691fff",
+  colorPurple500: "#5203ea",
+  colorPurple600: "#3b03a8",
+  colorPurple700: "#370b8f",
+  colorPurple800: "#1c0068",
+  colorPurple900: "#20143d",
+  colorGreen000: "#f0faf5",
+  colorGreen100: "#dcfaf0",
+  colorGreen200: "#c2ffeb",
+  colorGreen300: "#93f5d6",
+  colorGreen400: "#27e4cd",
+  colorGreen500: "#08c0a6",
+  colorGreen600: "#1f9989",
+  colorGreen700: "#008670",
+  colorGreen800: "#0c665a",
+  colorGreen900: "#0b473f",
+  colorYellow000: "#faf8f0",
+  colorYellow100: "#fff3d6",
+  colorYellow200: "#ffe7ad",
+  colorYellow300: "#ffde0f",
+  colorYellow400: "#ffce5c",
+  colorYellow500: "#ffb50d",
+  colorYellow600: "#e29700",
+  colorYellow700: "#e07c09",
+  colorYellow800: "#cc6810",
+  colorYellow900: "#b85716",
+  colorRed000: "#fae6e6",
+  colorRed100: "#f5d7d7",
+  colorRed200: "#f5c4c4",
+  colorRed300: "#ff7070",
+  colorRed400: "#ff2945",
+  colorRed500: "#cc1830",
+  colorRed600: "#8f0101",
+  colorRed700: "#7a0505",
+  colorRed800: "#5c1212",
+  colorRed900: "#3d1111",
+  colorGray000: "#fafbfc",
+  colorGray100: "#f1f1f2",
+  colorGray200: "#e0e0e0",
+  colorGray300: "#cccccc",
+  colorGray400: "#adadad",
+  colorGray500: "#9b9b9b",
+  colorGray600: "#8f8f8f",
+  colorGray700: "#757575",
+  colorGray800: "#4a4a4a",
+  colorGray900: "#222222",
+  colorWhite: "#ffffff",
+  colorWhiteFade80: "rgba(255, 255, 255, 0.8)",
+  colorWhiteFade60: "rgba(255, 255, 255, 0.6)",
+  colorWhiteFade40: "rgba(255, 255, 255, 0.4)",
+  colorWhiteFade20: "rgba(255, 255, 255, 0.2)",
+  colorWhiteFade15: "rgba(255, 255, 255, 0.15)",
+  colorWhiteFade10: "rgba(255, 255, 255, 0.1)",
+  lBaseGrayLightest: "#e0e0e0",
+  lBaseGrayLighter: "#cccccc",
+  lBaseGray: "#757575",
+  lBaseGrayDarker: "#4a4a4a",
+  lBaseGrayDarkest: "#222222",
+  lPrimaryLightest: "#f3f5fd",
+  lPrimaryLighter: "#3e7eff",
+  lPrimary: "#2c50ff",
+  lPrimaryDarker: "#003cc1",
+  lPrimaryDarkest: "#0b2e8f",
+  lSecondary: "#ffffff",
+  lWarning: "#ffb50d",
+  lSuccess: "#08c0a6",
+  lError: "#cc1830",
+};

package/src/shared/variables/colors/colors.scss

@@ -0,0 +1,82 @@
+
+$color-blue-000: #f3f5fd;
+$color-blue-100: #d6e4ff;
+$color-blue-200: #79a6ff;
+$color-blue-300: #3e7eff;
+$color-blue-400: #2c50ff;
+$color-blue-500: #003cc1;
+$color-blue-600: #0b2e8f;
+$color-blue-700: #111f66;
+$color-blue-800: #171f46;
+$color-blue-900: #070d29;
+$color-purple-000: #f6f5fa;
+$color-purple-100: #f2f0fa;
+$color-purple-200: #d2c2ff;
+$color-purple-300: #8b52ff;
+$color-purple-400: #691fff;
+$color-purple-500: #5203ea;
+$color-purple-600: #3b03a8;
+$color-purple-700: #370b8f;
+$color-purple-800: #1c0068;
+$color-purple-900: #20143d;
+$color-green-000: #f0faf5;
+$color-green-100: #dcfaf0;
+$color-green-200: #c2ffeb;
+$color-green-300: #93f5d6;
+$color-green-400: #27e4cd;
+$color-green-500: #08c0a6;
+$color-green-600: #1f9989;
+$color-green-700: #008670;
+$color-green-800: #0c665a;
+$color-green-900: #0b473f;
+$color-yellow-000: #faf8f0;
+$color-yellow-100: #fff3d6;
+$color-yellow-200: #ffe7ad;
+$color-yellow-300: #ffde0f;
+$color-yellow-400: #ffce5c;
+$color-yellow-500: #ffb50d;
+$color-yellow-600: #e29700;
+$color-yellow-700: #e07c09;
+$color-yellow-800: #cc6810;
+$color-yellow-900: #b85716;
+$color-red-000: #fae6e6;
+$color-red-100: #f5d7d7;
+$color-red-200: #f5c4c4;
+$color-red-300: #ff7070;
+$color-red-400: #ff2945;
+$color-red-500: #cc1830;
+$color-red-600: #8f0101;
+$color-red-700: #7a0505;
+$color-red-800: #5c1212;
+$color-red-900: #3d1111;
+$color-gray-000: #fafbfc;
+$color-gray-100: #f1f1f2;
+$color-gray-200: #e0e0e0;
+$color-gray-300: #cccccc;
+$color-gray-400: #adadad;
+$color-gray-500: #9b9b9b;
+$color-gray-600: #8f8f8f;
+$color-gray-700: #757575;
+$color-gray-800: #4a4a4a;
+$color-gray-900: #222222;
+$color-white: #ffffff;
+$color-white-fade-80: rgba(255, 255, 255, 0.8);
+$color-white-fade-60: rgba(255, 255, 255, 0.6);
+$color-white-fade-40: rgba(255, 255, 255, 0.4);
+$color-white-fade-20: rgba(255, 255, 255, 0.2);
+$color-white-fade-15: rgba(255, 255, 255, 0.15);
+$color-white-fade-10: rgba(255, 255, 255, 0.1);
+$l-base-gray-lightest: #e0e0e0;
+$l-base-gray-lighter: #cccccc;
+$l-base-gray: #757575;
+$l-base-gray-darker: #4a4a4a;
+$l-base-gray-darkest: #222222;
+$l-primary-lightest: #f3f5fd;
+$l-primary-lighter: #3e7eff;
+$l-primary: #2c50ff;
+$l-primary-darker: #003cc1;
+$l-primary-darkest: #0b2e8f;
+$l-secondary: #ffffff;
+$l-warning: #ffb50d;
+$l-success: #08c0a6;
+$l-error: #cc1830;

package/src/shared/variables/shadows/shadows.common.js

@@ -0,0 +1,5 @@
+module.exports = {
+  boxShadowSmall: "0 2px 4px rgba(0, 0, 0, 0.2)",
+  boxShadowDefault: "0 4px 8px rgba(0, 0, 0, 0.2)",
+  boxShadowLarge: "0 8px 16px rgba(0, 0, 0, 0.2)",
+};

package/src/shared/variables/shadows/shadows.scss

@@ -0,0 +1,4 @@
+
+$box-shadow-small: 0 2px 4px rgba(0, 0, 0, 0.2);
+$box-shadow-default: 0 4px 8px rgba(0, 0, 0, 0.2);
+$box-shadow-large: 0 8px 16px rgba(0, 0, 0, 0.2);

package/src/shared/variables/spacing/spacing.scss

@@ -0,0 +1,11 @@
+
+$spacing-0: 0px;
+$spacing-1: 2px;
+$spacing-2: 4px;
+$spacing-3: 8px;
+$spacing-4: 12px;
+$spacing-5: 16px;
+$spacing-6: 24px;
+$spacing-7: 32px;
+$spacing-8: 40px;
+$spacing-9: 48px;

package/src/shared/variables/type/type.scss

@@ -0,0 +1,33 @@
+
+$font-family-body: 'Inter', -apple-system, BlinkMacSystemFont, 'San Francisco', Roboto, 'Segoe UI', 'Helvetica Neue', sans-serif, 'Prompt';
+$font-family-heading: 'Gilroy', -apple-system, BlinkMacSystemFont, 'San Francisco', Roboto, 'Segoe UI', 'Helvetica Neue', sans-serif, 'Prompt';
+$line-height-default: 1.5;
+$line-height-tight: 1.4;
+$line-height-condensed: 1.25;
+$line-height-most-condensed: 1.1;
+$font-weight-light: 300;
+$font-weight-normal: 400;
+$font-weight-medium: 500;
+$font-weight-semibold: 600;
+$font-weight-bold: 700;
+$font-size-default: 16px;
+$font-size-h1-desktop: 60px;
+$font-size-h1-tablet: 40px;
+$font-size-h1-mobile: 32px;
+$font-size-h2-desktop: 40px;
+$font-size-h2-tablet: 32px;
+$font-size-h2-mobile: 28px;
+$font-size-h3-desktop: 32px;
+$font-size-h3-tablet: 28px;
+$font-size-h3-mobile: 24px;
+$font-size-h4-desktop: 28px;
+$font-size-h4-tablet: 24px;
+$font-size-h4-mobile: 20px;
+$font-size-h5-desktop: 24px;
+$font-size-h5-tablet: 24px;
+$font-size-h5-mobile: 20px;
+$font-size-h6-desktop: 20px;
+$font-size-h6-tablet: 20px;
+$font-size-h6-mobile: 20px;
+$font-size-small: 14px;
+$font-size-caption: 12px;

package/src/utilities/background/_index.scss

@@ -0,0 +1,11 @@
+.bg-warning {
+  background-color: $l-warning;
+}
+
+.bg-success {
+  background-color: $l-success;
+}
+
+.bg-error {
+  background-color: $l-error;
+}

package/src/utilities/display/_mixins.scss

@@ -0,0 +1,17 @@
+$display-values: [none, inline, inline-block, block];
+
+@mixin generate-display-helpers($breakpoint: null, $breakpoint-name: null) {
+  @each $display in $display-values {
+    @if $breakpoint and $breakpoint-name {
+      .d-#{$display}-#{$breakpoint-name} {
+        @media (min-width: $breakpoint) {
+          display: $display;
+        }
+      }
+    } @else {
+      .d-#{$display} {
+        display: $display;
+      }
+    }
+  }
+}

package/src/utilities/images/_index.scss

@@ -0,0 +1,4 @@
+.img-fluid {
+  max-width: 100%;
+  height: auto;
+}

package/src/utilities/spacing/_mixins.scss

@@ -0,0 +1,26 @@
+$spacings-list: [$spacing-0, $spacing-1, $spacing-2, $spacing-3, $spacing-4,
+  $spacing-5, $spacing-6, $spacing-7, $spacing-8, $spacing-9];
+
+@mixin generate-spacing-helpers-for($property) {
+  // Take the first letter of the property as the class name
+  // E.g., "m" for margin; "p" for padding.
+  $class-prefix: str-slice($property, 0, 1);
+
+  @each $spacing in $spacings-list {
+    $index: index($spacings-list, $spacing) - 1;
+
+    .#{$class-prefix}-#{$index} {
+      #{$property}: $spacing;
+    }
+
+    .#{$class-prefix}h-#{$index} {
+      #{$property}-left: $spacing;
+      #{$property}-right: $spacing;
+    }
+
+    .#{$class-prefix}v-#{$index} {
+      #{$property}-top: $spacing;
+      #{$property}-bottom: $spacing;
+    }
+  }
+}

package/src/utilities/text-alignment/_index.scss

@@ -0,0 +1,107 @@
+// Mobile-first
+.text-left {
+  text-align: left;
+}
+
+.text-center {
+  text-align: center;
+}
+
+.text-right {
+  text-align: right;
+}
+
+// Small and up
+.text-left--small {
+  @media (min-width: $breakpoint-small) {
+    text-align: left;
+  }
+}
+
+.text-center--small {
+  @media (min-width: $breakpoint-small) {
+    text-align: center;
+  }
+}
+
+.text-right--small {
+  @media (min-width: $breakpoint-small) {
+    text-align: right;
+  }
+}
+
+// Small only
+.text-left--small-only {
+  @media (min-width: $breakpoint-small-up) and (max-width: $breakpoint-medium) {
+    text-align: left;
+  }
+}
+
+.text-center--small-only {
+  @media (min-width: $breakpoint-small-up) and (max-width: $breakpoint-medium) {
+    text-align: center;
+  }
+}
+
+.text-right--small-only {
+  @media (min-width: $breakpoint-small-up) and (max-width: $breakpoint-medium) {
+    text-align: right;
+  }
+}
+
+// Medium and up
+.text-left--medium {
+  @media (min-width: $breakpoint-medium) {
+    text-align: left;
+  }
+}
+
+.text-center--medium {
+  @media (min-width: $breakpoint-medium) {
+    text-align: center;
+  }
+}
+
+.text-right--medium {
+  @media (min-width: $breakpoint-medium) {
+    text-align: right;
+  }
+}
+
+// Medium only
+.text-left--medium-only {
+  @media (min-width: $breakpoint-medium-up) and (max-width: $breakpoint-large) {
+    text-align: left;
+  }
+}
+
+.text-center--medium-only {
+  @media (min-width: $breakpoint-medium-up) and (max-width: $breakpoint-large) {
+    text-align: center;
+  }
+}
+
+.text-right--medium-only {
+  @media (min-width: $breakpoint-medium-up) and (max-width: $breakpoint-large) {
+    text-align: right;
+  }
+}
+
+// Large and up
+.text-left--large {
+  @media (min-width: $breakpoint-large) {
+    text-align: left;
+  }
+}
+
+.text-center--large {
+  @media (min-width: $breakpoint-large) {
+    text-align: center;
+  }
+}
+
+.text-right--large {
+  @media (min-width: $breakpoint-large) {
+    text-align: right;
+  }
+}

package/src/utilities/text-color/_index.scss

@@ -0,0 +1,3 @@
+.t-white {
+  color: $color-white;
+}

package/src/utilities/text-weight/_index.scss

@@ -0,0 +1,7 @@
+.t-weight-normal {
+  font-weight: $font-weight-normal;
+}
+
+.t-weight-medium {
+  font-weight: $font-weight-medium;
+}