@haiilo/catalyst 0.1.1 → 0.2.2

package/dist/catalyst/catalyst.css

@@ -404,6 +404,27 @@ pre {
   line-height: 1.25rem;
   color: rgb(var(--cat-font-color-mono, 0, 0, 0));
   font-weight: var(--cat-font-weight-mono, 400);
+  color: rgb(var(--cat-font-color-mono, 0, 0, 0));
+}
+
+nav hr,
+nav .cat-hr {
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+nav .cat-head,
+nav .cat-text {
+  padding: 0.5rem 1rem;
+}
+nav .cat-head > :last-child,
+nav .cat-text > :last-child {
+  margin-bottom: 0;
+}
+nav .cat-head {
+  font-family: var(--cat-font-family-head, "DM Sans"), system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  font-size: 0.9375rem;
+  line-height: 1.25rem;
+  color: rgb(var(--cat-font-color-head, 0, 0, 0));
 }
 
 h1,
@@ -471,16 +492,79 @@ h6,
   color: rgb(var(--cat-font-color-head, 0, 0, 0));
 }
 
+.cat-text-xl {
+  font-size: 1.25rem;
+  line-height: 1.5rem;
+}
+
+.cat-text-l {
+  font-size: 1.125rem;
+  line-height: 1.5rem;
+}
+
+.cat-text-m {
+  font-size: 0.9375rem;
+  line-height: 1.25rem;
+}
+
+.cat-text-s {
+  font-size: 0.875rem;
+  line-height: 1rem;
+}
+
+.cat-text-xs {
+  font-size: 0.75rem;
+  line-height: 1rem;
+}
+
+.cat-mono-xl {
+  font-family: var(--cat-font-family-mono, "Azeret Mono"), SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  font-size: 1.25rem;
+  line-height: 1.5rem;
+  color: rgb(var(--cat-font-color-mono, 0, 0, 0));
+}
+
+.cat-mono-l {
+  font-family: var(--cat-font-family-mono, "Azeret Mono"), SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  font-size: 1.125rem;
+  line-height: 1.5rem;
+  color: rgb(var(--cat-font-color-mono, 0, 0, 0));
+}
+
+.cat-mono-m {
+  font-family: var(--cat-font-family-mono, "Azeret Mono"), SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  font-size: 0.9375rem;
+  line-height: 1.25rem;
+  color: rgb(var(--cat-font-color-mono, 0, 0, 0));
+}
+
+.cat-mono-s {
+  font-family: var(--cat-font-family-mono, "Azeret Mono"), SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  font-size: 0.875rem;
+  line-height: 1rem;
+  color: rgb(var(--cat-font-color-mono, 0, 0, 0));
+}
+
+.cat-mono-xs {
+  font-family: var(--cat-font-family-mono, "Azeret Mono"), SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  font-size: 0.75rem;
+  line-height: 1rem;
+  color: rgb(var(--cat-font-color-mono, 0, 0, 0));
+}
+
 p {
   margin-top: 0;
   margin-bottom: 1rem;
 }
 
