@nypl/design-system-react-components 0.25.2 → 0.25.6

package/src/styles/01-colors/_colors-brand.scss

@@ -1,62 +0,0 @@
-/** Brand Colors */
-
-// SASS Color Variables
-
-/* Brand fills are the NYPL primary and secondary colors */
-$brand-primary: #c60917;
-$brand-secondary: #760000;
-
-// What's On is used for Exhibitions & Events.
-$whats-on-primary: #242424;
-$whats-on-secondary: #000000;
-
-// Books and More is used for the Catalog, Staff Picks, Recommendations, New Arrivals, and E-Book Central.
-$books-and-more-primary: $brand-primary;
-$books-and-more-secondary: $brand-secondary;
-
-// Research is used for the Research Catalog and SCC.
-$research-primary: #00838a;
-$research-secondary: #006166;
-
-// Locations is used for Location Finder and all branch pages with the exceptions of some research libraries.
-$locations-primary: $brand-primary;
-$locations-secondary: $brand-secondary;
-
-// Blogs is used for Blog pages.
-$blogs-primary: #e0e0e0;
-$blogs-secondary: #bdbdbd;
-
-// Research libraries with specific brand colors to adhere to.
-$research-library-lpa: #005d53;
-$research-library-schomburg: #a03e31;
-$research-library-schwartzman: $brand-secondary;
-
-//Mapping where we associate a name string with each SASS var
-$colors_brand: (
-  primary: $brand-primary,
-  secondary: $brand-secondary,
-);
-
-$colors: (
-  brand-primary: $brand-primary,
-  brand-secondary: $brand-secondary,
-  whats-on-primary: $whats-on-primary,
-  whats-on-secondary: $whats-on-secondary,
-  books-and-more-primary: $books-and-more-primary,
-  books-and-more-secondary: $books-and-more-secondary,
-  research-primary: $research-primary,
-  research-secondary: $research-secondary,
-  locations-primary: $locations-primary,
-  locations-secondary: $locations-secondary,
-  blogs-primary: $blogs-primary,
-  blogs-secondary: $blogs-secondary,
-  research-library-lpa: $research-library-lpa,
-  research-library-schomburg: $research-library-schomburg,
-  research-library-schwartzman: $research-library-schwartzman,
-);
-
-/* CSS Variables/Custom Properties */
-:root {
-  @include css-vars($colors_brand, "brand");
-  @include css-vars($colors, "section");
-}

package/src/styles/01-colors/_colors-utility.scss

@@ -1,67 +0,0 @@
-/** Utility Colors */
-
-// SASS Color Variables
-
-$black: #000000;
-$white: #ffffff;
-
-// Grayscale
-$gray-xdark: #424242;
-$gray-dark: #616161;
-$gray-medium: #bdbdbd;
-$gray-light-cool: #e0e0e0;
-$gray-light-warm: #efedeb;
-$gray-x-light-cool: #f5f5f5;
-$gray-x-light-warm: #f8f8f7;
-$gray-xx-light-cool: #fafafa;
-
-// State and link utilities
-$disabled-primary: #e0e0e0;
-$disabled-secondary: #fafafa;
-$error-primary: #97272c;
-$error-secondary: #6f0106;
-$focus: #4181f1;
-$link-primary: #0576d3;
-$link-secondary: #004b98;
-$status-primary: #f9e08e;
-$status-secondary: #fbe7e1;
-$success-primary: #077719;
-$success-secondary: #095212;
-$test: #ff6347;
-$warning-primary: #f0974e;
-$warning-secondary: #ec7b1f;
-
-// Mapping where we associate a name string with each SASS var.
-// Quotes around "black" and "white" are required to force SASS to treat
-// these as string values and not CSS color values to convert to HEX format.
-$colors: (
-  "black": $black,
-  "white": $white,
-  gray-xdark: $gray-xdark,
-  gray-dark: $gray-dark,
-  gray-medium: $gray-medium,
-  gray-light-cool: $gray-light-cool,
-  gray-light-warm: $gray-light-warm,
-  gray-x-light-cool: $gray-x-light-cool,
-  gray-x-light-warm: $gray-x-light-warm,
-  gray-xx-light-cool: $gray-xx-light-cool,
-  disabled-primary: $disabled-primary,
-  disabled-secondary: $disabled-secondary,
-  error-primary: $error-primary,
-  error-secondary: $error-secondary,
-  focus: $focus,
-  link-primary: $link-primary,
-  link-secondary: $link-secondary,
-  status-primary: $status-primary,
-  status-secondary: $status-secondary,
-  success-primary: $success-primary,
-  success-secondary: $success-secondary,
-  test: $test,
-  warning-primary: $warning-primary,
-  warning-secondary: $warning-secondary,
-);
-
-/* CSS Variables/Custom Properties */
-:root {
-  @include css-vars($colors, "ui");
-}

