@fpkit/acss 0.4.4

package/src/sass/_properties.scss

@@ -0,0 +1,106 @@
+:root {
+  --weight: 600;
+  --fs: clamp(0.96rem, 1vw + 0.5rem, 1.6rem);
+  --p: 1rem;
+  --px: var(--p);
+  --py: var(--p);
+  --m: 0.75rem;
+  --mx: var(--m);
+  --my: var(--m);
+  --weight: 600;
+  --radius: 0.5rem;
+  --placeholder-color: gray;
+  --placeholder-style: italic;
+  --placeholder-fs: smaller;
+  --transition: all 0.25s linear;
+
+  // * responsive fonts sizes
+  --fs-0: clamp(.9rem, 4vw - 1rem, 1.12rem); // 16px default
+  --fs-1: clamp(0.65rem, 1.3vw + 0.25rem, 0.75rem); // 12px
+  --fs-2: clamp(0.7rem, 2vw - 0.5rem, 0.875rem); // 14px
+  --fs-3: clamp(0.85rem, 2vw - 0.25rem, 0.925rem); // 18px
+  --fs-4: clamp(0.9rem, 2vw - 0.25rem, 1.313rem); // 21px
+  --fs-5: clamp(0.94rem, 2vw - 0.25rem, 1.463rem); // 25px
+  --fs-6: clamp(1rem, 2vw + 0.75rem, 2rem); // 32px
+  --fs-7: clamp(1.1rem, 4vw - 0.25rem, 2.375rem); // 38px
+  --fs-8: clamp(1.2rem, 4vw + 0.25rem, 3rem); // 48px
+  --fs-9: clamp(1.2rem, 4vw + 0.5rem, 4rem); // 64px
+  --fs-10: clamp(1.2rem, 5vw + 0.5rem, 4.5rem); // 72px
+  --fs-11: clamp(1.2rem, 5vw + 0.75rem, 5.063rem); // 81px
+  --fs-12: clamp(1.5rem, 5vw + 0.9rem, 6.375rem); // 101px
+
+  --fs-xs: var(--fs-1);
+  --fs-sm: var(--fs-3);
+  --fs-base: var(--fs-0);
+  --fs-md: var(--fs-5);
+  --fs-lg: var(--fs-7);
+  --fs-xl: var(--fs-9);
+  --fs-xxl: var(--fs-11);
+  --fs-xxxl: var(--fs-12);
+
+  --display: var(--fs-12);
+
+  --display-md: var(--fs-11);
+  --display-sm: var(--fs-10);
+
+  // h1
+  --h1: var(--fs-11);
+  // h2
+  --h2: var(--fs-9);
+  // h3
+  --h3: var(--fs-8);
+  // h4
+  --h4: var(--fs-7);
+  //h5
+  --h5: var(--fs-6);
+  // h6
+  --h6: var(--fs-5);
+
+  --spc-0: 0;
+  --spc-1: 0.25rem;
+  --spc-2: 0.5rem;
+  --spc-3: 0.75rem;
+  --spc-4: 1rem;
+  --spc-5: 1.5;
+  --spc-6: 2rem;
+  --spc-7: 2.5rem;
+  --spc-8: 3rem;
+  --spc-9: 3.5rem;
+  --spc-10: 4rem;
+  --spc-11: 4.5rem;
+  --spc-12: 5rem;
+  --spc-13: 6rem;
+  --spc-14: 7rem;
+  --spc-15: 8rem;
+  --spc-16: 9rem;
+  --spc-17: 10rem;
+  --spc-18: 11rem;
+  --spc-19: 12rem;
+  --spc-20: 13rem;
+
+  // t-shirt sizes
+  --spc: var(--spc-4);
+  --spc-xs: var(--spc-1);
+  --spc-sm: var(--spc-3);
+  --spc-base: var(--spc-5);
+  --spc-md: var(--spc-7);
+  --spc-lg: var(--spc-9);
+  --spc-xl: var(--spc-11);
+  --spc-xxl: var(--spc-13);
+
+  // vw units
+  --vw-xs: 5vw;
+  --vw-sm: 10vw;
+  --vw-md: 20vw;
+  --vw-lg: 50vw;
+  --vw-xl: 80vw;
+  --vw-xxl: 95vw;
+
+  // vh units
+  --vh-xs: 5vh;
+  --vh-sm: 10vh;
+  --vh-md: 20vh;
+  --vh-lg: 50vh;
+  --vh-xl: 80vh;
+  --vh-xxl: 95vh;
+}

