@amsterdam/design-system-css 0.1.2 → 0.1.4

package/dist/spacing/spacing.css

@@ -1,249 +0,0 @@
-/*
-  The breakpoint is 820px / 16 = 51.25rems
-  https://developer.mozilla.org/en-US/docs/Web/CSS/@media#accessibility_concerns
-*/
-/*
-  utility classes for spacing
-  TODO: currently using :nth-child(n) for higher specificity, find better way to solve this
-*/
-.amsterdam-space-block-start-xs:nth-child(n) {
-  margin-block-start: 8px;
-}
-
-.amsterdam-space-block-end-xs:nth-child(n) {
-  margin-block-end: 8px;
-}
-
-.amsterdam-space-inline-start-xs:nth-child(n) {
-  margin-inline-start: 8px;
-}
-
-.amsterdam-space-inline-end-xs:nth-child(n) {
-  margin-inline-end: 8px;
-}
-
-.amsterdam-space-block-start-s:nth-child(n) {
-  margin-block-start: 16px;
-}
-
-.amsterdam-space-block-end-s:nth-child(n) {
-  margin-block-end: 16px;
-}
-
-.amsterdam-space-inline-start-s:nth-child(n) {
-  margin-inline-start: 16px;
-}
-
-.amsterdam-space-inline-end-s:nth-child(n) {
-  margin-inline-end: 16px;
-}
-
-.amsterdam-space-block-start-m:nth-child(n) {
-  margin-block-start: 24px;
-}
-
-.amsterdam-space-block-end-m:nth-child(n) {
-  margin-block-end: 24px;
-}
-
-.amsterdam-space-inline-start-m:nth-child(n) {
-  margin-inline-start: 24px;
-}
-
-.amsterdam-space-inline-end-m:nth-child(n) {
-  margin-inline-end: 24px;
-}
-
-.amsterdam-space-block-start-l:nth-child(n) {
-  margin-block-start: 40px;
-}
-
-.amsterdam-space-block-end-l:nth-child(n) {
-  margin-block-end: 40px;
-}
-
-.amsterdam-space-inline-start-l:nth-child(n) {
-  margin-inline-start: 40px;
-}
-
-.amsterdam-space-inline-end-l:nth-child(n) {
-  margin-inline-end: 40px;
-}
-
-.amsterdam-space-block-start-xl:nth-child(n) {
-  margin-block-start: 56px;
-}
-
-.amsterdam-space-block-end-xl:nth-child(n) {
-  margin-block-end: 56px;
-}
-
-.amsterdam-space-inline-start-xl:nth-child(n) {
-  margin-inline-start: 56px;
-}
-
-.amsterdam-space-inline-end-xl:nth-child(n) {
-  margin-inline-end: 56px;
-}
-
-.amsterdam-space-block-start-xxl:nth-child(n) {
-  margin-block-start: 72px;
-}
-
-.amsterdam-space-block-end-xxl:nth-child(n) {
-  margin-block-end: 72px;
-}
-
-.amsterdam-space-inline-start-xxl:nth-child(n) {
-  margin-inline-start: 72px;
-}
-
-.amsterdam-space-inline-end-xxl:nth-child(n) {
-  margin-inline-end: 72px;
-}
-
-@media (min-width: 51.25rem) {
-  .amsterdam-space-block-start-xs--large:nth-child(n) {
-    margin-block-start: 8px;
-  }
-}
-
-@media (min-width: 51.25rem) {
-  .amsterdam-space-block-end-xs--large:nth-child(n) {
-    margin-block-end: 8px;
-  }
-}
-
-@media (min-width: 51.25rem) {
-  .amsterdam-space-inline-start-xs--large:nth-child(n) {
-    margin-inline-start: 8px;
-  }
-}
-
-@media (min-width: 51.25rem) {
-  .amsterdam-space-inline-end-xs--large:nth-child(n) {
-    margin-inline-end: 8px;
-  }
-}
-
-@media (min-width: 51.25rem) {
-  .amsterdam-space-block-start-s--large:nth-child(n) {
-    margin-block-start: 16px;
-  }
-}
-
-@media (min-width: 51.25rem) {
-  .amsterdam-space-block-end-s--large:nth-child(n) {
-    margin-block-end: 16px;
-  }
-}
-
-@media (min-width: 51.25rem) {
-  .amsterdam-space-inline-start-s--large:nth-child(n) {
-    margin-inline-start: 16px;
-  }
-}
-
-@media (min-width: 51.25rem) {
-  .amsterdam-space-inline-end-s--large:nth-child(n) {
-    margin-inline-end: 16px;
-  }
-}
-
-@media (min-width: 51.25rem) {
-  .amsterdam-space-block-start-m--large:nth-child(n) {
-    margin-block-start: 24px;
-  }
-}
-
-@media (min-width: 51.25rem) {
-  .amsterdam-space-block-end-m--large:nth-child(n) {
-    margin-block-end: 24px;
-  }
-}
-
-@media (min-width: 51.25rem) {
-  .amsterdam-space-inline-start-m--large:nth-child(n) {
-    margin-inline-start: 24px;
-  }
-}
-
-@media (min-width: 51.25rem) {
-  .amsterdam-space-inline-end-m--large:nth-child(n) {
-    margin-inline-end: 24px;
-  }
-}
-
-@media (min-width: 51.25rem) {
-  .amsterdam-space-block-start-l--large:nth-child(n) {
-    margin-block-start: 40px;
-  }
-}
-
-@media (min-width: 51.25rem) {
-  .amsterdam-space-block-end-l--large:nth-child(n) {
-    margin-block-end: 40px;
-  }
-}
-
-@media (min-width: 51.25rem) {
-  .amsterdam-space-inline-start-l--large:nth-child(n) {
-    margin-inline-start: 40px;
-  }
-}
-
-@media (min-width: 51.25rem) {
-  .amsterdam-space-inline-end-l--large:nth-child(n) {
-    margin-inline-end: 40px;
-  }
-}
-
-@media (min-width: 51.25rem) {
-  .amsterdam-space-block-start-xl--large:nth-child(n) {
-    margin-block-start: 80px;
-  }
-}
-
-@media (min-width: 51.25rem) {
-  .amsterdam-space-block-end-xl--large:nth-child(n) {
-    margin-block-end: 80px;
-  }
-}
-
-@media (min-width: 51.25rem) {
-  .amsterdam-space-inline-start-xl--large:nth-child(n) {
-    margin-inline-start: 80px;
-  }
-}
-
-@media (min-width: 51.25rem) {
-  .amsterdam-space-inline-end-xl--large:nth-child(n) {
-    margin-inline-end: 80px;
-  }
-}
-
-@media (min-width: 51.25rem) {
-  .amsterdam-space-block-start-xxl--large:nth-child(n) {
-    margin-block-start: 120px;
-  }
-}
-
-@media (min-width: 51.25rem) {
-  .amsterdam-space-block-end-xxl--large:nth-child(n) {
-    margin-block-end: 120px;
-  }
-}
-
-@media (min-width: 51.25rem) {
-  .amsterdam-space-inline-start-xxl--large:nth-child(n) {
-    margin-inline-start: 120px;
-  }
-}
-
-@media (min-width: 51.25rem) {
-  .amsterdam-space-inline-end-xxl--large:nth-child(n) {
-    margin-inline-end: 120px;
-  }
-}
-
-/*# sourceMappingURL=spacing.css.map */

