fluxgrid-css 1.0.0

package/src/css/animation.css

@@ -0,0 +1,392 @@
+@keyframes c-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes c-ping {
+  75%,
+  100% {
+    transform: scale(2);
+    opacity: 0;
+  }
+}
+
+@keyframes c-pulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+
+@keyframes c-bounce {
+  0%,
+  100% {
+    transform: translateY(-25%);
+    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
+  }
+  50% {
+    transform: translateY(0);
+    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
+  }
+}
+
+@keyframes c-shake {
+  0%,
+  100% {
+    transform: translateX(0);
+  }
+  10%,
+  30%,
+  50%,
+  70%,
+  90% {
+    transform: translateX(-4px);
+  }
+  20%,
+  40%,
+  60%,
+  80% {
+    transform: translateX(4px);
+  }
+}
+
+@keyframes c-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes c-fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes c-slide-in-up {
+  from {
+    transform: translateY(20px);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+@keyframes c-slide-in-down {
+  from {
+    transform: translateY(-20px);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+@keyframes c-slide-in-left {
+  from {
+    transform: translateX(-20px);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+@keyframes c-slide-in-right {
+  from {
+    transform: translateX(20px);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+@keyframes c-scale-in {
+  from {
+    transform: scale(0.9);
+    opacity: 0;
+  }
+  to {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+@keyframes c-scale-out {
+  from {
+    transform: scale(1);
+    opacity: 1;
+  }
+  to {
+    transform: scale(0.9);
+    opacity: 0;
+  }
+}
+
+@keyframes c-flip-x {
+  from {
+    transform: rotateX(0deg);
+  }
+  to {
+    transform: rotateX(360deg);
+  }
+}
+
+@keyframes c-flip-y {
+  from {
+    transform: rotateY(0deg);
+  }
+  to {
+    transform: rotateY(360deg);
+  }
+}
+
+@keyframes c-wiggle {
+  0%,
+  100% {
+    transform: rotate(-3deg);
+  }
+  50% {
+    transform: rotate(3deg);
+  }
+}
+
+@keyframes c-heartbeat {
+  0% {
+    transform: scale(1);
+  }
+  14% {
+    transform: scale(1.1);
+  }
+  28% {
+    transform: scale(1);
+  }
+  42% {
+    transform: scale(1.1);
+  }
+  70% {
+    transform: scale(1);
+  }
+}
+
+@keyframes c-float {
+  0%,
+  100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-8px);
+  }
+}
+
+@keyframes c-skeleton {
+  0% {
+    background-position: -200% 0;
+  }
+  100% {
+    background-position: 200% 0;
+  }
+}
+
+@keyframes c-blink {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0;
+  }
+}
+
+@keyframes c-draw {
+  from {
+    stroke-dashoffset: 1000;
+  }
+  to {
+    stroke-dashoffset: 0;
+  }
+}
+
+.c-animate-spin {
+  animation: c-spin 1s linear infinite;
+}
+.c-animate-ping {
+  animation: c-ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
+}
+.c-animate-pulse {
+  animation: c-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+.c-animate-bounce {
+  animation: c-bounce 1s infinite;
+}
+.c-animate-shake {
+  animation: c-shake 0.5s ease-in-out;
+}
+.c-animate-fade-in {
+  animation: c-fade-in 300ms ease-out forwards;
+}
+.c-animate-fade-out {
+  animation: c-fade-out 300ms ease-in forwards;
+}
+.c-animate-slide-up {
+  animation: c-slide-in-up 300ms ease-out forwards;
+}
+.c-animate-slide-down {
+  animation: c-slide-in-down 300ms ease-out forwards;
+}
+.c-animate-slide-left {
+  animation: c-slide-in-left 300ms ease-out forwards;
+}
+.c-animate-slide-right {
+  animation: c-slide-in-right 300ms ease-out forwards;
+}
+.c-animate-scale-in {
+  animation: c-scale-in 200ms ease-out forwards;
+}
+.c-animate-scale-out {
+  animation: c-scale-out 200ms ease-in forwards;
+}
+.c-animate-wiggle {
+  animation: c-wiggle 1s ease-in-out infinite;
+}
+.c-animate-heartbeat {
+  animation: c-heartbeat 1.5s ease-in-out infinite;
+}
+.c-animate-float {
+  animation: c-float 3s ease-in-out infinite;
+}
+.c-animate-blink {
+  animation: c-blink 1s step-end infinite;
+}
+.c-animate-none {
+  animation: none;
+}
+
+.c-animate-skeleton {
+  background: linear-gradient(
+    90deg,
+    var(--c-gray-100) 25%,
+    var(--c-gray-200) 50%,
+    var(--c-gray-100) 75%
+  );
+  background-size: 200% 100%;
+  animation: c-skeleton 1.5s infinite;
+}
+
+.c-animate-delay-75 {
+  animation-delay: 75ms;
+}
+.c-animate-delay-100 {
+  animation-delay: 100ms;
+}
+.c-animate-delay-150 {
+  animation-delay: 150ms;
+}
+.c-animate-delay-200 {
+  animation-delay: 200ms;
+}
+.c-animate-delay-300 {
+  animation-delay: 300ms;
+}
+.c-animate-delay-500 {
+  animation-delay: 500ms;
+}
+.c-animate-delay-700 {
+  animation-delay: 700ms;
+}
+.c-animate-delay-1000 {
+  animation-delay: 1000ms;
+}
+
+.c-animate-duration-75 {
+  animation-duration: 75ms;
+}
+.c-animate-duration-100 {
+  animation-duration: 100ms;
+}
+.c-animate-duration-150 {
+  animation-duration: 150ms;
+}
+.c-animate-duration-200 {
+  animation-duration: 200ms;
+}
+.c-animate-duration-300 {
+  animation-duration: 300ms;
+}
+.c-animate-duration-500 {
+  animation-duration: 500ms;
+}
+.c-animate-duration-700 {
+  animation-duration: 700ms;
+}
+.c-animate-duration-1000 {
+  animation-duration: 1000ms;
+}
+.c-animate-duration-2000 {
+  animation-duration: 2000ms;
+}
+
+.c-animate-once {
+  animation-iteration-count: 1;
+}
+.c-animate-infinite {
+  animation-iteration-count: infinite;
+}
+.c-animate-repeat-2 {
+  animation-iteration-count: 2;
+}
+.c-animate-repeat-3 {
+  animation-iteration-count: 3;
+}
+
+.c-animate-fill-none {
+  animation-fill-mode: none;
+}
+.c-animate-fill-forwards {
+  animation-fill-mode: forwards;
+}
+.c-animate-fill-backwards {
+  animation-fill-mode: backwards;
+}
+.c-animate-fill-both {
+  animation-fill-mode: both;
+}
+
+.c-animate-running {
+  animation-play-state: running;
+}
+.c-animate-paused {
+  animation-play-state: paused;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .c-animate-spin,
+  .c-animate-ping,
+  .c-animate-pulse,
+  .c-animate-bounce,
+  .c-animate-shake,
+  .c-animate-wiggle,
+  .c-animate-heartbeat,
+  .c-animate-float,
+  .c-animate-skeleton {
+    animation: none;
+  }
+}

package/src/css/colors.css

@@ -0,0 +1,329 @@
+.c-text-white {
+  color: var(--c-white);
+}
+.c-text-black {
+  color: var(--c-black);
+}
+.c-text-current {
+  color: currentColor;
+}
+.c-text-transparent {
+  color: transparent;
+}
+
+.c-text-fg {
+  color: var(--c-fg);
+}
+.c-text-muted {
+  color: var(--c-muted);
+}
+.c-text-accent {
+  color: var(--c-accent);
+}
+
+.c-text-gray-50 {
+  color: var(--c-gray-50);
+}
+.c-text-gray-100 {
+  color: var(--c-gray-100);
+}
+.c-text-gray-200 {
+  color: var(--c-gray-200);
+}
+.c-text-gray-300 {
+  color: var(--c-gray-300);
+}
+.c-text-gray-400 {
+  color: var(--c-gray-400);
+}
+.c-text-gray-500 {
+  color: var(--c-gray-500);
+}
+.c-text-gray-600 {
+  color: var(--c-gray-600);
+}
+.c-text-gray-700 {
+  color: var(--c-gray-700);
+}
+.c-text-gray-800 {
+  color: var(--c-gray-800);
+}
+.c-text-gray-900 {
+  color: var(--c-gray-900);
+}
+
+.c-text-primary-400 {
+  color: var(--c-primary-400);
+}
+.c-text-primary-500 {
+  color: var(--c-primary-500);
+}
+.c-text-primary-600 {
+  color: var(--c-primary-600);
+}
+.c-text-primary-700 {
+  color: var(--c-primary-700);
+}
+
+.c-text-success-500 {
+  color: var(--c-success-500);
+}
+.c-text-success-600 {
+  color: var(--c-success-600);
+}
+.c-text-warning-500 {
+  color: var(--c-warning-500);
+}
+.c-text-warning-600 {
+  color: var(--c-warning-600);
+}
+.c-text-error-500 {
+  color: var(--c-error-500);
+}
+.c-text-error-600 {
+  color: var(--c-error-600);
+}
+.c-text-info-500 {
+  color: var(--c-info-500);
+}
+.c-text-info-600 {
+  color: var(--c-info-600);
+}
+
+.c-bg-white {
+  background-color: var(--c-white);
+}
+.c-bg-black {
+  background-color: var(--c-black);
+}
+.c-bg-transparent {
+  background-color: transparent;
+}
+.c-bg-current {
+  background-color: currentColor;
+}
+.c-bg-base {
+  background-color: var(--c-bg);
+}
+
+.c-bg-gray-50 {
+  background-color: var(--c-gray-50);
+}
+.c-bg-gray-100 {
+  background-color: var(--c-gray-100);
+}
+.c-bg-gray-200 {
+  background-color: var(--c-gray-200);
+}
+.c-bg-gray-300 {
+  background-color: var(--c-gray-300);
+}
+.c-bg-gray-400 {
+  background-color: var(--c-gray-400);
+}
+.c-bg-gray-500 {
+  background-color: var(--c-gray-500);
+}
+.c-bg-gray-600 {
+  background-color: var(--c-gray-600);
+}
+.c-bg-gray-700 {
+  background-color: var(--c-gray-700);
+}
+.c-bg-gray-800 {
+  background-color: var(--c-gray-800);
+}
+.c-bg-gray-900 {
+  background-color: var(--c-gray-900);
+}
+.c-bg-gray-950 {
+  background-color: var(--c-gray-950);
+}
+
+.c-bg-primary-50 {
+  background-color: var(--c-primary-50);
+}
+.c-bg-primary-100 {
+  background-color: var(--c-primary-100);
+}
+.c-bg-primary-400 {
+  background-color: var(--c-primary-400);
+}
+.c-bg-primary-500 {
+  background-color: var(--c-primary-500);
+}
+.c-bg-primary-600 {
+  background-color: var(--c-primary-600);
+}
+.c-bg-primary-700 {
+  background-color: var(--c-primary-700);
+}
+
+.c-bg-success-50 {
+  background-color: var(--c-success-50);
+}
+.c-bg-success-100 {
+  background-color: var(--c-success-100);
+}
+.c-bg-success-500 {
+  background-color: var(--c-success-500);
+}
+.c-bg-success-600 {
+  background-color: var(--c-success-600);
+}
+
+.c-bg-warning-50 {
+  background-color: var(--c-warning-50);
+}
+.c-bg-warning-100 {
+  background-color: var(--c-warning-100);
+}
+.c-bg-warning-500 {
+  background-color: var(--c-warning-500);
+}
+
+.c-bg-error-50 {
+  background-color: var(--c-error-50);
+}
+.c-bg-error-100 {
+  background-color: var(--c-error-100);
+}
+.c-bg-error-500 {
+  background-color: var(--c-error-500);
+}
+
+.c-bg-info-50 {
+  background-color: var(--c-info-50);
+}
+.c-bg-info-100 {
+  background-color: var(--c-info-100);
+}
+.c-bg-info-500 {
+  background-color: var(--c-info-500);
+}
+
+.c-bg-none {
+  background: none;
+}
+.c-bg-cover {
+  background-size: cover;
+}
+.c-bg-contain {
+  background-size: contain;
+}
+.c-bg-center {
+  background-position: center;
+}
+.c-bg-top {
+  background-position: top;
+}
+.c-bg-bottom {
+  background-position: bottom;
+}
+.c-bg-left {
+  background-position: left;
+}
+.c-bg-right {
+  background-position: right;
+}
+.c-bg-no-repeat {
+  background-repeat: no-repeat;
+}
+.c-bg-repeat {
+  background-repeat: repeat;
+}
+.c-bg-repeat-x {
+  background-repeat: repeat-x;
+}
+.c-bg-repeat-y {
+  background-repeat: repeat-y;
+}
+.c-bg-fixed {
+  background-attachment: fixed;
+}
+.c-bg-local {
+  background-attachment: local;
+}
+.c-bg-scroll {
+  background-attachment: scroll;
+}
+
+.c-gradient-to-r {
+  background-image: linear-gradient(
+    to right,
+    var(--c-from, transparent),
+    var(--c-to, transparent)
+  );
+}
+.c-gradient-to-l {
+  background-image: linear-gradient(
+    to left,
+    var(--c-from, transparent),
+    var(--c-to, transparent)
+  );
+}
+.c-gradient-to-t {
+  background-image: linear-gradient(
+    to top,
+    var(--c-from, transparent),
+    var(--c-to, transparent)
+  );
+}
+.c-gradient-to-b {
+  background-image: linear-gradient(
+    to bottom,
+    var(--c-from, transparent),
+    var(--c-to, transparent)
+  );
+}
+.c-gradient-to-tr {
+  background-image: linear-gradient(
+    to top right,
+    var(--c-from, transparent),
+    var(--c-to, transparent)
+  );
+}
+.c-gradient-to-br {
+  background-image: linear-gradient(
+    to bottom right,
+    var(--c-from, transparent),
+    var(--c-to, transparent)
+  );
+}
+
+.c-border-transparent {
+  border-color: transparent;
+}
+.c-border-white {
+  border-color: var(--c-white);
+}
+.c-border-black {
+  border-color: var(--c-black);
+}
+.c-border-base {
+  border-color: var(--c-border);
+}
+.c-border-gray-200 {
+  border-color: var(--c-gray-200);
+}
+.c-border-gray-300 {
+  border-color: var(--c-gray-300);
+}
+.c-border-gray-400 {
+  border-color: var(--c-gray-400);
+}
+.c-border-gray-700 {
+  border-color: var(--c-gray-700);
+}
+.c-border-primary-500 {
+  border-color: var(--c-primary-500);
+}
+.c-border-success-500 {
+  border-color: var(--c-success-500);
+}
+.c-border-error-500 {
+  border-color: var(--c-error-500);
+}
+.c-border-warning-500 {
+  border-color: var(--c-warning-500);
+}