@govtechsg/sgds-web-component 3.26.1 → 3.27.0-rc.0

package/react/index.js

@@ -3,6 +3,8 @@ export { default as SgdsAccordionItem } from './accordion-item/index.js';
 export { default as SgdsAccordion } from './accordion/index.js';
 export { default as SgdsAlertLink } from './alert-link/index.js';
 export { default as SgdsAlert } from './alert/index.js';
+export { default as SgdsAppnavProfile } from './appnav-profile/index.js';
+export { default as SgdsAppnav } from './appnav/index.js';
 export { default as SgdsBadge } from './badge/index.js';
 export { default as SgdsBreadcrumbItem } from './breadcrumb-item/index.js';
 export { default as SgdsBreadcrumb } from './breadcrumb/index.js';
@@ -11,11 +13,15 @@ export { default as SgdsCard } from './card/index.js';
 export { default as SgdsCheckboxGroup } from './checkbox-group/index.js';
 export { default as SgdsCheckbox } from './checkbox/index.js';
 export { default as SgdsCloseButton } from './close-button/index.js';
-export { default as SgdsComboBoxOption } from './combo-box-option/index.js';
-export { default as SgdsComboBox } from './combo-box/index.js';
+export { default as SgdsDataTableCell } from './data-table-cell/index.js';
+export { default as SgdsDataTableHead } from './data-table-head/index.js';
+export { default as SgdsDataTableRow } from './data-table-row/index.js';
+export { default as SgdsDataTable } from './data-table/index.js';
 export { default as SgdsDatepicker } from './datepicker/index.js';
 export { default as SgdsDescriptionListGroup } from './description-list-group/index.js';
 export { default as SgdsDescriptionList } from './description-list/index.js';
+export { default as SgdsComboBoxOption } from './combo-box-option/index.js';
+export { default as SgdsComboBox } from './combo-box/index.js';
 export { default as SgdsDivider } from './divider/index.js';
 export { default as SgdsDrawer } from './drawer/index.js';
 export { default as SgdsDropdownItem } from './dropdown-item/index.js';
@@ -32,6 +38,7 @@ export { default as SgdsInput } from './input/index.js';
 export { default as SgdsLink } from './link/index.js';
 export { default as SgdsMainnavDropdown } from './mainnav-dropdown/index.js';
 export { default as SgdsMainnavItem } from './mainnav-item/index.js';
+export { default as SgdsMainnavProfile } from './mainnav-profile/index.js';
 export { default as SgdsMainnav } from './mainnav/index.js';
 export { default as SgdsMasthead } from './masthead/index.js';
 export { default as SgdsModal } from './modal/index.js';

package/react/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/react/mainnav-profile/index.cjs.js

@@ -0,0 +1,40 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var react = require('@lit/react');
+var sgdsMainnavProfile = require('../components/Mainnav/sgds-mainnav-profile.cjs.js');
+var ceRegistry = require('../utils/ce-registry.cjs.js');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n["default"] = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+ceRegistry.register("sgds-mainnav-profile", sgdsMainnavProfile.SgdsMainnavProfile);
+var index = react.createComponent({
+    react: React__namespace,
+    tagName: "sgds-mainnav-profile",
+    elementClass: sgdsMainnavProfile.SgdsMainnavProfile,
+    events: {}
+});
+
+exports["default"] = index;
+//# sourceMappingURL=index.cjs.js.map