package/dist/spacing/spacing.css.map

@@ -1 +0,0 @@
-{"version":3,"sourceRoot":"","sources":["../../utils/breakpoint.scss","../../src/spacing/spacing.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA;ACmBA;AAAA;AAAA;AAAA;AAKE;EACE,oBAvBe;;;AAyBjB;EACE,kBA1Be;;;AA4BjB;EACE,qBA7Be;;;AA+BjB;EACE,mBAhCe;;;AAsBjB;EACE,oBAvBe;;;AAyBjB;EACE,kBA1Be;;;AA4BjB;EACE,qBA7Be;;;AA+BjB;EACE,mBAhCe;;;AAsBjB;EACE,oBAvBe;;;AAyBjB;EACE,kBA1Be;;;AA4BjB;EACE,qBA7Be;;;AA+BjB;EACE,mBAhCe;;;AAsBjB;EACE,oBAvBe;;;AAyBjB;EACE,kBA1Be;;;AA4BjB;EACE,qBA7Be;;;AA+BjB;EACE,mBAhCe;;;AAsBjB;EACE,oBAvBe;;;AAyBjB;EACE,kBA1Be;;;AA4BjB;EACE,qBA7Be;;;AA+BjB;EACE,mBAhCe;;;AAsBjB;EACE,oBAvBe;;;AAyBjB;EACE,kBA1Be;;;AA4BjB;EACE,qBA7Be;;;AA+BjB;EACE,mBAhCe;;;AAsCf;EADF;IAEI,oBA/BmB;;;;AAmCrB;EADF;IAEI,kBApCmB;;;;AAwCrB;EADF;IAEI,qBAzCmB;;;;AA6CrB;EADF;IAEI,mBA9CmB;;;;AA8BrB;EADF;IAEI,oBA/BmB;;;;AAmCrB;EADF;IAEI,kBApCmB;;;;AAwCrB;EADF;IAEI,qBAzCmB;;;;AA6CrB;EADF;IAEI,mBA9CmB;;;;AA8BrB;EADF;IAEI,oBA/BmB;;;;AAmCrB;EADF;IAEI,kBApCmB;;;;AAwCrB;EADF;IAEI,qBAzCmB;;;;AA6CrB;EADF;IAEI,mBA9CmB;;;;AA8BrB;EADF;IAEI,oBA/BmB;;;;AAmCrB;EADF;IAEI,kBApCmB;;;;AAwCrB;EADF;IAEI,qBAzCmB;;;;AA6CrB;EADF;IAEI,mBA9CmB;;;;AA8BrB;EADF;IAEI,oBA/BmB;;;;AAmCrB;EADF;IAEI,kBApCmB;;;;AAwCrB;EADF;IAEI,qBAzCmB;;;;AA6CrB;EADF;IAEI,mBA9CmB;;;;AA8BrB;EADF;IAEI,oBA/BmB;;;;AAmCrB;EADF;IAEI,kBApCmB;;;;AAwCrB;EADF;IAEI,qBAzCmB;;;;AA6CrB;EADF;IAEI,mBA9CmB","file":"spacing.css"}

package/src/document/document.scss

@@ -1,16 +0,0 @@
-@import "normalize.css";
-@import "../../utils/calculate-fluid-style";
-
-body {
-  font-family: "Amsterdam Sans", "Arial", sans-serif;
-  font-size: calculate-fluid-style(18, 24);
-  font-weight: 400;
-  line-height: 160%;
-}
-
-/* Use border-box sizing by default for all elements */
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-}