package/src/sass/_reset.scss

@@ -0,0 +1,183 @@
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+::selection {
+  /* Optional */
+  /* It can be really hard to read highlighted text with a text-shadow, it should be removed when selected */
+  text-shadow: none;
+
+  /* NOTE: Using this means the color and background-color are set to transparent for selected text... */
+  /* So you can customise your styles below */
+  color: #fff;
+  background-color: #00f;
+}
+
+/*
+  3. Allow percentage-based heights in the application
+*/
+html,
+body {
+  height: 100%;
+  font-size: 100%;
+}
+
+/* Set core root defaults */
+html:focus-within {
+  scroll-behavior: smooth;
+}
+
+/* Remove default margin */
+body,
+h1,
+h2,
+h3,
+h4,
+p,
+figure,
+blockquote,
+dl,
+dd {
+  margin: 0;
+}
+
+/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
+// ul,
+// ol {
+//   &[role='list'] {
+//     list-style: none;
+//     margin-block-end: 0;
+//     margin-block-start: 0;
+//     padding-inline-start: 0;
+//   }
+// }
+
+/* Set core body defaults */
+body {
+  min-height: 100vh;
+  text-rendering: optimizeSpeed;
+  line-height: 1.5;
+}
+
+/* A elements that don't have a class get default styles */
+a:not([class]) {
+  text-decoration-skip-ink: auto;
+}
+
+a,
+button {
+  cursor: pointer;
+}
+
+/* Make images easier to work with */
+img,
+picture,
+video,
+canvas {
+  display: block;
+  max-width: 100%;
+  aspect-ratio: auto;
+}
+
+img,
+video,
+iframe {
+  max-inline-size: 100%;
+  block-size: auto;
+}
+
+img {
+  max-width: 100%;
+  height: auto;
+  vertical-align: middle;
+  font-style: italic;
+  background-repeat: no-repeat;
+  background-size: cover;
+  shape-margin: 0.75rem;
+}
+
+svg {
+  display: inline-block;
+}
+
+/* Inherit fonts for inputs and buttons */
+input,
+textarea,
+select {
+  font-family: inherit;
+  font-size: inherit;
+  font-style: inherit;
+  font-weight: inherit;
+  font-variant: inherit;
+  line-height: inherit;
+  background-color: inherit;
+}
+
+/* Inherit fonts for inputs and buttons */
+:where(button) {
+  font-family: inherit;
+}
+
+/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
+@media (prefers-reduced-motion: reduce) {
+  html:focus-within {
+    scroll-behavior: auto;
+  }
+
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+
+/* Create a root stacking context */
+#root,
+#__next {
+  isolation: isolate;
+}
+
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  overflow-wrap: break-word;
+}
+
+*:focus {
+  outline: none;
+  outline-style: auto;
+}
+
+b {
+  font-weight: normal;
+}
+
+/* Removes spacing between cells in tables */
+table {
+  border-collapse: collapse;
+}
+
+svg {
+  max-width: inline-size;
+
+  /* Optional - make the SVG's fill be the same as the inherited color */
+  // fill: currentColor;
+
+  /* Prevent the SVG from altering cursor interaction */
+  pointer-events: none;
+
+  &[role='img'] {
+    display: inline-flex;
+    align-items: center;
+    width: auto;
+  }
+}

package/src/sass/_type.scss