package/react/mainnav-profile/index.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs.js","sources":["../../../src/react/mainnav-profile/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport { createComponent } from \"@lit/react\";\nimport Component from \"../../components/Mainnav/sgds-mainnav-profile\";\nimport { register } from \"../../utils/ce-registry\";\n\nregister(\"sgds-mainnav-profile\", Component);\n\nexport default createComponent({\n  react: React,\n  tagName: \"sgds-mainnav-profile\",\n  elementClass: Component,\n  events: {}\n});\n"],"names":["register","Component","createComponent","React"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKAA,mBAAQ,CAAC,sBAAsB,EAAEC,qCAAS,CAAC,CAAC;AAE5C,YAAeC,qBAAe,CAAC;AAC7B,IAAA,KAAK,EAAEC,gBAAK;AACZ,IAAA,OAAO,EAAE,sBAAsB;AAC/B,IAAA,YAAY,EAAEF,qCAAS;AACvB,IAAA,MAAM,EAAE,EAAE;AACX,CAAA,CAAC;;;;"}

package/react/mainnav-profile/index.d.ts

@@ -0,0 +1,4 @@
+import type { SgdsMainnavProfileProps } from '../../types/react';
+import * as React from 'react';
+declare const _default: React.ForwardRefExoticComponent<React.PropsWithChildren<SgdsMainnavProfileProps> & React.RefAttributes<HTMLElement>>;
+export default _default;

package/react/mainnav-profile/index.js

@@ -0,0 +1,16 @@
+'use client';
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import { SgdsMainnavProfile } from '../components/Mainnav/sgds-mainnav-profile.js';
+import { register } from '../utils/ce-registry.js';
+
+register("sgds-mainnav-profile", SgdsMainnavProfile);
+var index = createComponent({
+    react: React,
+    tagName: "sgds-mainnav-profile",
+    elementClass: SgdsMainnavProfile,
+    events: {}
+});
+
+export { index as default };
+//# sourceMappingURL=index.js.map

package/react/mainnav-profile/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/react/mainnav-profile/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport { createComponent } from \"@lit/react\";\nimport Component from \"../../components/Mainnav/sgds-mainnav-profile\";\nimport { register } from \"../../utils/ce-registry\";\n\nregister(\"sgds-mainnav-profile\", Component);\n\nexport default createComponent({\n  react: React,\n  tagName: \"sgds-mainnav-profile\",\n  elementClass: Component,\n  events: {}\n});\n"],"names":["Component"],"mappings":";;;;;;AAKA,QAAQ,CAAC,sBAAsB,EAAEA,kBAAS,CAAC,CAAC;AAE5C,YAAe,eAAe,CAAC;AAC7B,IAAA,KAAK,EAAE,KAAK;AACZ,IAAA,OAAO,EAAE,sBAAsB;AAC/B,IAAA,YAAY,EAAEA,kBAAS;AACvB,IAAA,MAAM,EAAE,EAAE;AACX,CAAA,CAAC;;;;"}

package/react/styles/form-text-control.cjs.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var lit = require('lit');
 
