@govtechsg/sgds-web-component 3.0.0-rc.6 → 3.0.0

package/css/grid.css

@@ -0,0 +1,110 @@
+.sgds-container {
+  width: 100%;
+  margin-left: auto;
+  margin-right: auto;
+  max-width: calc(100% - 40px); /* outer margin of 20px on each side */
+}
+
+.sgds-grid {
+  display: grid;
+  gap: var(--sgds-gap-md);
+  grid-template-columns: repeat(4, 1fr);
+}
+
+.sgds-col-1 { grid-column: span 1; }
+.sgds-col-2 { grid-column: span 2; }
+.sgds-col-3 { grid-column: span 3; }
+.sgds-col-4 { grid-column: span 4; }
+.sgds-col-none { display: none; }
+
+@media (min-width: 512px) {  /* sgds-breakpoint-sm */
+  .sgds-grid {
+    grid-template-columns: repeat(8, 1fr);
+  }
+
+  .sgds-container {
+    max-width: calc(100% - 64px); /* outer margin of 32px on each side */
+  }
+
+  .sgds-col-sm-1 { grid-column: span 1; }
+  .sgds-col-sm-2 { grid-column: span 2; }
+  .sgds-col-sm-3 { grid-column: span 3; }
+  .sgds-col-sm-4 { grid-column: span 4; }
+  .sgds-col-sm-5 { grid-column: span 5; }
+  .sgds-col-sm-6 { grid-column: span 6; }
+  .sgds-col-sm-7 { grid-column: span 7; }
+  .sgds-col-sm-8 { grid-column: span 8; }
+  .sgds-col-sm-none { display: none; }
+  .sgds-col-none { display: revert; }
+}
+
+@media (min-width: 1024px) {  /* sgds-breakpoint-md */
+  .sgds-grid {
+    grid-template-columns: repeat(12, 1fr);
+  }
+
+  .sgds-container {
+    max-width: 896px;
+  }
+
+  .sgds-col-md-1 { grid-column: span 1; }
+  .sgds-col-md-2 { grid-column: span 2; }
+  .sgds-col-md-3 { grid-column: span 3; }
+  .sgds-col-md-4 { grid-column: span 4; }
+  .sgds-col-md-5 { grid-column: span 5; }
+  .sgds-col-md-6 { grid-column: span 6; }
+  .sgds-col-md-7 { grid-column: span 7; }
+  .sgds-col-md-8 { grid-column: span 8; }
+  .sgds-col-md-9 { grid-column: span 9; }
+  .sgds-col-md-10 { grid-column: span 10; }
+  .sgds-col-md-11 { grid-column: span 11; }
+  .sgds-col-md-12 { grid-column: span 12; }
+  .sgds-col-md-none { display: none; }
+  .sgds-col-sm-none { display: revert; }
+}
+
+@media (min-width: 1280px) {  /* sgds-breakpoint-lg */
+  .sgds-grid {
+    gap: var(--sgds-gap-xl);
+  }
+
+  .sgds-container {
+    max-width: 1176px;
+  }
+
+  .sgds-col-lg-1 { grid-column: span 1; }
+  .sgds-col-lg-2 { grid-column: span 2; }
+  .sgds-col-lg-3 { grid-column: span 3; }
+  .sgds-col-lg-4 { grid-column: span 4; }
+  .sgds-col-lg-5 { grid-column: span 5; }
+  .sgds-col-lg-6 { grid-column: span 6; }
+  .sgds-col-lg-7 { grid-column: span 7; }
+  .sgds-col-lg-8 { grid-column: span 8; }
+  .sgds-col-lg-9 { grid-column: span 9; }
+  .sgds-col-lg-10 { grid-column: span 10; }
+  .sgds-col-lg-11 { grid-column: span 11; }
+  .sgds-col-lg-12 { grid-column: span 12; }
+  .sgds-col-lg-none { display: none; }
+  .sgds-col-md-none { display: revert; }
+}
+
+@media (min-width: 1440px) {  /* sgds-breakpoint-xl */
+  .sgds-container {
+    max-width: 1320px;
+  }
+
+  .sgds-col-xl-1 { grid-column: span 1; }
+  .sgds-col-xl-2 { grid-column: span 2; }
+  .sgds-col-xl-3 { grid-column: span 3; }
+  .sgds-col-xl-4 { grid-column: span 4; }
+  .sgds-col-xl-5 { grid-column: span 5; }
+  .sgds-col-xl-6 { grid-column: span 6; }
+  .sgds-col-xl-7 { grid-column: span 7; }
+  .sgds-col-xl-8 { grid-column: span 8; }
+  .sgds-col-xl-9 { grid-column: span 9; }
+  .sgds-col-xl-10 { grid-column: span 10; }
+  .sgds-col-xl-11 { grid-column: span 11; }
+  .sgds-col-xl-12 { grid-column: span 12; }
+  .sgds-col-xl-none { display: none; }
+  .sgds-col-lg-none { display: revert; }
+}