package/src/styles/02-typography/_type-scale.css

@@ -1,11 +0,0 @@
-/** Type scale information to keep our font-sizes consistent across the system */
-:root {
-  --font-size--3: 0.625rem;
-  --font-size--2: 0.75rem;
-  --font-size--1: 0.875rem;
-  --font-size-0: 1rem;
-  --font-size-1: 1.125rem;
-  --font-size-2: 1.375rem;
-  --font-size-3: 1.75rem;
-  --font-size-4: 2.25rem;
-}

package/src/styles/02-typography/_type-weight.css

@@ -1,7 +0,0 @@
-/** Type weight information to keep font-weight values consistent across the system */
-:root {
-  --font-weight-light: 300;
-  --font-weight-regular: 400;
-  --font-weight-medium: 500;
-  --font-weight-bold: 700;
-}

package/src/styles/02-typography/_typefaces.css

@@ -1,4 +0,0 @@
-:root {
-  --typeface-body: -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
-  --typeface-heading: -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
-}

package/src/styles/03-space/_space-stack.scss

@@ -1,116 +0,0 @@
-/**
- * --space-xxs: calc(--space / 4);   //  4px
- * --space-xs: calc(--space / 2);    //  8px
- * --space-s: calc(--space * 1);     // 16px
- * --space-m: calc(--space * 1.5);   // 24px
- * --space-l: calc(--space * 2);     // 32px
- * --space-xl: calc(--space * 3);    // 48px
- * --space-xxl: calc(--space * 4);   // 64px
- * --space-xxxl: -calc(-space * 6);  // 96px
- */
-
-@mixin space-stack-none {
-  margin-bottom: 0;
-}
-
-@mixin space-stack-xxs {
-  margin-bottom: var(--space-xxs);
-}
-
-@mixin space-stack-xs {
-  margin-bottom: var(--space-xs);
-}
-
-@mixin space-stack-s {
-  margin-bottom: var(--space-s);
-}
-
-@mixin space-stack-m {
-  margin-bottom: var(--space-m);
-}
-
-@mixin space-stack-l {
-  margin-bottom: var(--space-l);
-}
-
-@mixin space-stack-xl {
-  margin-bottom: var(--space-xl);
-}
-
-@mixin space-stack-xxl {
-  margin-bottom: var(--space-xxl);
-}
-
-@mixin space-stack-xxxl {
-  margin-bottom: var(--space-xxxl);
-}
-
-@mixin space-stack-page {
-  @include space-stack-l;
-
-  @include breakpoint($breakpoint-large) {
-    @include space-stack-xl;
-  }
-
-  &--full {
-    @include space-stack-xxl;
-
-    @include breakpoint($breakpoint-large) {
-      @include space-stack-xxxl;
-    }
-  }
-}
-
-@mixin remove-stack-page {
-  margin-top: calc(-1 * #{$space-l});
-
-  @include breakpoint($breakpoint-large) {
-    margin-top: calc(-1 * #{$space-xl});
-  }
-
-  &--full {
-    margin-top: calc(-1 * #{$space-xxl});
-
-    @include breakpoint($breakpoint-large) {
-      margin-top: calc(-1 * #{$space-xxxl});
-    }
-  }
-}
-
-@mixin get-space-stack($id) {
-  @if $id == "none" {
-    @include space-stack-none;
-  }
-
-  @if $id == "xxs" {
-    @include space-stack-xxs;
-  }
-
-  @if $id == "xs" {
-    @include space-stack-xs;
-  }
-
-  @if $id == "s" {
-    @include space-stack-s;
-  }
-
-  @if $id == "m" {
-    @include space-stack-m;
-  }
-
-  @if $id == "l" {
-    @include space-stack-l;
-  }
-
-  @if $id == "xl" {
-    @include space-stack-xl;
-  }
-
-  @if $id == "xxl" {
-    @include space-stack-xxl;
-  }
-
-  @if $id == "xxxl" {
-    @include space-stack-xxxl;
-  }
-}

package/src/styles/03-space/_space.css

@@ -1,30 +0,0 @@
-:root {
-  /** Spacing */
-  --space: 1rem;
-
-  /** Spacing variants */
-
-  /** 4px */
-  --space-xxs: calc(var(--space) / 4);
-
-  /** 8px */
-  --space-xs: calc(var(--space) / 2);
-
-  /** 16px */
-  --space-s: calc(var(--space) * 1);
-
-  /** 24px */
-  --space-m: calc(var(--space) * 1.5);
-
-  /** 32px */
-  --space-l: calc(var(--space) * 2);
-
-  /** 48px */
-  --space-xl: calc(var(--space) * 3);
-
-  /** 64px */
-  --space-xxl: calc(var(--space) * 4);
-
-  /** 96px */
-  --space-xxxl: calc(var(--space) * 6);
-}

package/src/styles/base/_card-grid.scss

@@ -1,77 +0,0 @@
-@mixin cards--spacing {
-  // Select all immediate children except the last
-  > *:not(:last-child) {
-    @include space-stack-s;
-
-    @include breakpoint($breakpoint-large) {
-      @include space-stack-none;
-
-      // Now, also remove children that are a multiple of 3.
-      // Add margin between columns.
-      &:not(:nth-child(3n)) {
-        @include space-inline-l;
-      }
-
-      // Now, also remove the second and third-to-last items from selection.
-      // Then add margin between rows.
-      &:not(:nth-last-child(2)):not(:nth-last-child(3)) {
-        @include space-stack-l;
-      }
-    }
-  }
-
-  &--full {
-    @include breakpoint($breakpoint-large) {
-      > *:nth-child(3n) {
-        @include space-stack-xxl;
-      }
-
-      > *:not(:last-child):not(:nth-last-child(2)):not(:nth-last-child(3)) {
-        @include space-stack-xxl;
-      }
-
-      > *:nth-child(3n
-          + 2):not(:last-child):not(:nth-child(3n)):not(:nth-last-child(2)) {
-        @include space-stack-xxl;
-      }
-    }
-  }
-}
-
-.card-grid {
-  @include space-stack-page;
-
-  &__cards {
-    @include cards--spacing;
-
-    display: flex;
-    flex-flow: column nowrap;
-
-    @include breakpoint($breakpoint-large) {
-      flex-flow: row wrap;
-
-      > * {
-        flex: 0 0 30%;
-      }
-
-      > .featured-card {
-        flex: 1 0 31%;
-      }
-    }
-
-    &--bg-color {
-      @include wrapper($v-padding: var(--space-s), $h-padding: var(--space-s));
-
-      @include breakpoint($breakpoint-large) {
-        @include wrapper(
-          $v-padding: var(--space-xxl),
-          $h-padding: var(--space-xxl)
-        );
-      }
-
-      > *:last-child {
-        @include space-stack-none;
-      }
-    }
-  }
-}

package/src/styles/base/_typography.scss

@@ -1,11 +0,0 @@
-// Create a mixin for paragraph styles that can be implemented
-// in components with other classnames.
-@mixin paragraph($margin: 0 0 var(--space)) {
-  margin: #{$margin};
-}
-
-.nypl-ds {
-  p {
-    @include paragraph;
-  }
-}

package/src/theme/components/customCheckboxGroup.ts

@@ -1,12 +0,0 @@
-import { checkboxRadioGroupLayout } from "./global";
-
-const CustomCheckboxGroup = {
-  parts: ["legend", "required", "helper"],
-  baseStyle: {
-    ...checkboxRadioGroupLayout,
-  },
-  sizes: {},
-  defaultProps: {},
-};
-
-export default CustomCheckboxGroup;

package/src/theme/components/customRadioGroup.ts

@@ -1,12 +0,0 @@
-import { checkboxRadioGroupLayout } from "./global";
-
-const CustomRadioGroup = {
-  parts: ["legend", "required", "helper"],
-  baseStyle: {
-    ...checkboxRadioGroupLayout,
-  },
-  sizes: {},
-  defaultProps: {},
-};
-
-export default CustomRadioGroup;