-var css_248z = lit.css`.form-control-container{display:flex;flex-direction:column;gap:var(--sgds-form-gap-md)}.m-width-160{min-width:var(--sgds-dimension-160)}.m-width-256{min-width:var(--sgds-dimension-256)}.form-label{color:var(--sgds-form-color-default);font-size:var(--sgds-font-size-label-md);font-weight:var(--sgds-font-weight-semibold)}.form-control-group{align-items:center;background-color:var(--sgds-form-surface-default);border:var(--sgds-form-border-width-default) solid var(--sgds-border-color-default);border-radius:var(--input-border-radius,var(--sgds-form-border-radius-md));display:flex;gap:var(--sgds-form-gap-md);height:var(--sgds-dimension-48);justify-content:center;overflow:hidden;padding:0 var(--sgds-form-padding-x);transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;width:-webkit-fill-available;width:-moz-available}.form-control{appearance:none;background-clip:padding-box;background:none;border:none;color:var(--sgds-form-color-default);display:block;flex-grow:1;font-family:var(--sgds-font-family-brand);font-size:var(--sgds-font-size-label-md);line-height:var(--sgds-line-height-xs);min-width:0;outline:none;padding:0;width:100%}.form-clearable{color:var(--sgds-color-subtle);cursor:pointer}.form-control-group:not(.disabled):not(.is-invalid):not(.readonly):not(:focus-within):hover{outline:var(--sgds-form-border-width-thick) solid var(--sgds-border-color-emphasis);outline-offset:var(--sgds-form-outline-offset-focus)}.form-control-group:not(.disabled):not(.is-invalid):focus-within{outline:var(--sgds-form-outline-focus);outline-offset:var(--sgds-form-outline-offset-focus)}.form-control-container.disabled{opacity:var(--sgds-opacity-40)}.form-control-group.disabled{background-color:var(--sgds-form-surface-muted);cursor:not-allowed}.form-control-group.readonly{background-color:var(--sgds-form-surface-raised)}.form-control-group.is-invalid:not(.disabled){border:var(--sgds-form-border-width-default) solid var(--sgds-form-danger-border-color-default)}.form-control-group:not(.disabled).is-invalid:focus-within{outline:var(--sgds-border-width-2) solid var(--sgds-form-danger-color-default);outline-offset:var(--sgds-form-outline-offset-focus)}`;
+var css_248z = lit.css`.form-control-container{display:flex;flex-direction:column;gap:var(--sgds-form-gap-md)}.m-width-160{min-width:var(--sgds-dimension-160)}.m-width-256{min-width:var(--sgds-dimension-256)}.form-label{color:var(--sgds-form-color-default);font-size:var(--sgds-font-size-label-md);font-weight:var(--sgds-font-weight-semibold)}.form-control-group{align-items:center;background-color:var(--sgds-form-surface-default);border:var(--sgds-form-border-width-default) solid var(--sgds-border-color-default);border-radius:var(--input-border-radius,var(--sgds-form-border-radius-md));display:flex;gap:var(--sgds-form-gap-xl);height:var(--sgds-dimension-48);justify-content:center;overflow:hidden;padding:0 var(--sgds-form-padding-x);transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;width:-webkit-fill-available;width:-moz-available}.form-control{appearance:none;background-clip:padding-box;background:none;border:none;color:var(--sgds-form-color-default);display:block;flex-grow:1;font-family:var(--sgds-font-family-brand);font-size:var(--sgds-font-size-label-md);line-height:var(--sgds-line-height-xs);min-width:0;outline:none;padding:0;width:100%}.form-clearable{color:var(--sgds-color-subtle);cursor:pointer}.form-control-group:not(.disabled):not(.is-invalid):not(.readonly):not(:focus-within):hover{outline:var(--sgds-form-border-width-thick) solid var(--sgds-border-color-emphasis);outline-offset:var(--sgds-form-outline-offset-focus)}.form-control-group:not(.disabled):not(.is-invalid):focus-within{outline:var(--sgds-form-outline-focus);outline-offset:var(--sgds-form-outline-offset-focus)}.form-control-container.disabled{opacity:var(--sgds-opacity-40)}.form-control-group.disabled{background-color:var(--sgds-form-surface-muted);cursor:not-allowed}.form-control-group.readonly{background-color:var(--sgds-form-surface-raised)}.form-control-group.is-invalid:not(.disabled){border:var(--sgds-form-border-width-default) solid var(--sgds-form-danger-border-color-default)}.form-control-group:not(.disabled).is-invalid:focus-within{outline:var(--sgds-border-width-2) solid var(--sgds-form-danger-color-default);outline-offset:var(--sgds-form-outline-offset-focus)}`;
 
 exports["default"] = css_248z;
 //# sourceMappingURL=form-text-control.cjs.js.map

package/react/styles/form-text-control.js

@@ -1,7 +1,7 @@
 'use client';
 import { css } from 'lit';
 
