@guardian/interactive-component-library 0.1.0-alpha.21 → 0.1.0-alpha.22

package/dist/style.css

@@ -681,24 +681,66 @@ button {
 .bg-color--left {
   background-color: var(--left) !important;
 }
+.bg-color--left--01 {
+  background-color: var(--left-01) !important;
+}
+.bg-color--left--02 {
+  background-color: var(--left-02) !important;
+}
 .bg-color--sd {
   background-color: var(--sd) !important;
 }
+.bg-color--sd--01 {
+  background-color: var(--sd-01) !important;
+}
+.bg-color--sd--02 {
+  background-color: var(--sd-02) !important;
+}
 .bg-color--greenefa {
   background-color: var(--greenefa) !important;
 }
+.bg-color--greenefa--01 {
+  background-color: var(--greenefa-01) !important;
+}
+.bg-color--greenefa--02 {
+  background-color: var(--greenefa-02) !important;
+}
 .bg-color--renew {
   background-color: var(--renew) !important;
 }
+.bg-color--renew--01 {
+  background-color: var(--renew-01) !important;
+}
+.bg-color--renew {
+  background-color: var(--renew-02) !important;
+}
 .bg-color--epp {
   background-color: var(--epp) !important;
 }
+.bg-color--epp--01 {
+  background-color: var(--epp-01) !important;
+}
+.bg-color--epp--02 {
+  background-color: var(--epp-02) !important;
+}
 .bg-color--ecr {
   background-color: var(--ecr) !important;
 }
+.bg-color--ecr--01 {
+  background-color: var(--ecr-01) !important;
+}
+.bg-color--ecr--02 {
+  background-color: var(--ecr-02) !important;
+}
 .bg-color--id {
   background-color: var(--id) !important;
 }
+.bg-color--id--01 {
+  background-color: var(--id-01) !important;
+}
+.bg-color--id--02 {
+  background-color: var(--id-02) !important;
+}
 .bg-color--ni {
   background-color: var(--ni) !important;
 }
@@ -736,6 +778,9 @@ button {
 .fill-color--other {
   fill: var(--other) !important;
 }
+.fill-color--undeclared {
+  fill: var(--undeclared) !important;
+}
 /* STROKE-COLOR --------------------------------------------------- */
 .stroke-color--left {
   stroke: var(--left) !important;
@@ -764,6 +809,9 @@ button {
 .stroke-color--other {
   stroke: var(--other) !important;
 }
+.stroke-color--undeclared {
+  stroke: var(--undeclared) !important;
+}
 /* COLOR ----------------------------------------------------------- */
 .color--left {
   color: var(--left) !important;
@@ -792,6 +840,9 @@ button {
 .color--other {
   color: var(--other) !important;
 }
+.color--undeclared {
+  color: var(--undeclared) !important;
+}
 /* BORDER-COLOR ----------------------------------------------------- */
 .border-color--left {
   border-color: var(--left) !important;
@@ -820,6 +871,9 @@ button {
 .border-color--other {
   border-color: var(--other) !important;
 }
+.border-color--undeclared {
+  border-color: var(--undeclared) !important;
+}
 /* BEFORE-ELEMENT-COLOR ----------------------------------------------------- */
 .before-color--left:before {
   background-color: var(--left) !important;
@@ -848,6 +902,9 @@ button {
 .before-color--other:before {
   background-color: var(--other) !important;
 }
+.before-color--undeclared:before {
+  background-color: var(--undeclared) !important;
+}
 body {
   --border-divider-color: #DCDCDC;
   --primary-text-color: #121212;
@@ -897,14 +954,28 @@ body {
   --change: #333;
   --undeclared: #E7E7E7;
   --left: #8B0000;
+  --left-01: #e3b0a3;
+  --left-02: #bc634f;
   --sd: #C70000;
+  --sd-01:#fbb8a6;
+  --sd-02:#e77054;
   --greenefa: #39A566;
+  --greenefa-01: #c1e1ca;
+  --greenefa-02: #82c397;
   --renew: #FF7F0F;
-  --epp: #13bece;
+  --renew-01: #ffd8ba;
+  --renew-02: #ffaf71;
+  --epp: #3dBBE2;
+  --epp-01: #cae8f5;
+  --epp-02: #8fd1ec;
   --ecr: #0079B7;
+  --ecr-01: #bdcfe7;
+  --ecr-02: #77a2ce;
   --id:#DC559D;
-  --ni: #333333;
-  --other: #707070;
+  --id-01:#edc0d3;
+  --id-02:#d681a9;
+  --ni: #606060;
+  --other: #a0a0a0;
   --undeclared: #ededed;
 }
 @media (prefers-color-scheme: dark) {
@@ -956,14 +1027,28 @@ body {
     --change: #494949;
     --undeclared: #494949;
     --left: #8B0000;
-    --sd: #dc2e1c;
+    --left-01: #e3b0a3;
+    --left-02: #bc634f;
+    --sd: #C70000;
+    --sd-01:#fbb8a6;
+    --sd-02:#e77054;
     --greenefa: #39A566;
+    --greenefa-01: #c1e1ca;
+    --greenefa-02: #82c397;
     --renew: #FF7F0F;
-    --epp: #3DBBE2;
-    --ecr: #009ae1;
-    --id: #DC559D;
+    --renew-01: #ffd8ba;
+    --renew-02: #ffaf71;
+    --epp: #3dBBE2;
+    --epp-01: #cae8f5;
+    --epp-02: #8fd1ec;
+    --ecr: #0079B7;
+    --ecr-01: #bdcfe7;
+    --ecr-02: #77a2ce;
+    --id:#DC559D;
+    --id-01:#edc0d3;
+    --id-02:#d681a9;
     --ni: #A1A1A1;
-    --other: #707070;
+    --other: #a0a0a0;
     --undeclared: #ededed;
   }
 }._svg_b5io0_1 {
@@ -1439,45 +1524,6 @@ body.android {
 ._axisLabel_gj7pr_37 {
   transform: translateY(var(--space-1));
 }
-._transitionContainer_1gzlr_1 {
-  pointer-events: none;
-  position: fixed;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  background-color: rgba(0, 0, 0, 0.1);
-  backdrop-filter: blur(4px);
-  transition: all 300ms ease-in-out;
-}
-
-._modalBox_1gzlr_13 {
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  transition: all 300ms ease-in-out;
-}
-
-._enter_1gzlr_21,
-._exitDone_1gzlr_22 {
-  background-color: transparent;
-  backdrop-filter: none;
-
-  ._modalBox_1gzlr_13 {
-    transform: translateY(100%);
-  }
-}
-
-._enterActive_1gzlr_31,
-._exit_1gzlr_22 {
-  background-color: rgba(0, 0, 0, 0.1);
-  backdrop-filter: blur(4px);
-
-  ._modalBox_1gzlr_13 {
-    transform: translateY(0);
-  }
-}
 ._tooltip_11t5d_1 {
   pointer-events: none;
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@guardian/interactive-component-library",
   "private": false,
-  "version": "v0.1.0-alpha.21",
+  "version": "v0.1.0-alpha.22",
   "packageManager": "pnpm@8.4.0",
   "repository": {
     "type": "git",