package/src/grid/grid.scss

@@ -1,83 +0,0 @@
-$amsterdam-columns-small: 4;
-$amsterdam-columns-large: 12;
-
-@import "../../utils/breakpoint";
-
-.amsterdam-grid {
-  column-gap: clamp(16px, 2vw, 24px);
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  /* stylelint-disable-next-line property-disallowed-list */
-  margin: 0 auto;
-  max-width: 1440px;
-  padding-inline: clamp(16px, 2vw, 32px);
-
-  @media (min-width: $amsterdam-breakpoint) {
-    grid-template-columns: repeat(12, 1fr);
-  }
-}
-
-@mixin col-span-x {
-  @for $i from 1 through $amsterdam-columns-small {
-    .amsterdam-col-span-#{$i} {
-      grid-column: span $i / span $i;
-    }
-  }
-}
-
-@mixin col-start-x {
-  @for $i from 1 through $amsterdam-columns-small {
-    .amsterdam-col-start-#{$i} {
-      grid-column-start: $i;
-    }
-  }
-}
-
-@mixin col-span-large-x {
-  @for $i from 1 through $amsterdam-columns-large {
-    .amsterdam-col-span-#{$i}--large {
-      @media (min-width: $amsterdam-breakpoint) {
-        grid-column: span $i / span $i;
-      }
-    }
-  }
-}
-
-@mixin col-start-large-x {
-  @for $i from 1 through $amsterdam-columns-large {
-    .amsterdam-col-start-#{$i}--large {
-      @media (min-width: $amsterdam-breakpoint) {
-        grid-column-start: $i;
-      }
-    }
-  }
-}
-
-@mixin subgrid-span-x {
-  @for $i from 1 through $amsterdam-columns-small {
-    .amsterdam-subgrid-span-#{$i} {
-      column-gap: clamp(16px, 2vw, 24px);
-      display: grid;
-      grid-template-columns: repeat($i, 1fr);
-    }
-  }
-}
-
-@mixin subgrid-span-large-x {
-  @for $i from 1 through $amsterdam-columns-large {
-    .amsterdam-subgrid-span-#{$i}--large {
-      column-gap: clamp(16px, 2vw, 24px);
-      display: grid;
-      @media (min-width: $amsterdam-breakpoint) {
-        grid-template-columns: repeat($i, 1fr);
-      }
-    }
-  }
-}
-
-@include col-span-x;
-@include col-start-x;
-@include col-span-large-x;
-@include col-start-large-x;
-@include subgrid-span-x;
-@include subgrid-span-large-x;