-var css_248z = css`.form-control-container{display:flex;flex-direction:column;gap:var(--sgds-form-gap-md)}.m-width-160{min-width:var(--sgds-dimension-160)}.m-width-256{min-width:var(--sgds-dimension-256)}.form-label{color:var(--sgds-form-color-default);font-size:var(--sgds-font-size-label-md);font-weight:var(--sgds-font-weight-semibold)}.form-control-group{align-items:center;background-color:var(--sgds-form-surface-default);border:var(--sgds-form-border-width-default) solid var(--sgds-border-color-default);border-radius:var(--input-border-radius,var(--sgds-form-border-radius-md));display:flex;gap:var(--sgds-form-gap-md);height:var(--sgds-dimension-48);justify-content:center;overflow:hidden;padding:0 var(--sgds-form-padding-x);transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;width:-webkit-fill-available;width:-moz-available}.form-control{appearance:none;background-clip:padding-box;background:none;border:none;color:var(--sgds-form-color-default);display:block;flex-grow:1;font-family:var(--sgds-font-family-brand);font-size:var(--sgds-font-size-label-md);line-height:var(--sgds-line-height-xs);min-width:0;outline:none;padding:0;width:100%}.form-clearable{color:var(--sgds-color-subtle);cursor:pointer}.form-control-group:not(.disabled):not(.is-invalid):not(.readonly):not(:focus-within):hover{outline:var(--sgds-form-border-width-thick) solid var(--sgds-border-color-emphasis);outline-offset:var(--sgds-form-outline-offset-focus)}.form-control-group:not(.disabled):not(.is-invalid):focus-within{outline:var(--sgds-form-outline-focus);outline-offset:var(--sgds-form-outline-offset-focus)}.form-control-container.disabled{opacity:var(--sgds-opacity-40)}.form-control-group.disabled{background-color:var(--sgds-form-surface-muted);cursor:not-allowed}.form-control-group.readonly{background-color:var(--sgds-form-surface-raised)}.form-control-group.is-invalid:not(.disabled){border:var(--sgds-form-border-width-default) solid var(--sgds-form-danger-border-color-default)}.form-control-group:not(.disabled).is-invalid:focus-within{outline:var(--sgds-border-width-2) solid var(--sgds-form-danger-color-default);outline-offset:var(--sgds-form-outline-offset-focus)}`;
+var css_248z = css`.form-control-container{display:flex;flex-direction:column;gap:var(--sgds-form-gap-md)}.m-width-160{min-width:var(--sgds-dimension-160)}.m-width-256{min-width:var(--sgds-dimension-256)}.form-label{color:var(--sgds-form-color-default);font-size:var(--sgds-font-size-label-md);font-weight:var(--sgds-font-weight-semibold)}.form-control-group{align-items:center;background-color:var(--sgds-form-surface-default);border:var(--sgds-form-border-width-default) solid var(--sgds-border-color-default);border-radius:var(--input-border-radius,var(--sgds-form-border-radius-md));display:flex;gap:var(--sgds-form-gap-xl);height:var(--sgds-dimension-48);justify-content:center;overflow:hidden;padding:0 var(--sgds-form-padding-x);transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;width:-webkit-fill-available;width:-moz-available}.form-control{appearance:none;background-clip:padding-box;background:none;border:none;color:var(--sgds-form-color-default);display:block;flex-grow:1;font-family:var(--sgds-font-family-brand);font-size:var(--sgds-font-size-label-md);line-height:var(--sgds-line-height-xs);min-width:0;outline:none;padding:0;width:100%}.form-clearable{color:var(--sgds-color-subtle);cursor:pointer}.form-control-group:not(.disabled):not(.is-invalid):not(.readonly):not(:focus-within):hover{outline:var(--sgds-form-border-width-thick) solid var(--sgds-border-color-emphasis);outline-offset:var(--sgds-form-outline-offset-focus)}.form-control-group:not(.disabled):not(.is-invalid):focus-within{outline:var(--sgds-form-outline-focus);outline-offset:var(--sgds-form-outline-offset-focus)}.form-control-container.disabled{opacity:var(--sgds-opacity-40)}.form-control-group.disabled{background-color:var(--sgds-form-surface-muted);cursor:not-allowed}.form-control-group.readonly{background-color:var(--sgds-form-surface-raised)}.form-control-group.is-invalid:not(.disabled){border:var(--sgds-form-border-width-default) solid var(--sgds-form-danger-border-color-default)}.form-control-group:not(.disabled).is-invalid:focus-within{outline:var(--sgds-border-width-2) solid var(--sgds-form-danger-color-default);outline-offset:var(--sgds-form-outline-offset-focus)}`;
 
 export { css_248z as default };
 //# sourceMappingURL=form-text-control.js.map