-hr {
+hr,
+.cat-hr {
+  display: block;
   margin: 1rem 0;
-  height: 1px;
   border: 0;
+  height: 1px;
   background-color: #ebecf0;
+  overflow: hidden;
 }
 
 a {
@@ -528,6 +612,10 @@ small,
   text-decoration: line-through;
 }
 
+.cat-muted {
+  color: rgb(var(--cat-font-color-muted, 105, 118, 135));
+}
+
 ol,
 ul {
   padding-left: 2rem;
@@ -667,176 +755,348 @@ figure figcaption::before {
   font-weight: 400;
   font-display: fallback;
 }
-.cat-d-none {
+.cat-bg-primary {
+  background-color: rgb(var(--cat-primary-bg, 32, 127, 138)) !important;
+  color: rgb(var(--cat-primary-fill, 255, 255, 255)) !important;
+}
+
+.cat-bg-primary-hover {
+  transition: background-color 0.13s, color 0.13s;
+}
+.cat-bg-primary-hover:hover {
+  background-color: rgb(var(--cat-primary-bg-hover, 28, 112, 122)) !important;
+  color: rgb(var(--cat-primary-fill-hover, 255, 255, 255)) !important;
+}
+
+.cat-text-primary,
+.cat-link-primary {
+  color: rgb(var(--cat-primary-text, 32, 127, 138)) !important;
+}
+
+.cat-link-primary,
+.cat-text-primary-hover {
+  transition: color 0.13s;
+}
+.cat-link-primary:hover,
+.cat-text-primary-hover:hover {
+  color: rgb(var(--cat-primary-text-hover, 28, 112, 122)) !important;
+}
+.cat-link-primary:active,
+.cat-text-primary-hover:active {
+  color: rgb(var(--cat-primary-text-active, 25, 101, 110)) !important;
+}
+
+.cat-bg-secondary {
+  background-color: #697687 !important;
+  color: white !important;
+}
+
+.cat-bg-secondary-hover {
+  transition: background-color 0.13s, color 0.13s;
+}
+.cat-bg-secondary-hover:hover {
+  background-color: #697687 !important;
+  color: white !important;
+}
+
+.cat-text-secondary,
+.cat-link-secondary {
+  color: black !important;
+}
+
+.cat-link-secondary,
+.cat-text-secondary-hover {
+  transition: color 0.13s;
+}
+.cat-link-secondary:hover,
+.cat-text-secondary-hover:hover {
+  color: black !important;
+}
+.cat-link-secondary:active,
+.cat-text-secondary-hover:active {
+  color: black !important;
+}
+
+.cat-bg-success {
+  background-color: #008458 !important;
+  color: white !important;
+}
+
+.cat-bg-success-hover {
+  transition: background-color 0.13s, color 0.13s;
+}
+.cat-bg-success-hover:hover {
+  background-color: #00754e !important;
+  color: white !important;
+}
+
+.cat-text-success,
+.cat-link-success {
+  color: #008458 !important;
+}
+
+.cat-link-success,
+.cat-text-success-hover {
+  transition: color 0.13s;
+}
+.cat-link-success:hover,
+.cat-text-success-hover:hover {
+  color: #00754e !important;
+}
+.cat-link-success:active,
+.cat-text-success-hover:active {
+  color: #006946 !important;
+}
+
+.cat-bg-warning {
+  background-color: #ffce80 !important;
+  color: black !important;
+}
+
+.cat-bg-warning-hover {
+  transition: background-color 0.13s, color 0.13s;
+}
+.cat-bg-warning-hover:hover {
+  background-color: #ffd694 !important;
+  color: black !important;
+}
+
+.cat-text-warning,
+.cat-link-warning {
+  color: #9f6100 !important;
+}
+
+.cat-link-warning,
+.cat-text-warning-hover {
+  transition: color 0.13s;
+}
+.cat-link-warning:hover,
+.cat-text-warning-hover:hover {
+  color: #9f6100 !important;
+}
+.cat-link-warning:active,
+.cat-text-warning-hover:active {
+  color: #9f6100 !important;
+}
+
+.cat-bg-danger {
+  background-color: #d9340d !important;
+  color: white !important;
+}
+
+.cat-bg-danger-hover {
+  transition: background-color 0.13s, color 0.13s;
+}
+.cat-bg-danger-hover:hover {
+  background-color: #c22e0b !important;
+  color: white !important;
+}
+
+.cat-text-danger,
+.cat-link-danger {
+  color: #d9340d !important;
+}
+
+.cat-link-danger,
+.cat-text-danger-hover {
+  transition: color 0.13s;
+}
+.cat-link-danger:hover,
+.cat-text-danger-hover:hover {
+  color: #c22e0b !important;
+}
+.cat-link-danger:active,
+.cat-text-danger-hover:active {
+  color: #ae2a0a !important;
+}
+
+.cat-active {
+  color: rgb(var(--cat-primary-text, 32, 127, 138)) !important;
+}
+
+.cat-muted {
+  color: rgb(var(--cat-font-color-muted, 105, 118, 135)) !important;
+}
+
+.cat-text-reset {
+  color: inherit !important;
+}
+
+.cat-link-reset {
+  color: inherit !important;
+  text-decoration: inherit !important;
+}
+
+.cat-none {
   display: none !important;
 }
 
-.cat-d-inline {
+.cat-inline {
   display: inline !important;
 }
 
-.cat-d-inline-block {
+.cat-inline-block {
   display: inline-block !important;
 }
 
-.cat-d-block {
+.cat-block {
   display: block !important;
 }
 
-.cat-d-grid {
+.cat-grid {
   display: grid !important;
 }
 
-.cat-d-flex {
+.cat-flex {
   display: flex !important;
 }
 
-.cat-d-inline-flex {
+.cat-inline-flex {
   display: inline-flex !important;
 }
 
 @media screen and (min-width: 540px) {
-  .cat-d-none\:xs {
+  .cat-none\:xs {
     display: none !important;
   }
 
-  .cat-d-inline\:xs {
+  .cat-inline\:xs {
     display: inline !important;
   }
 
-  .cat-d-inline-block\:xs {
+  .cat-inline-block\:xs {
     display: inline-block !important;
   }
 
-  .cat-d-block\:xs {
+  .cat-block\:xs {
     display: block !important;
   }
 
-  .cat-d-grid\:xs {
+  .cat-grid\:xs {
     display: grid !important;
   }
 
-  .cat-d-flex\:xs {
+  .cat-flex\:xs {
     display: flex !important;
   }
 
-  .cat-d-inline-flex\:xs {
+  .cat-inline-flex\:xs {
     display: inline-flex !important;
   }
 }
 @media screen and (min-width: 768px) {
-  .cat-d-none\:s {
+  .cat-none\:s {
     display: none !important;
   }
 
-  .cat-d-inline\:s {
+  .cat-inline\:s {
     display: inline !important;
   }
 
-  .cat-d-inline-block\:s {
+  .cat-inline-block\:s {
     display: inline-block !important;
   }
 
-  .cat-d-block\:s {
+  .cat-block\:s {
     display: block !important;
   }
 
-  .cat-d-grid\:s {
+  .cat-grid\:s {
     display: grid !important;
   }
 
-  .cat-d-flex\:s {
+  .cat-flex\:s {
     display: flex !important;
   }
 
-  .cat-d-inline-flex\:s {
+  .cat-inline-flex\:s {
     display: inline-flex !important;
   }
 }
 @media screen and (min-width: 992px) {
-  .cat-d-none\:m {
+  .cat-none\:m {
     display: none !important;
   }
 
-  .cat-d-inline\:m {
+  .cat-inline\:m {
     display: inline !important;
   }
 
-  .cat-d-inline-block\:m {
+  .cat-inline-block\:m {
     display: inline-block !important;
   }
 
-  .cat-d-block\:m {
+  .cat-block\:m {
     display: block !important;
   }
 
-  .cat-d-grid\:m {
+  .cat-grid\:m {
     display: grid !important;
   }
 
-  .cat-d-flex\:m {
+  .cat-flex\:m {
     display: flex !important;
   }
 
-  .cat-d-inline-flex\:m {
+  .cat-inline-flex\:m {
     display: inline-flex !important;
   }
 }
 @media screen and (min-width: 1200px) {
-  .cat-d-none\:l {
+  .cat-none\:l {
     display: none !important;
   }
 
-  .cat-d-inline\:l {
+  .cat-inline\:l {
     display: inline !important;
   }
 
-  .cat-d-inline-block\:l {
+  .cat-inline-block\:l {
     display: inline-block !important;
   }
 
-  .cat-d-block\:l {
+  .cat-block\:l {
     display: block !important;
   }
 
-  .cat-d-grid\:l {
+  .cat-grid\:l {
     display: grid !important;
   }
 
-  .cat-d-flex\:l {
+  .cat-flex\:l {
     display: flex !important;
   }
 
-  .cat-d-inline-flex\:l {
+  .cat-inline-flex\:l {
     display: inline-flex !important;
   }
 }
 @media screen and (min-width: 1400px) {
-  .cat-d-none\:xl {
+  .cat-none\:xl {
     display: none !important;
   }
 
-  .cat-d-inline\:xl {
+  .cat-inline\:xl {
     display: inline !important;
   }
 
-  .cat-d-inline-block\:xl {
+  .cat-inline-block\:xl {
     display: inline-block !important;
   }
 
-  .cat-d-block\:xl {
+  .cat-block\:xl {
     display: block !important;
   }
 
-  .cat-d-grid\:xl {
+  .cat-grid\:xl {
     display: grid !important;
   }
 
-  .cat-d-flex\:xl {
+  .cat-flex\:xl {
     display: flex !important;
   }
 
-  .cat-d-inline-flex\:xl {
+  .cat-inline-flex\:xl {
     display: inline-flex !important;
   }
 }
@@ -884,6 +1144,287 @@ figure figcaption::before {
   box-shadow: 0 2px 4px -1px rgba(16, 29, 48, 0.05), 0 9px 16px -3px rgba(16, 29, 48, 0.14), 0 32px 20px -20px rgba(16, 29, 48, 0.2);
 }
 
+.cat-flex-row {
+  flex-direction: row;
+}
+
+.cat-flex-col {
+  flex-direction: column;
+}
+
+.cat-flex-1 {
+  flex: 1 1 0%;
+}
+
+.cat-flex-auto {
+  flex: 1 1 auto;
+}
+
+.cat-flex-init {
+  flex: 0 1 auto;
+}
+
+.cat-flex-none {
+  flex: none;
+}
+
+.cat-flex-wrap {
+  flex-wrap: wrap;
+}
+
+.cat-flex-nowrap {
+  flex-wrap: nowrap;
+}
+
+.cat-gap-xl {
+  gap: 2rem;
+}
+
+.cat-gap-x-xl {
+  column-gap: 2rem;
+}
+
+.cat-gap-y-xl {
+  row-gap: 2rem;
+}
+
+.cat-gap-l {
+  gap: 1.5rem;
+}
+
+.cat-gap-x-l {
+  column-gap: 1.5rem;
+}
+
+.cat-gap-y-l {
+  row-gap: 1.5rem;
+}
+
+.cat-gap-m {
+  gap: 1rem;
+}
+
+.cat-gap-x-m {
+  column-gap: 1rem;
+}
+
+.cat-gap-y-m {
+  row-gap: 1rem;
+}
+
+.cat-gap-s {
+  gap: 0.5rem;
+}
+
+.cat-gap-x-s {
+  column-gap: 0.5rem;
+}
+
+.cat-gap-y-s {
+  row-gap: 0.5rem;
+}
+
+.cat-gap-xs {
+  gap: 0.25rem;
+}
+
+.cat-gap-x-xs {
+  column-gap: 0.25rem;
+}
+
+.cat-gap-y-xs {
+  row-gap: 0.25rem;
+}
+
+.cat-justify-start {
+  justify-content: flex-start;
+}
+
+.cat-justify-end {
+  justify-content: flex-end;
+}
+
+.cat-justify-center {
+  justify-content: center;
+}
+
+.cat-justify-between {
+  justify-content: space-between;
+}
+
+.cat-justify-items-start {
+  justify-items: flex-start;
+}
+
+.cat-justify-items-end {
+  justify-items: flex-end;
+}
+
+.cat-justify-items-center {
+  justify-items: flex-center;
+}
+
+.cat-justify-items-stretch {
+  justify-items: flex-stretch;
+}
+
+.cat-content-start {
+  align-content: flex-start;
+}
+
+.cat-content-end {
+  align-content: flex-end;
+}
+
+.cat-content-center {
+  align-content: center;
+}
+
+.cat-content-between {
+  align-content: space-between;
+}
+
+.cat-items-start {
+  align-items: flex-start;
+}
+
+.cat-items-end {
+  align-items: flex-end;
+}
+
+.cat-items-center {
+  align-items: flex-center;
+}
+
+.cat-items-stretch {
+  align-items: flex-stretch;
+}
+
+.cat-grid-1 {
+  grid-template-columns: repeat(1, minmax(0, 1fr));
+}
+
+.cat-grid-col-1 {
+  grid-column: span 1 / span 1;
+}
+
+.cat-grid-2 {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.cat-grid-col-2 {
+  grid-column: span 2 / span 2;
+}
+
+.cat-grid-3 {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.cat-grid-col-3 {
+  grid-column: span 3 / span 3;
+}
+
+.cat-grid-4 {
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+}
+
+.cat-grid-col-4 {
+  grid-column: span 4 / span 4;
+}
+
+.cat-grid-5 {
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+}
+
+.cat-grid-col-5 {
+  grid-column: span 5 / span 5;
+}
+
+.cat-grid-6 {
+  grid-template-columns: repeat(6, minmax(0, 1fr));
+}
+
+.cat-grid-col-6 {
+  grid-column: span 6 / span 6;
+}
+
+.cat-grid-7 {
+  grid-template-columns: repeat(7, minmax(0, 1fr));
+}
+
+.cat-grid-col-7 {
+  grid-column: span 7 / span 7;
+}
+
+.cat-grid-8 {
+  grid-template-columns: repeat(8, minmax(0, 1fr));
+}
+
+.cat-grid-col-8 {
+  grid-column: span 8 / span 8;
+}
+
+.cat-grid-9 {
+  grid-template-columns: repeat(9, minmax(0, 1fr));
+}
+
+.cat-grid-col-9 {
+  grid-column: span 9 / span 9;
+}
+
+.cat-grid-10 {
+  grid-template-columns: repeat(10, minmax(0, 1fr));
+}
+
+.cat-grid-col-10 {
+  grid-column: span 10 / span 10;
+}
+
+.cat-grid-11 {
+  grid-template-columns: repeat(11, minmax(0, 1fr));
+}
+
+.cat-grid-col-11 {
+  grid-column: span 11 / span 11;
+}
+
+.cat-grid-12 {
+  grid-template-columns: repeat(12, minmax(0, 1fr));
+}
+
+.cat-grid-col-12 {
+  grid-column: span 12 / span 12;
+}
+
+.cat-grid-row-1 {
+  grid-row: span 1 / span 1;
+}
+
+.cat-grid-row-2 {
+  grid-row: span 2 / span 2;
+}
+
+.cat-grid-row-3 {
+  grid-row: span 3 / span 3;
+}
+
+.cat-grid-row-4 {
+  grid-row: span 4 / span 4;
+}
+
+.cat-grid-row-5 {
+  grid-row: span 5 / span 5;
+}
+
+.cat-grid-row-6 {
+  grid-row: span 6 / span 6;
+}
+
+.cat-grid-auto {
+  grid-template-columns: repeat(auto-fill,minmax(min(var(--grid-min),100%),1fr));
+  --grid-min: 100%;
+}
+
 .cat-radius-l {
   border-radius: 0.5rem;
 }