@@ -0,0 +1,43 @@
+@mixin props {
+  // * responsive fonts sizes
+  --fs: 100%;
+  --fs-0: clamp(.9rem, 4vw - 1rem, 1.12rem); // 16px default
+  --fs-1: clamp(0.65rem, 1.3vw + 0.25rem, 0.75rem); // 12px
+  --fs-2: clamp(0.7rem, 2vw - 0.5rem, 0.875rem); // 14px
+  --fs-3: clamp(0.85rem, 2vw - 0.25rem, 0.925rem); // 18px
+  --fs-4: clamp(0.95rem, 2vw - 0.25rem, 1.313rem); // 21px
+  --fs-5: clamp(1.1rem, 2vw - 0.25rem, 1.463rem); // 25px
+  --fs-6: clamp(1.3rem, 2vw + 0.75rem, 2rem); // 32px
+  --fs-7: clamp(1.4rem, 4vw - 0.25rem, 2.375rem); // 38px
+  --fs-8: clamp(1.48rem, 4vw + 0.25rem, 3rem); // 48px
+  --fs-9: clamp(1.9rem, 4vw + 0.5rem, 4rem); // 64px
+  --fs-10: clamp(2.5rem, 5vw + 0.5rem, 4.5rem); // 72px
+  --fs-11: clamp(3rem, 5vw + 0.75rem, 5.063rem); // 81px
+  --fs-12: clamp(3.5rem, 5vw + 0.9rem, 6.375rem); // 101px
+
+  --fs-xs: var(--fs-1);
+  --fs-sm: var(--fs-3);
+  --fs-base: var(--fs-0);
+  --fs-md: var(--fs-5);
+  --fs-lg: var(--fs-7);
+  --fs-xl: var(--fs-9);
+  --fs-xxl: var(--fs-11);
+  --fs-xxxl: var(--fs-12);
+
+  --display: var(--fs-12);
+  --display-md: var(--fs-11);
+  --display-sm: var(--fs-10);
+
+  // h1
+  --h1: var(--fs-10);
+  // h2
+  --h2: var(--fs-9);
+  // h3
+  --h3: var(--fs-8);
+  // h4
+  --h4: var(--fs-7);
+  //h5
+  --h5: var(--fs-6);
+  // h6
+  --h6: var(--fs-5);
+}

package/src/setupTest.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom'

package/src/styles/badge/badge.css

@@ -0,0 +1,22 @@
+sup:has(> span) {
+  --badge-bg: lightgray;
+  --badge-color: currentColor;
+  --badge-radius: 0.15rem;
+  --badge-padding: 0.15rem;
+  --badge-v-align: 0.5rem;
+  --badge-fs: clamp(0.4rem, 0.5rem + 0.5vw, 7rem);
+  background-color: var(--badge-bg);
+  color: var(--badge-color);
+  padding: var(--badge-padding);
+  border-radius: var(--badge-radius);
+  vertical-align: var(--badge-v-align);
+}
+sup:has(> span) span {
+  color: inherit;
+}
+sup:has(> span)[data-badge~=rounded] {
+  --badge-radius: 100%;
+  --badge-padding: 0.2rem;
+}
+
+/*# sourceMappingURL=badge.css.map */

package/src/styles/badge/badge.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../components/badge/badge.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;;AAEF;EACE;EACA","file":"badge.css"}

package/src/styles/breadcrumbs/breadcrumb.css

@@ -0,0 +1,42 @@
+nav:not(body > nav),
+nav[data-breadcrumb] {
+  --breadcrumb-px: unset;
+  --breadcrumb-dsp: flex;
+  --breadcrumb-gap: 0.5rem;
+  --breadcrumb-color: currentColor;
+  --breadcrumb-current-color: rgb(46, 46, 46);
+  --breadcrumb-fs: var(--fs-0);
+  margin-inline: unset;
+  padding-inline: unset;
+}
+nav:not(body > nav) ol,
+nav[data-breadcrumb] ol {
+  padding-inline: var(--breadcrumb-px);
+  display: var(--breadcrumb-dsp);
+  gap: var(--breadcrumb-gap);
+}
+nav:not(body > nav) ol li,
+nav[data-breadcrumb] ol li {
+  padding-inline: unset;
+  width: var(--breadcrumb-w, fit-content);
+  text-transform: capitalize;
+  display: flex;
+  color: var(--breadcrumb-color);
+  gap: 0.5rem;
+  font-size: var(--breadcrumb-fs);
+}
+nav:not(body > nav) ol li span[aria-hidden=true],
+nav[data-breadcrumb] ol li span[aria-hidden=true] {
+  opacity: 0.6;
+}
+nav:not(body > nav) ol li a[href],
+nav[data-breadcrumb] ol li a[href] {
+  font-size: var(--breadcrumb-fs);
+}
+nav:not(body > nav) ol li a[href][aria-current],
+nav[data-breadcrumb] ol li a[href][aria-current] {
+  color: var(--breadcrumb-current-color);
+  text-decoration: none;
+}
+
+/*# sourceMappingURL=breadcrumb.css.map */

package/src/styles/breadcrumbs/breadcrumb.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../components/breadcrumbs/breadcrumb.scss"],"names":[],"mappings":"AAAA;AAAA;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;AAAA;EACE;EACA;EACA;;AACA;AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;AAAA;EACE;;AAEF;AAAA;EACE;;AACA;AAAA;EACE;EACA","file":"breadcrumb.css"}