package/styles/form-text-control.js

@@ -1,6 +1,6 @@
 import { css } from 'lit';
 
-var css_248z = css`.form-control-container{display:flex;flex-direction:column;gap:var(--sgds-form-gap-md)}.m-width-160{min-width:var(--sgds-dimension-160)}.m-width-256{min-width:var(--sgds-dimension-256)}.form-label{color:var(--sgds-form-color-default);font-size:var(--sgds-font-size-label-md);font-weight:var(--sgds-font-weight-semibold)}.form-control-group{align-items:center;background-color:var(--sgds-form-surface-default);border:var(--sgds-form-border-width-default) solid var(--sgds-border-color-default);border-radius:var(--input-border-radius,var(--sgds-form-border-radius-md));display:flex;gap:var(--sgds-form-gap-md);height:var(--sgds-dimension-48);justify-content:center;overflow:hidden;padding:0 var(--sgds-form-padding-x);transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;width:-webkit-fill-available;width:-moz-available}.form-control{appearance:none;background-clip:padding-box;background:none;border:none;color:var(--sgds-form-color-default);display:block;flex-grow:1;font-family:var(--sgds-font-family-brand);font-size:var(--sgds-font-size-label-md);line-height:var(--sgds-line-height-xs);min-width:0;outline:none;padding:0;width:100%}.form-clearable{color:var(--sgds-color-subtle);cursor:pointer}.form-control-group:not(.disabled):not(.is-invalid):not(.readonly):not(:focus-within):hover{outline:var(--sgds-form-border-width-thick) solid var(--sgds-border-color-emphasis);outline-offset:var(--sgds-form-outline-offset-focus)}.form-control-group:not(.disabled):not(.is-invalid):focus-within{outline:var(--sgds-form-outline-focus);outline-offset:var(--sgds-form-outline-offset-focus)}.form-control-container.disabled{opacity:var(--sgds-opacity-40)}.form-control-group.disabled{background-color:var(--sgds-form-surface-muted);cursor:not-allowed}.form-control-group.readonly{background-color:var(--sgds-form-surface-raised)}.form-control-group.is-invalid:not(.disabled){border:var(--sgds-form-border-width-default) solid var(--sgds-form-danger-border-color-default)}.form-control-group:not(.disabled).is-invalid:focus-within{outline:var(--sgds-border-width-2) solid var(--sgds-form-danger-color-default);outline-offset:var(--sgds-form-outline-offset-focus)}`;
+var css_248z = css`.form-control-container{display:flex;flex-direction:column;gap:var(--sgds-form-gap-md)}.m-width-160{min-width:var(--sgds-dimension-160)}.m-width-256{min-width:var(--sgds-dimension-256)}.form-label{color:var(--sgds-form-color-default);font-size:var(--sgds-font-size-label-md);font-weight:var(--sgds-font-weight-semibold)}.form-control-group{align-items:center;background-color:var(--sgds-form-surface-default);border:var(--sgds-form-border-width-default) solid var(--sgds-border-color-default);border-radius:var(--input-border-radius,var(--sgds-form-border-radius-md));display:flex;gap:var(--sgds-form-gap-xl);height:var(--sgds-dimension-48);justify-content:center;overflow:hidden;padding:0 var(--sgds-form-padding-x);transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;width:-webkit-fill-available;width:-moz-available}.form-control{appearance:none;background-clip:padding-box;background:none;border:none;color:var(--sgds-form-color-default);display:block;flex-grow:1;font-family:var(--sgds-font-family-brand);font-size:var(--sgds-font-size-label-md);line-height:var(--sgds-line-height-xs);min-width:0;outline:none;padding:0;width:100%}.form-clearable{color:var(--sgds-color-subtle);cursor:pointer}.form-control-group:not(.disabled):not(.is-invalid):not(.readonly):not(:focus-within):hover{outline:var(--sgds-form-border-width-thick) solid var(--sgds-border-color-emphasis);outline-offset:var(--sgds-form-outline-offset-focus)}.form-control-group:not(.disabled):not(.is-invalid):focus-within{outline:var(--sgds-form-outline-focus);outline-offset:var(--sgds-form-outline-offset-focus)}.form-control-container.disabled{opacity:var(--sgds-opacity-40)}.form-control-group.disabled{background-color:var(--sgds-form-surface-muted);cursor:not-allowed}.form-control-group.readonly{background-color:var(--sgds-form-surface-raised)}.form-control-group.is-invalid:not(.disabled){border:var(--sgds-form-border-width-default) solid var(--sgds-form-danger-border-color-default)}.form-control-group:not(.disabled).is-invalid:focus-within{outline:var(--sgds-border-width-2) solid var(--sgds-form-danger-color-default);outline-offset:var(--sgds-form-outline-offset-focus)}`;
 
 export { css_248z as default };
 //# sourceMappingURL=form-text-control.js.map