package/css/reboot.css

@@ -6,7 +6,7 @@ html {
 
 /* BODY */
 body {
-  color: var(--sgds-body-color);
+  color: var(--sgds-body-color-default);
   font-family: var(--sgds-font-family-brand);
   font-size: var(--sgds-font-size-2);
   font-weight: var(--sgds-font-weight-regular);
@@ -16,7 +16,7 @@ body {
 }
 /* LABEL */
 label {
-  color: var(--sgds-label-color);
+  color: var(--sgds-label-color-default);
   font-size: var(--sgds-font-size-2);
   font-weight: var(--sgds-font-weight-regular);
   line-height: var(--sgds-line-height-body);
@@ -31,7 +31,7 @@ ul {
   line-height: var(--sgds-line-height-body);
   list-style-position: outside;
   padding-left: var(--sgds-padding-2-xl);
-  margin-top: var(--sgds-padding-xs);
+  margin-top: var(--sgds-margin-3-xs);
 }
 
 li {
@@ -40,7 +40,7 @@ li {
   font-weight: var(--sgds-font-weight-regular);
   line-height: var(--sgds-line-height-body);
   list-style-position: outside;
-  margin-top: var(--sgds-padding-xs);
+  margin-top: var(--sgds-margin-3-xs);
 }
 li > ol {
   list-style-type: lower-alpha;
@@ -56,7 +56,7 @@ h3,
 h4,
 h5,
 h6 {
-  color: var(--sgds-header-color);
+  color: var(--sgds-header-color-default);
   font-family: var(--sgds-font-family-brand);
   font-style: normal;
   margin-top: var(--sgds-margin-none);
@@ -110,7 +110,7 @@ h6 {
 }
 /* CAPTION */
 caption {
-  color: var(--sgds-caption-color);
+  color: var(--sgds-label-color-subtle);
   font-size: var(--sgds-font-size-1);
   font-weight: var(--sgds-font-weight-regular);
   line-height: var(--sgds-line-height-body);
@@ -138,7 +138,7 @@ a {
   line-height: var(--sgds-line-height-body);
   letter-spacing: var(--sgds-letter-spacing-normal);
   text-decoration: underline;
-  color: var(--sgds-link-color);
+  color: var(--sgds-link-color-default);
   height: 100%;
 }
 

package/css/sgds.css

@@ -1 +1,2 @@
 @import "./reboot.css";
+@import "./grid.css";

package/index.d.ts

@@ -1,5 +1,4 @@
 import "./components/Accordion";
-import "./components/ActionCard";
 import "./components/Alert";
 import "./components/Badge";
 import "./components/Breadcrumb";
@@ -36,3 +35,4 @@ import "./components/Table";
 import "./components/Textarea";
 import "./components/Toast";
 import "./components/Tooltip";
+import "./components/TableOfContents";

package/index.js

@@ -1,5 +1,4 @@
 import './components/Accordion/index.js';
-import './components/ActionCard/index.js';
 import './components/Alert/index.js';
 import './components/Badge/index.js';
 import './components/Breadcrumb/index.js';
@@ -36,4 +35,5 @@ import './components/Table/index.js';
 import './components/Textarea/index.js';
 import './components/Toast/index.js';
 import './components/Tooltip/index.js';
+import './components/TableOfContents/index.js';
 //# sourceMappingURL=index.js.map