package/src/styles/buttons/button.css

@@ -0,0 +1,93 @@
+button {
+  --btn-sm: calc(12rem / 16);
+  --btn-md: calc(16rem / 16);
+  --btn-lg: calc(21rem / 16);
+  --btn-pill: 100rem;
+  --btn-height: calc(40rem / 16);
+  --fs: 0.95rem;
+  --btn-fs: calc(15rem / 16);
+  --btn-bg: lightgray;
+  --btn-width: max-content;
+  font-size: var(--btn-fs);
+  font-weight: var(--btn-fw, 500);
+  height: var(--btn-height, 2.5rem);
+  min-height: var(--btn-height);
+  place-items: var(--btn-place, center);
+  padding-inline: var(--btn-px, calc(var(--btn-fs) + 1.1%));
+  padding-block: var(--btn-py, calc(var(--btn-fs) + 0.75%));
+  border: var(--btn-bdr, none);
+  border-radius: var(--btn-rds, 0.375rem);
+  text-decoration: var(--btn-deco, none);
+  color: var(--btn-cl, currentColor);
+  display: var(--btn-dsp, inline-flex);
+  gap: var(--btn-gap, 0.2rem);
+  white-space: var(--btn-wspc, inherit);
+  margin: var(--btn-spc, 0);
+  transition: var(--tran-all);
+  background-color: var(--btn-bg, var(--btn));
+  outline: none;
+  width: var(--btn-width);
+}
+button[type] {
+  background-color: var(--btn-bg, var(--neutral-300));
+  --btn-bdr: solid var(--btn-sg);
+}
+button[type=submit], button[style*=submit] {
+  --btn-bg: var(--primary-500, royal-blue);
+  --btn-color: white;
+}
+button[disabled], button[aria-disabled=true] {
+  cursor: var(--btn-cursor, not-allowed);
+}
+button[disabled]:is(:hover, :focus), button[aria-disabled=true]:is(:hover, :focus) {
+  transform: none;
+}
+button:is(:hover, :focus) {
+  background-color: var(--btn-bg, var(--btn, lightgray));
+  filter: invert(1) hue-rotate 180deg;
+  transform: scale(0.95) var(--line-style, solid);
+  outline-offset: var(--line-offset, 5px);
+}
+button:is(:hover, :focus)[aria-disabled=true] {
+  transform: none;
+  opacity: var(--btn-opacity, 0.5);
+}
+button[type=reset] {
+  --btn-bg: transparent;
+  --btn-color: gray;
+  --btn-bdr: gray thin solid;
+}
+button[type=submit] {
+  --btn-bg: var(--primary-700, blue);
+  --btn-cl: #fff;
+  --btn-color: rgb(231, 231, 231);
+  --btn-border: none;
+}
+button[data-fp-btn~=pill], button[data-btn~=pill], button[data-style~=pill] {
+  border-radius: var(--btn-pill, 100rem);
+}
+button[data-btn~=sm] {
+  --btn-fs: var(--btn-sm);
+}
+button[data-btn~=md] {
+  --btn-fs: var(--btn-md);
+}
+button[data-btn~=lg] {
+  --btn-fs: var(--btn-lg);
+}
+button[data-btn~=text] {
+  --btn-bg: transparent;
+  --btn-cl: currentColor;
+  --btn-bdr: none;
+  --btn-height: unset;
+  --btn-width: unset;
+  --btn-py: 0.75rem;
+  --btn-px: 0.75rem;
+}
+button[data-btn~=text]:is(:hover, :focus) {
+  background-color: transparent;
+  outline: 0.07rem solid var(--btn-cl);
+  outline-offset: 0;
+}
+
+/*# sourceMappingURL=button.css.map */

package/src/styles/buttons/button.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../components/buttons/button.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EAEE;EACA;;AAGF;EAEE;;AAGA;EACE;;AAOJ;EAEE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAIJ;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EAGE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA","file":"button.css"}

package/src/styles/cards/card-style.css

@@ -0,0 +1,3 @@
+
+
+/*# sourceMappingURL=card-style.css.map */

package/src/styles/cards/card-style.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":[],"names":[],"mappings":"","file":"card-style.css"}

package/src/styles/cards/card.css