package/themes/blue.css

@@ -1,11 +1,11 @@
-:root{
---gt-color-100: #EFF5FC;
---gt-color-200: #CEE1F6;
---gt-color-300: #A0C5EE;
---gt-color-400: #73A9E5;
---gt-color-500: #4288D6;
---gt-color-600: #356DAC;
---gt-color-700: #285483;
---gt-color-800: #1E3E62;
---gt-color-900: #152B44;
-}
+:root {
+  --gt-color-100: #EFF5FC;
+  --gt-color-200: #CEE1F6;
+  --gt-color-300: #A0C5EE;
+  --gt-color-400: #73A9E5;
+  --gt-color-500: #4288D6;
+  --gt-color-600: #356DAC;
+  --gt-color-700: #285483;
+  --gt-color-800: #1E3E62;
+  --gt-color-900: #152B44;
+}

package/themes/cyan.css

@@ -1,11 +1,11 @@
 :root {
---gt-color-100: #E0F7FE;
---gt-color-200: #A7E9FB;
---gt-color-300: #47D1F6;
---gt-color-400: #00B3E2;
---gt-color-500: #0091B8;
---gt-color-600: #007493;
---gt-color-700: #005971;
---gt-color-800: #004355;
---gt-color-900: #002E3B;
-}
+  --gt-color-100: #E0F7FE;
+  --gt-color-200: #A7E9FB;
+  --gt-color-300: #47D1F6;
+  --gt-color-400: #00B3E2;
+  --gt-color-500: #0091B8;
+  --gt-color-600: #007493;
+  --gt-color-700: #005971;
+  --gt-color-800: #004355;
+  --gt-color-900: #002E3B;
+}

package/themes/gt/blue.css

@@ -1,11 +1,11 @@
-:root{
---gt-color-100: #EFF5FC;
---gt-color-200: #CEE1F6;
---gt-color-300: #A0C5EE;
---gt-color-400: #73A9E5;
---gt-color-500: #4288D6;
---gt-color-600: #356DAC;
---gt-color-700: #285483;
---gt-color-800: #1E3E62;
---gt-color-900: #152B44;
-}
+:root {
+  --gt-color-100: #EFF5FC;
+  --gt-color-200: #CEE1F6;
+  --gt-color-300: #A0C5EE;
+  --gt-color-400: #73A9E5;
+  --gt-color-500: #4288D6;
+  --gt-color-600: #356DAC;
+  --gt-color-700: #285483;
+  --gt-color-800: #1E3E62;
+  --gt-color-900: #152B44;
+}

package/themes/gt/cyan.css

@@ -1,11 +1,11 @@
 :root {
---gt-color-100: #E0F7FE;
---gt-color-200: #A7E9FB;
---gt-color-300: #47D1F6;
---gt-color-400: #00B3E2;
---gt-color-500: #0091B8;
---gt-color-600: #007493;
---gt-color-700: #005971;
---gt-color-800: #004355;
---gt-color-900: #002E3B;
-}
+  --gt-color-100: #E0F7FE;
+  --gt-color-200: #A7E9FB;
+  --gt-color-300: #47D1F6;
+  --gt-color-400: #00B3E2;
+  --gt-color-500: #0091B8;
+  --gt-color-600: #007493;
+  --gt-color-700: #005971;
+  --gt-color-800: #004355;
+  --gt-color-900: #002E3B;
+}