package/src/spacing/spacing.scss

@@ -1,60 +0,0 @@
-@import "../../utils/breakpoint";
-
-$amsterdam-spaces: (
-  "xs": 8px,
-  "s": 16px,
-  "m": 24px,
-  "l": 40px,
-  "xl": 56px,
-  "xxl": 72px,
-);
-$amsterdam-spaces-large: (
-  "xs": 8px,
-  "s": 16px,
-  "m": 24px,
-  "l": 40px,
-  "xl": 80px,
-  "xxl": 120px,
-);
-
-/*
-  utility classes for spacing
-  TODO: currently using :nth-child(n) for higher specificity, find better way to solve this
-*/
-@each $size, $value in $amsterdam-spaces {
-  .amsterdam-space-block-start-#{$size}:nth-child(n) {
-    margin-block-start: $value;
-  }
-  .amsterdam-space-block-end-#{$size}:nth-child(n) {
-    margin-block-end: $value;
-  }
-  .amsterdam-space-inline-start-#{$size}:nth-child(n) {
-    margin-inline-start: $value;
-  }
-  .amsterdam-space-inline-end-#{$size}:nth-child(n) {
-    margin-inline-end: $value;
-  }
-}
-
-@each $size, $value in $amsterdam-spaces-large {
-  .amsterdam-space-block-start-#{$size}--large:nth-child(n) {
-    @media (min-width: $amsterdam-breakpoint) {
-      margin-block-start: $value;
-    }
-  }
-  .amsterdam-space-block-end-#{$size}--large:nth-child(n) {
-    @media (min-width: $amsterdam-breakpoint) {
-      margin-block-end: $value;
-    }
-  }
-  .amsterdam-space-inline-start-#{$size}--large:nth-child(n) {
-    @media (min-width: $amsterdam-breakpoint) {
-      margin-inline-start: $value;
-    }
-  }
-  .amsterdam-space-inline-end-#{$size}--large:nth-child(n) {
-    @media (min-width: $amsterdam-breakpoint) {
-      margin-inline-end: $value;
-    }
-  }
-}