@@ -0,0 +1,48 @@
+[data-card],
+[data-component~=card] {
+  --card-p: 2rem;
+  --card-bg: #fff;
+  --card-radius: calc(var(--card-p) / 3);
+  --card-shadow: 0 0 1rem rgba(0, 0, 0, 0.1);
+  --card-position: relative;
+  --card-display: flex;
+  --card-direction: column;
+  --card-gap: 1rem;
+  position: relative;
+  display: var(--card-display);
+  display: var(--card-display);
+  flex-direction: var(--card-direction);
+  gap: var(--card-gap);
+  box-shadow: var(--card-shadow);
+  border-radius: var(--card-radius);
+  background-color: var(--card-bg);
+}
+[data-card] [data-card-content],
+[data-card] h3,
+[data-card] h2,
+[data-component~=card] [data-card-content],
+[data-component~=card] h3,
+[data-component~=card] h2 {
+  margin-block-end: 0;
+}
+[data-card] > div,
+[data-component~=card] > div {
+  height: 100%;
+  display: var(--card-display);
+  flex-direction: var(--card-direction);
+  gap: var(--card-gap);
+}
+[data-card] > div article,
+[data-component~=card] > div article {
+  flex: 2;
+}
+[data-card] + div,
+[data-component~=card] + div {
+  margin-block-start: 0;
+}
+
+[data-card] > * {
+  padding: var(--card-p);
+}
+
+/*# sourceMappingURL=card.css.map */

package/src/styles/cards/card.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../components/cards/card.scss"],"names":[],"mappings":"AAAA;AAAA;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;EAGE;;AAEF;AAAA;EACE;EACA;EACA;EACA;;AACA;AAAA;EACE;;AAIJ;AAAA;EACE;;;AAIJ;EACE","file":"card.css"}

package/src/styles/details/details.css

@@ -0,0 +1,69 @@
+details {
+  --details-w: 100%;
+  --details-h: fit-content;
+  --details-border: 1px solid #dfdfdf;
+  --details-display: flex;
+  --details-justify: flex-start;
+  --details-direction: columns;
+  --details-gap: 5rem;
+  --details-px: 1.5rem;
+  --details-py: 1.5rem;
+  --details-radius: 0.5rem;
+  --summary-cursor: pointer;
+  --summary-transitions: all 0.75s linear;
+  --summary-display: flex;
+  --summary-justify: flex-start;
+  --summary-align: center;
+  --summary-gap: 0.5rem;
+  --max-h-closed: 6.25rem;
+  --max-h-open: 50rem;
+  display: var(--details-display);
+  flex-direction: var(--details-direction);
+  justify-content: var(--details-justify);
+  gap: var(--details-gap);
+  width: var(--details-w);
+  border: var(--details-border);
+  transition: var(--summary-transitions);
+  max-height: var(--max-h-closed);
+  overflow: clip;
+  border-radius: var(--details-radius);
+}
+details::marker {
+  content: none;
+}
+details summary {
+  display: var(--summary-display);
+  justify-content: var(--summary-justify);
+  align-items: var(--summary-align);
+  padding-inline: var(--summary-px, var(--details-px));
+  padding-block: var(--summary-py, var(--details-py));
+  gap: var(--summary-gap);
+  list-style: none;
+  /* This ensures no bullet points are shown */
+}
+details summary::-webkit-details-marker {
+  display: none;
+}
+details summary:hover {
+  cursor: var(--summary-cursor);
+}
+details summary > section {
+  width: var(--details-w);
+}
+details > section {
+  padding-inline: var(--details-px);
+  padding-block: var(--details-py);
+  border: 1px transparent solid;
+}
+details[open] {
+  max-height: var(--max-h-open);
+  transition: var(--summary-transitions);
+}
+details[open] > summary {
+  border-bottom: var(--details-border);
+}
+details[open] > section {
+  max-height: var(--max-h-open);
+}
+
+/*# sourceMappingURL=details.css.map */

package/src/styles/details/details.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../components/details/details.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;AAMA;;AAJA;EACE;;AAKF;EACE;;AAEF;EACE;;AAIJ;EACE;EACA;EACA;;AAGF;EACE;EACA;;AACA;EACE;;AAEF;EACE","file":"details.css"}

package/src/styles/dropdowns/dropdown.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../components/dropdowns/dropdown.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE","file":"dropdown.css"}