package/themes/gt/magenta.css

@@ -1,11 +1,11 @@
-:root{
---gt-color-100: #FBF2F9;
---gt-color-200: #F2D8ED;
---gt-color-300: #E5B2DC;
---gt-color-400: #D98BCB;
---gt-color-500: #C95EB7;
---gt-color-600: #B82EA0;
---gt-color-700: #8E247B;
---gt-color-800: #6A1B5D;
---gt-color-900: #4A1341;
-}
+:root {
+  --gt-color-100: #FBF2F9;
+  --gt-color-200: #F2D8ED;
+  --gt-color-300: #E5B2DC;
+  --gt-color-400: #D98BCB;
+  --gt-color-500: #C95EB7;
+  --gt-color-600: #B82EA0;
+  --gt-color-700: #8E247B;
+  --gt-color-800: #6A1B5D;
+  --gt-color-900: #4A1341;
+}

package/themes/gt/pink.css

@@ -1,11 +1,11 @@
-:root{
---gt-color-100: #FDF0F6;
---gt-color-200: #F9D6E4;
---gt-color-300: #F3AECB;
---gt-color-400: #ED84AF;
---gt-color-500: #E54D8C;
---gt-color-600: #C7286A;
---gt-color-700: #991F52;
---gt-color-800: #74173D;
---gt-color-900: #51102B;
-}
+:root {
+  --gt-color-100: #FDF0F6;
+  --gt-color-200: #F9D6E4;
+  --gt-color-300: #F3AECB;
+  --gt-color-400: #ED84AF;
+  --gt-color-500: #E54D8C;
+  --gt-color-600: #C7286A;
+  --gt-color-700: #991F52;
+  --gt-color-800: #74173D;
+  --gt-color-900: #51102B;
+}

package/themes/gt/purple.css

@@ -1,11 +1,11 @@
-:root{
-    --gt-color-100: #F6F3FB;
---gt-color-200: #E5DBF2;
---gt-color-300: #CEBAE7;
---gt-color-400: #B598DC;
---gt-color-500: #9A74CF;
---gt-color-600: #8055BB;
---gt-color-700: #634190;
---gt-color-800: #49306B;
---gt-color-900: #33214A;
-}
+:root {
+  --gt-color-100: #F6F3FB;
+  --gt-color-200: #E5DBF2;
+  --gt-color-300: #CEBAE7;
+  --gt-color-400: #B598DC;
+  --gt-color-500: #9A74CF;
+  --gt-color-600: #8055BB;
+  --gt-color-700: #634190;
+  --gt-color-800: #49306B;
+  --gt-color-900: #33214A;
+}

package/themes/gt/red.css

@@ -1,11 +1,11 @@
-:root{
---gt-color-100: #FEF0F1;
---gt-color-200: #FDD6D8;
---gt-color-300: #FBADB1;
---gt-color-400: #F88289;
---gt-color-500: #F5424B;
---gt-color-600: #CB2B33;
---gt-color-700: #9E2127;
---gt-color-800: #76191E;
---gt-color-900: #531115;
-}
+:root {
+  --gt-color-100: #FEF0F1;
+  --gt-color-200: #FDD6D8;
+  --gt-color-300: #FBADB1;
+  --gt-color-400: #F88289;
+  --gt-color-500: #F5424B;
+  --gt-color-600: #CB2B33;
+  --gt-color-700: #9E2127;
+  --gt-color-800: #76191E;
+  --gt-color-900: #531115;
+}

package/themes/magenta.css

@@ -1,11 +1,11 @@
-:root{
---gt-color-100: #FBF2F9;
---gt-color-200: #F2D8ED;
---gt-color-300: #E5B2DC;
---gt-color-400: #D98BCB;
---gt-color-500: #C95EB7;
---gt-color-600: #B82EA0;
---gt-color-700: #8E247B;
---gt-color-800: #6A1B5D;
---gt-color-900: #4A1341;
-}
+:root {
+  --gt-color-100: #FBF2F9;
+  --gt-color-200: #F2D8ED;
+  --gt-color-300: #E5B2DC;
+  --gt-color-400: #D98BCB;
+  --gt-color-500: #C95EB7;
+  --gt-color-600: #B82EA0;
+  --gt-color-700: #8E247B;
+  --gt-color-800: #6A1B5D;
+  --gt-color-900: #4A1341;
+}

package/themes/pink.css

@@ -1,11 +1,11 @@
-:root{
---gt-color-100: #FDF0F6;
---gt-color-200: #F9D6E4;
---gt-color-300: #F3AECB;
---gt-color-400: #ED84AF;
---gt-color-500: #E54D8C;
---gt-color-600: #C7286A;
---gt-color-700: #991F52;
---gt-color-800: #74173D;
---gt-color-900: #51102B;
-}
+:root {
+  --gt-color-100: #FDF0F6;
+  --gt-color-200: #F9D6E4;
+  --gt-color-300: #F3AECB;
+  --gt-color-400: #ED84AF;
+  --gt-color-500: #E54D8C;
+  --gt-color-600: #C7286A;
+  --gt-color-700: #991F52;
+  --gt-color-800: #74173D;
+  --gt-color-900: #51102B;
+}

package/themes/purple.css

@@ -1,11 +1,11 @@
-:root{
-    --gt-color-100: #F6F3FB;
---gt-color-200: #E5DBF2;
---gt-color-300: #CEBAE7;
---gt-color-400: #B598DC;
---gt-color-500: #9A74CF;
---gt-color-600: #8055BB;
---gt-color-700: #634190;
---gt-color-800: #49306B;
---gt-color-900: #33214A;
-}
+:root {
+  --gt-color-100: #F6F3FB;
+  --gt-color-200: #E5DBF2;
+  --gt-color-300: #CEBAE7;
+  --gt-color-400: #B598DC;
+  --gt-color-500: #9A74CF;
+  --gt-color-600: #8055BB;
+  --gt-color-700: #634190;
+  --gt-color-800: #49306B;
+  --gt-color-900: #33214A;
+}

package/themes/red.css

@@ -1,11 +1,11 @@
-:root{
---gt-color-100: #FEF0F1;
---gt-color-200: #FDD6D8;
---gt-color-300: #FBADB1;
---gt-color-400: #F88289;
---gt-color-500: #F5424B;
---gt-color-600: #CB2B33;
---gt-color-700: #9E2127;
---gt-color-800: #76191E;
---gt-color-900: #531115;
-}
+:root {
+  --gt-color-100: #FEF0F1;
+  --gt-color-200: #FDD6D8;
+  --gt-color-300: #FBADB1;
+  --gt-color-400: #F88289;
+  --gt-color-500: #F5424B;
+  --gt-color-600: #CB2B33;
+  --gt-color-700: #9E2127;
+  --gt-color-800: #76191E;
+  --gt-color-900: #531115;
+}

package/themes/root.css

@@ -12,6 +12,11 @@
   --sgds-product-primary-800: #3c2b8a;
   --sgds-product-primary-900: #2a1e61;
 
+  --sgds-gradient-1: linear-gradient(90deg, #0091B8 0%, #8055BB 100%);
+  --sgds-gradient-2: linear-gradient(90deg, #4288D6 0%, #B82EA0 100%);
+  --sgds-gradient-3: linear-gradient(90deg, #9A74CF 0%, #C7286A 100%);
+  --sgds-gradient-4: linear-gradient(90deg, #C95EB7 0%, #CB2B33 100%);
+
   /* Primitive - Purple Color */
   --sgds-purple-100: #fbf0fe;
   --sgds-purple-200: #f2d6fc;