@ndla/preset-panda 0.0.49 → 0.0.51

package/dist/styles.css

@@ -430,33 +430,55 @@
     --colors-purple-800: #823CC8;
     --colors-purple-900: #5E1F9E;
     --colors-purple-950: #40116F;
-    --colors-yellow-50: #FFFCF0;
-    --colors-yellow-100: #FFF9DB;
-    --colors-yellow-200: #FFF7CC;
-    --colors-yellow-300: #FFF1A8;
-    --colors-yellow-400: #FFED8F;
-    --colors-yellow-500: #FFE767;
-    --colors-yellow-600: #FFDD33;
-    --colors-yellow-700: #FFCC00;
-    --colors-yellow-800: #FFB700;
-    --colors-yellow-900: #FAA700;
-    --colors-yellow-950: #F08C00;
-    --colors-yellow-1000: #CC8302;
-    --colors-yellow-1100: #A25C06;
-    --colors-yellow-1200: #86480D;
-    --colors-yellow-1300: #7A3701;
-    --colors-yellow-1400: #481A00;
-    --colors-green-50: #EDFDF2;
-    --colors-green-100: #DAFBE5;
-    --colors-green-200: #C3F8D5;
-    --colors-green-300: #A7F6C1;
-    --colors-green-400: #81F3A7;
-    --colors-green-500: #63F293;
-    --colors-green-600: #42D774;
-    --colors-green-700: #2CAF58;
-    --colors-green-800: #238042;
-    --colors-green-900: #174F2A;
-    --colors-green-950: #11361E;
+    --colors-light-yellow-50: #FFFCF0;
+    --colors-light-yellow-100: #FFF9DB;
+    --colors-light-yellow-200: #FFF7CC;
+    --colors-light-yellow-300: #FFF1A8;
+    --colors-light-yellow-400: #FFED8F;
+    --colors-light-yellow-500: #FFE767;
+    --colors-light-yellow-600: #FFDD33;
+    --colors-light-yellow-700: #FFCC00;
+    --colors-light-yellow-800: #FFB700;
+    --colors-light-yellow-900: #FAA700;
+    --colors-light-yellow-950: #F08C00;
+    --colors-light-yellow-1000: #CC8302;
+    --colors-light-yellow-1100: #A25C06;
+    --colors-light-yellow-1200: #86480D;
+    --colors-light-yellow-1300: #7A3701;
+    --colors-light-yellow-1400: #481A00;
+    --colors-yellow-50: #FFF9E5;
+    --colors-yellow-100: #FCEBB1;
+    --colors-yellow-200: #FFE285;
+    --colors-yellow-300: #FFCE2E;
+    --colors-yellow-400: #FFC300;
+    --colors-yellow-500: #E5AF00;
+    --colors-yellow-600: #BA8E00;
+    --colors-yellow-700: #AD8500;
+    --colors-yellow-800: #8F6D00;
+    --colors-yellow-900: #6B5200;
+    --colors-yellow-950: #523E00;
+    --colors-light-green-50: #EDFDF2;
+    --colors-light-green-100: #DAFBE5;
+    --colors-light-green-200: #C3F8D5;
+    --colors-light-green-300: #A7F6C1;
+    --colors-light-green-400: #81F3A7;
+    --colors-light-green-500: #63F293;
+    --colors-light-green-600: #42D774;
+    --colors-light-green-700: #2CAF58;
+    --colors-light-green-800: #238042;
+    --colors-light-green-900: #174F2A;
+    --colors-light-green-950: #11361E;
+    --colors-green-50: #F3FCF5;
+    --colors-green-100: #CCF1D6;
+    --colors-green-200: #99DEAD;
+    --colors-green-300: #66C786;
+    --colors-green-400: #33AA5F;
+    --colors-green-500: #06893A;
+    --colors-green-600: #007C2E;
+    --colors-green-700: #006A23;
+    --colors-green-800: #005519;
+    --colors-green-900: #003B0F;
+    --colors-green-950: #002108;
     --colors-pink-50: #FEF2F3;
     --colors-pink-100: #FDECEF;
     --colors-pink-200: #FCDEE3;
@@ -468,6 +490,17 @@
     --colors-pink-800: #A82447;
     --colors-pink-900: #761935;
     --colors-pink-950: #4A1124;
+    --colors-red-50: #FFE6E6;
+    --colors-red-100: #FFC2C2;
+    --colors-red-200: #F68282;
+    --colors-red-300: #F25C5C;
+    --colors-red-400: #DE2E2E;
+    --colors-red-500: #C30000;
+    --colors-red-600: #AD0000;
+    --colors-red-700: #8C0000;
+    --colors-red-800: #5C0000;
+    --colors-red-900: #260000;
+    --colors-red-950: #1A0000;
     --colors-white: #FFFFFF;
     --colors-primary: #2D1B62;
     --easings-default: cubic-bezier(0.17, 0.04, 0.03, 0.94);
@@ -711,12 +744,14 @@
     --colors-text-on-action: var(--colors-white);
     --colors-text-link: var(--colors-blue-800);
     --colors-text-link-visited: var(--colors-purple-900);
-    --colors-text-error: var(--colors-pink-800);
+    --colors-text-error: var(--colors-red-600);
     --colors-text-disabled: var(--colors-grey-400);
     --colors-icon-default: var(--colors-grey-950);
     --colors-icon-strong: var(--colors-primary);
     --colors-icon-on-action: var(--colors-white);
     --colors-icon-subtle: var(--colors-grey-700);
+    --colors-icon-warning: var(--colors-yellow-600);
+    --colors-icon-danger: var(--colors-red-500);
     --colors-surface-brand-1: var(--colors-purple-500);
     --colors-surface-brand-1-subtle: var(--colors-purple-100);
     --colors-surface-brand-1-moderate: var(--colors-purple-300);
@@ -726,14 +761,14 @@
     --colors-surface-brand-2-moderate: var(--colors-blue-100);
     --colors-surface-brand-2-bold: var(--colors-blue-800);
     --colors-surface-brand-2-strong: var(--colors-blue-900);
-    --colors-surface-brand-3: var(--colors-green-500);
-    --colors-surface-brand-3-subtle: var(--colors-green-100);
-    --colors-surface-brand-3-moderate: var(--colors-green-300);
-    --colors-surface-brand-3-strong: var(--colors-green-900);
-    --colors-surface-brand-4: var(--colors-yellow-500);
-    --colors-surface-brand-4-subtle: var(--colors-yellow-100);
-    --colors-surface-brand-4-moderate: var(--colors-yellow-300);
-    --colors-surface-brand-4-strong: var(--colors-yellow-1100);
+    --colors-surface-brand-3: var(--colors-light-green-500);
+    --colors-surface-brand-3-subtle: var(--colors-light-green-100);
+    --colors-surface-brand-3-moderate: var(--colors-light-green-300);
+    --colors-surface-brand-3-strong: var(--colors-light-green-900);
+    --colors-surface-brand-4: var(--colors-light-yellow-500);
+    --colors-surface-brand-4-subtle: var(--colors-light-yellow-100);
+    --colors-surface-brand-4-moderate: var(--colors-light-yellow-300);
+    --colors-surface-brand-4-strong: var(--colors-light-yellow-1100);
     --colors-surface-brand-5: var(--colors-pink-500);
     --colors-surface-brand-5-subtle: var(--colors-pink-100);
     --colors-surface-brand-5-moderate: var(--colors-pink-300);
@@ -752,9 +787,9 @@
     --colors-surface-action-hover: var(--colors-purple-900);
     --colors-surface-action-active: var(--colors-purple-950);
     --colors-surface-action-selected: var(--colors-purple-800);
-    --colors-surface-action-my-ndla: var(--colors-yellow-300);
-    --colors-surface-action-my-ndla-hover: var(--colors-yellow-500);
-    --colors-surface-action-my-ndla-current: var(--colors-yellow-700);
+    --colors-surface-action-my-ndla: var(--colors-light-yellow-300);
+    --colors-surface-action-my-ndla-hover: var(--colors-light-yellow-500);
+    --colors-surface-action-my-ndla-current: var(--colors-light-yellow-700);
     --colors-surface-action-brand-1: var(--colors-purple-50);
     --colors-surface-action-brand-1-hover: var(--colors-purple-100);
     --colors-surface-action-brand-1-active: var(--colors-purple-300);
@@ -767,41 +802,41 @@
     --colors-surface-action-subtle-hover-strong: var(--colors-purple-400);
     --colors-surface-action-subtle-active: var(--colors-purple-300);
     --colors-surface-action-subtle-selected: var(--colors-purple-900);
-    --colors-surface-success: var(--colors-green-800);
-    --colors-surface-success-hover: var(--colors-green-900);
-    --colors-surface-success-selected: var(--colors-green-950);
-    --colors-surface-success-active: var(--colors-green-800);
-    --colors-surface-success-subtle: var(--colors-green-100);
-    --colors-surface-success-subtle-hover: var(--colors-green-300);
-    --colors-surface-success-subtle-active: var(--colors-green-500);
-    --colors-surface-warning: var(--colors-yellow-600);
-    --colors-surface-warning-hover: var(--colors-yellow-800);
-    --colors-surface-warning-active: var(--colors-yellow-1200);
-    --colors-surface-warning-subtle: var(--colors-yellow-100);
-    --colors-surface-warning-subtle-hover: var(--colors-yellow-300);
-    --colors-surface-warning-subtle-active: var(--colors-yellow-400);
-    --colors-surface-danger: var(--colors-pink-700);
-    --colors-surface-danger-hover: var(--colors-pink-800);
-    --colors-surface-danger-selected: var(--colors-pink-900);
-    --colors-surface-danger-active: var(--colors-pink-950);
-    --colors-surface-danger-subtle: var(--colors-pink-100);
-    --colors-surface-danger-subtle-hover: var(--colors-pink-300);
-    --colors-surface-danger-subtle-active: var(--colors-pink-500);
-    --colors-surface-error: var(--colors-pink-800);
-    --colors-surface-error-hover: var(--colors-pink-900);
-    --colors-surface-error-active: var(--colors-pink-950);
-    --colors-surface-error-subtle: var(--colors-pink-100);
-    --colors-surface-error-subtle-hover: var(--colors-pink-300);
-    --colors-surface-error-subtle-active: var(--colors-pink-500);
+    --colors-surface-success: var(--colors-green-500);
+    --colors-surface-success-hover: var(--colors-green-700);
+    --colors-surface-success-selected: var(--colors-green-900);
+    --colors-surface-success-active: var(--colors-green-700);
+    --colors-surface-success-subtle: var(--colors-green-50);
+    --colors-surface-success-subtle-hover: var(--colors-green-100);
+    --colors-surface-success-subtle-active: var(--colors-green-300);
+    --colors-surface-warning: var(--colors-yellow-400);
+    --colors-surface-warning-hover: var(--colors-yellow-500);
+    --colors-surface-warning-active: var(--colors-yellow-700);
+    --colors-surface-warning-subtle: var(--colors-yellow-50);
+    --colors-surface-warning-subtle-hover: var(--colors-yellow-100);
+    --colors-surface-warning-subtle-active: var(--colors-yellow-200);
+    --colors-surface-danger: var(--colors-red-500);
+    --colors-surface-danger-hover: var(--colors-red-700);
+    --colors-surface-danger-selected: var(--colors-red-800);
+    --colors-surface-danger-active: var(--colors-red-900);
+    --colors-surface-danger-subtle: var(--colors-red-50);
+    --colors-surface-danger-subtle-hover: var(--colors-red-100);
+    --colors-surface-danger-subtle-active: var(--colors-red-200);
+    --colors-surface-error: var(--colors-pink-500);
+    --colors-surface-error-hover: var(--colors-pink-700);
+    --colors-surface-error-active: var(--colors-pink-900);
+    --colors-surface-error-subtle: var(--colors-red-50);
+    --colors-surface-error-subtle-hover: var(--colors-pink-100);
+    --colors-surface-error-subtle-active: var(--colors-pink-200);
     --colors-surface-subtle: var(--colors-grey-50);
     --colors-surface-subtle-selected: var(--colors-grey-100);
     --colors-stroke-default: var(--colors-primary);
     --colors-stroke-hover: var(--colors-purple-800);
     --colors-stroke-subtle: var(--colors-grey-500);
-    --colors-stroke-success: var(--colors-green-900);
+    --colors-stroke-success: var(--colors-light-green-900);
     --colors-stroke-info: var(--colors-grey-500);
-    --colors-stroke-warning: var(--colors-yellow-1200);
-    --colors-stroke-error: var(--colors-pink-800);
+    --colors-stroke-warning: var(--colors-yellow-600);
+    --colors-stroke-error: var(--colors-red-600);
     --colors-stroke-disabled: var(--colors-grey-300);
     --colors-stroke-discrete: var(--colors-grey-300);
 }

package/es/colors.js

@@ -113,7 +113,7 @@ export const colors = defineTokens.colors({
       value: "#40116F"
     }
   },
-  yellow: {
+  lightYellow: {
     50: {
       value: "#FFFCF0"
     },
@@ -163,7 +163,42 @@ export const colors = defineTokens.colors({
       value: "#481A00"
     }
   },
-  green: {
+  yellow: {
+    50: {
+      value: "#FFF9E5"
+    },
+    100: {
+      value: "#FCEBB1"
+    },
+    200: {
+      value: "#FFE285"
+    },
+    300: {
+      value: "#FFCE2E"
+    },
+    400: {
+      value: "#FFC300"
+    },
+    500: {
+      value: "#E5AF00"
+    },
+    600: {
+      value: "#BA8E00"
+    },
+    700: {
+      value: "#AD8500"
+    },
+    800: {
+      value: "#8F6D00"
+    },
+    900: {
+      value: "#6B5200"
+    },
+    950: {
+      value: "#523E00"
+    }
+  },
+  lightGreen: {
     50: {
       value: "#EDFDF2"
     },
@@ -198,6 +233,41 @@ export const colors = defineTokens.colors({
       value: "#11361E"
     }
   },
+  green: {
+    50: {
+      value: "#F3FCF5"
+    },
+    100: {
+      value: "#CCF1D6"
+    },
+    200: {
+      value: "#99DEAD"
+    },
+    300: {
+      value: "#66C786"
+    },
+    400: {
+      value: "#33AA5F"
+    },
+    500: {
+      value: "#06893A"
+    },
+    600: {
+      value: "#007C2E"
+    },
+    700: {
+      value: "#006A23"
+    },
+    800: {
+      value: "#005519"
+    },
+    900: {
+      value: "#003B0F"
+    },
+    950: {
+      value: "#002108"
+    }
+  },
   pink: {
     50: {
       value: "#FEF2F3"
@@ -233,6 +303,41 @@ export const colors = defineTokens.colors({
       value: "#4A1124"
     }
   },
+  red: {
+    50: {
+      value: "#FFE6E6"
+    },
+    100: {
+      value: "#FFC2C2"
+    },
+    200: {
+      value: "#F68282"
+    },
+    300: {
+      value: "#F25C5C"
+    },
+    400: {
+      value: "#DE2E2E"
+    },
+    500: {
+      value: "#C30000"
+    },
+    600: {
+      value: "#AD0000"
+    },
+    700: {
+      value: "#8C0000"
+    },
+    800: {
+      value: "#5C0000"
+    },
+    900: {
+      value: "#260000"
+    },
+    950: {
+      value: "#1A0000"
+    }
+  },
   white: {
     value: "#FFFFFF"
   },

package/es/semanticTokens.js

@@ -207,7 +207,7 @@ export const semanticTokens = defineSemanticTokens({
         value: "{colors.purple.900}"
       },
       error: {
-        value: "{colors.pink.800}"
+        value: "{colors.red.600}"
       },
       disabled: {
         value: "{colors.grey.400}"
@@ -225,6 +225,12 @@ export const semanticTokens = defineSemanticTokens({
       },
       subtle: {
         value: "{colors.grey.700}"
+      },
+      warning: {
+        value: "{colors.yellow.600}"
+      },
+      danger: {
+        value: "{colors.red.500}"
       }
     },
     surface: {
@@ -262,30 +268,30 @@ export const semanticTokens = defineSemanticTokens({
         },
         3: {
           DEFAULT: {
-            value: "{colors.green.500}"
+            value: "{colors.lightGreen.500}"
           },
           subtle: {
-            value: "{colors.green.100}"
+            value: "{colors.lightGreen.100}"
           },
           moderate: {
-            value: "{colors.green.300}"
+            value: "{colors.lightGreen.300}"
           },
           strong: {
-            value: "{colors.green.900}"
+            value: "{colors.lightGreen.900}"
           }
         },
         4: {
           DEFAULT: {
-            value: "{colors.yellow.500}"
+            value: "{colors.lightYellow.500}"
           },
           subtle: {
-            value: "{colors.yellow.100}"
+            value: "{colors.lightYellow.100}"
           },
           moderate: {
-            value: "{colors.yellow.300}"
+            value: "{colors.lightYellow.300}"
           },
           strong: {
-            value: "{colors.yellow.1100}"
+            value: "{colors.lightYellow.1100}"
           }
         },
         5: {
@@ -352,13 +358,13 @@ export const semanticTokens = defineSemanticTokens({
         },
         myNdla: {
           DEFAULT: {
-            value: "{colors.yellow.300}"
+            value: "{colors.lightYellow.300}"
           },
           hover: {
-            value: "{colors.yellow.500}"
+            value: "{colors.lightYellow.500}"
           },
           current: {
-            value: "{colors.yellow.700}"
+            value: "{colors.lightYellow.700}"
           }
         },
         brand: {
@@ -410,96 +416,96 @@ export const semanticTokens = defineSemanticTokens({
       },
       success: {
         DEFAULT: {
-          value: "{colors.green.800}"
+          value: "{colors.green.500}"
         },
         hover: {
-          value: "{colors.green.900}"
+          value: "{colors.green.700}"
         },
         selected: {
-          value: "{colors.green.950}"
+          value: "{colors.green.900}"
         },
         active: {
-          value: "{colors.green.800}"
+          value: "{colors.green.700}"
         }
       },
       successSubtle: {
         DEFAULT: {
-          value: "{colors.green.100}"
+          value: "{colors.green.50}"
         },
         hover: {
-          value: "{colors.green.300}"
+          value: "{colors.green.100}"
         },
         active: {
-          value: "{colors.green.500}"
+          value: "{colors.green.300}"
         }
       },
       warning: {
         DEFAULT: {
-          value: "{colors.yellow.600}"
+          value: "{colors.yellow.400}"
         },
         hover: {
-          value: "{colors.yellow.800}"
+          value: "{colors.yellow.500}"
         },
         active: {
-          value: "{colors.yellow.1200}"
+          value: "{colors.yellow.700}"
         }
       },
       warningSubtle: {
         DEFAULT: {
-          value: "{colors.yellow.100}"
+          value: "{colors.yellow.50}"
         },
         hover: {
-          value: "{colors.yellow.300}"
+          value: "{colors.yellow.100}"
         },
         active: {
-          value: "{colors.yellow.400}"
+          value: "{colors.yellow.200}"
         }
       },
       danger: {
         DEFAULT: {
-          value: "{colors.pink.700}"
+          value: "{colors.red.500}"
         },
         hover: {
-          value: "{colors.pink.800}"
+          value: "{colors.red.700}"
         },
         selected: {
-          value: "{colors.pink.900}"
+          value: "{colors.red.800}"
         },
         active: {
-          value: "{colors.pink.950}"
+          value: "{colors.red.900}"
         }
       },
       dangerSubtle: {
         DEFAULT: {
-          value: "{colors.pink.100}"
+          value: "{colors.red.50}"
         },
         hover: {
-          value: "{colors.pink.300}"
+          value: "{colors.red.100}"
         },
         active: {
-          value: "{colors.pink.500}"
+          value: "{colors.red.200}"
         }
       },
       error: {
         DEFAULT: {
-          value: "{colors.pink.800}"
+          value: "{colors.pink.500}"
         },
         hover: {
-          value: "{colors.pink.900}"
+          value: "{colors.pink.700}"
         },
         active: {
-          value: "{colors.pink.950}"
+          value: "{colors.pink.900}"
         }
       },
       errorSubtle: {
         DEFAULT: {
-          value: "{colors.pink.100}"
+          value: "{colors.red.50}"
         },
         hover: {
-          value: "{colors.pink.300}"
+          value: "{colors.pink.100}"
         },
         active: {
-          value: "{colors.pink.500}"
+          value: "{colors.pink.200}"
         }
       },
       subtle: {
@@ -522,16 +528,16 @@ export const semanticTokens = defineSemanticTokens({
         value: "{colors.grey.500}"
       },
       success: {
-        value: "{colors.green.900}"
+        value: "{colors.lightGreen.900}"
       },
       info: {
         value: "{colors.grey.500}"
       },
       warning: {
-        value: "{colors.yellow.1200}"
+        value: "{colors.yellow.600}"
       },
       error: {
-        value: "{colors.pink.800}"
+        value: "{colors.red.600}"
       },
       disabled: {
         value: "{colors.grey.300}"

package/lib/colors.d.ts

@@ -111,7 +111,7 @@ export declare const colors: {
             value: string;
         };
     };
-    yellow: {
+    lightYellow: {
         50: {
             value: string;
         };
@@ -161,6 +161,76 @@ export declare const colors: {
             value: string;
         };
     };
+    yellow: {
+        50: {
+            value: string;
+        };
+        100: {
+            value: string;
+        };
+        200: {
+            value: string;
+        };
+        300: {
+            value: string;
+        };
+        400: {
+            value: string;
+        };
+        500: {
+            value: string;
+        };
+        600: {
+            value: string;
+        };
+        700: {
+            value: string;
+        };
+        800: {
+            value: string;
+        };
+        900: {
+            value: string;
+        };
+        950: {
+            value: string;
+        };
+    };
+    lightGreen: {
+        50: {
+            value: string;
+        };
+        100: {
+            value: string;
+        };
+        200: {
+            value: string;
+        };
+        300: {
+            value: string;
+        };
+        400: {
+            value: string;
+        };
+        500: {
+            value: string;
+        };
+        600: {
+            value: string;
+        };
+        700: {
+            value: string;
+        };
+        800: {
+            value: string;
+        };
+        900: {
+            value: string;
+        };
+        950: {
+            value: string;
+        };
+    };
     green: {
         50: {
             value: string;
@@ -231,6 +301,41 @@ export declare const colors: {
             value: string;
         };
     };
+    red: {
+        50: {
+            value: string;
+        };
+        100: {
+            value: string;
+        };
+        200: {
+            value: string;
+        };
+        300: {
+            value: string;
+        };
+        400: {
+            value: string;
+        };
+        500: {
+            value: string;
+        };
+        600: {
+            value: string;
+        };
+        700: {
+            value: string;
+        };
+        800: {
+            value: string;
+        };
+        900: {
+            value: string;
+        };
+        950: {
+            value: string;
+        };
+    };
     white: {
         value: string;
     };

package/lib/colors.js

@@ -119,7 +119,7 @@ const colors = exports.colors = _dev.defineTokens.colors({
       value: "#40116F"
     }
   },
-  yellow: {
+  lightYellow: {
     50: {
       value: "#FFFCF0"
     },
@@ -169,7 +169,42 @@ const colors = exports.colors = _dev.defineTokens.colors({
       value: "#481A00"
     }
   },
-  green: {
+  yellow: {
+    50: {
+      value: "#FFF9E5"
+    },
+    100: {
+      value: "#FCEBB1"
+    },
+    200: {
+      value: "#FFE285"
+    },
+    300: {
+      value: "#FFCE2E"
+    },
+    400: {
+      value: "#FFC300"
+    },
+    500: {
+      value: "#E5AF00"
+    },
+    600: {
+      value: "#BA8E00"
+    },
+    700: {
+      value: "#AD8500"
+    },
+    800: {
+      value: "#8F6D00"
+    },
+    900: {
+      value: "#6B5200"
+    },
+    950: {
+      value: "#523E00"
+    }
+  },
+  lightGreen: {
     50: {
       value: "#EDFDF2"
     },
@@ -204,6 +239,41 @@ const colors = exports.colors = _dev.defineTokens.colors({
       value: "#11361E"
     }
   },
+  green: {
+    50: {
+      value: "#F3FCF5"
+    },
+    100: {
+      value: "#CCF1D6"
+    },
+    200: {
+      value: "#99DEAD"
+    },
+    300: {
+      value: "#66C786"
+    },
+    400: {
+      value: "#33AA5F"
+    },
+    500: {
+      value: "#06893A"
+    },
+    600: {
+      value: "#007C2E"
+    },
+    700: {
+      value: "#006A23"
+    },
+    800: {
+      value: "#005519"
+    },
+    900: {
+      value: "#003B0F"
+    },
+    950: {
+      value: "#002108"
+    }
+  },
   pink: {
     50: {
       value: "#FEF2F3"
@@ -239,6 +309,41 @@ const colors = exports.colors = _dev.defineTokens.colors({
       value: "#4A1124"
     }
   },
+  red: {
+    50: {
+      value: "#FFE6E6"
+    },
+    100: {
+      value: "#FFC2C2"
+    },
+    200: {
+      value: "#F68282"
+    },
+    300: {
+      value: "#F25C5C"
+    },
+    400: {
+      value: "#DE2E2E"
+    },
+    500: {
+      value: "#C30000"
+    },
+    600: {
+      value: "#AD0000"
+    },
+    700: {
+      value: "#8C0000"
+    },
+    800: {
+      value: "#5C0000"
+    },
+    900: {
+      value: "#260000"
+    },
+    950: {
+      value: "#1A0000"
+    }
+  },
   white: {
     value: "#FFFFFF"
   },

package/lib/semanticTokens.d.ts

@@ -224,6 +224,12 @@ export declare const semanticTokens: {
             subtle: {
                 value: string;
             };
+            warning: {
+                value: string;
+            };
+            danger: {
+                value: string;
+            };
         };
         surface: {
             brand: {

package/lib/semanticTokens.js

@@ -213,7 +213,7 @@ const semanticTokens = exports.semanticTokens = (0, _dev.defineSemanticTokens)({
         value: "{colors.purple.900}"
       },
       error: {
-        value: "{colors.pink.800}"
+        value: "{colors.red.600}"
       },
       disabled: {
         value: "{colors.grey.400}"
@@ -231,6 +231,12 @@ const semanticTokens = exports.semanticTokens = (0, _dev.defineSemanticTokens)({
       },
       subtle: {
         value: "{colors.grey.700}"
+      },
+      warning: {
+        value: "{colors.yellow.600}"
+      },
+      danger: {
+        value: "{colors.red.500}"
       }
     },
     surface: {
@@ -268,30 +274,30 @@ const semanticTokens = exports.semanticTokens = (0, _dev.defineSemanticTokens)({
         },
         3: {
           DEFAULT: {
-            value: "{colors.green.500}"
+            value: "{colors.lightGreen.500}"
           },
           subtle: {
-            value: "{colors.green.100}"
+            value: "{colors.lightGreen.100}"
           },
           moderate: {
-            value: "{colors.green.300}"
+            value: "{colors.lightGreen.300}"
           },
           strong: {
-            value: "{colors.green.900}"
+            value: "{colors.lightGreen.900}"
           }
         },
         4: {
           DEFAULT: {
-            value: "{colors.yellow.500}"
+            value: "{colors.lightYellow.500}"
           },
           subtle: {
-            value: "{colors.yellow.100}"
+            value: "{colors.lightYellow.100}"
           },
           moderate: {
-            value: "{colors.yellow.300}"
+            value: "{colors.lightYellow.300}"
           },
           strong: {
-            value: "{colors.yellow.1100}"
+            value: "{colors.lightYellow.1100}"
           }
         },
         5: {
@@ -358,13 +364,13 @@ const semanticTokens = exports.semanticTokens = (0, _dev.defineSemanticTokens)({
         },
         myNdla: {
           DEFAULT: {
-            value: "{colors.yellow.300}"
+            value: "{colors.lightYellow.300}"
           },
           hover: {
-            value: "{colors.yellow.500}"
+            value: "{colors.lightYellow.500}"
           },
           current: {
-            value: "{colors.yellow.700}"
+            value: "{colors.lightYellow.700}"
           }
         },
         brand: {
@@ -416,96 +422,96 @@ const semanticTokens = exports.semanticTokens = (0, _dev.defineSemanticTokens)({
       },
       success: {
         DEFAULT: {
-          value: "{colors.green.800}"
+          value: "{colors.green.500}"
         },
         hover: {
-          value: "{colors.green.900}"
+          value: "{colors.green.700}"
         },
         selected: {
-          value: "{colors.green.950}"
+          value: "{colors.green.900}"
         },
         active: {
-          value: "{colors.green.800}"
+          value: "{colors.green.700}"
         }
       },
       successSubtle: {
         DEFAULT: {
-          value: "{colors.green.100}"
+          value: "{colors.green.50}"
         },
         hover: {
-          value: "{colors.green.300}"
+          value: "{colors.green.100}"
         },
         active: {
-          value: "{colors.green.500}"
+          value: "{colors.green.300}"
         }
       },
       warning: {
         DEFAULT: {
-          value: "{colors.yellow.600}"
+          value: "{colors.yellow.400}"
         },
         hover: {
-          value: "{colors.yellow.800}"
+          value: "{colors.yellow.500}"
         },
         active: {
-          value: "{colors.yellow.1200}"
+          value: "{colors.yellow.700}"
         }
       },
       warningSubtle: {
         DEFAULT: {
-          value: "{colors.yellow.100}"
+          value: "{colors.yellow.50}"
         },
         hover: {
-          value: "{colors.yellow.300}"
+          value: "{colors.yellow.100}"
         },
         active: {
-          value: "{colors.yellow.400}"
+          value: "{colors.yellow.200}"
         }
       },
       danger: {
         DEFAULT: {
-          value: "{colors.pink.700}"
+          value: "{colors.red.500}"
         },
         hover: {
-          value: "{colors.pink.800}"
+          value: "{colors.red.700}"
         },
         selected: {
-          value: "{colors.pink.900}"
+          value: "{colors.red.800}"
         },
         active: {
-          value: "{colors.pink.950}"
+          value: "{colors.red.900}"
         }
       },
       dangerSubtle: {
         DEFAULT: {
-          value: "{colors.pink.100}"
+          value: "{colors.red.50}"
         },
         hover: {
-          value: "{colors.pink.300}"
+          value: "{colors.red.100}"
         },
         active: {
-          value: "{colors.pink.500}"
+          value: "{colors.red.200}"
         }
       },
       error: {
         DEFAULT: {
-          value: "{colors.pink.800}"
+          value: "{colors.pink.500}"
         },
         hover: {
-          value: "{colors.pink.900}"
+          value: "{colors.pink.700}"
         },
         active: {
-          value: "{colors.pink.950}"
+          value: "{colors.pink.900}"
         }
       },
       errorSubtle: {
         DEFAULT: {
-          value: "{colors.pink.100}"
+          value: "{colors.red.50}"
         },
         hover: {
-          value: "{colors.pink.300}"
+          value: "{colors.pink.100}"
         },
         active: {
-          value: "{colors.pink.500}"
+          value: "{colors.pink.200}"
         }
       },
       subtle: {
@@ -528,16 +534,16 @@ const semanticTokens = exports.semanticTokens = (0, _dev.defineSemanticTokens)({
         value: "{colors.grey.500}"
       },
       success: {
-        value: "{colors.green.900}"
+        value: "{colors.lightGreen.900}"
       },
       info: {
         value: "{colors.grey.500}"
       },
       warning: {
-        value: "{colors.yellow.1200}"
+        value: "{colors.yellow.600}"
       },
       error: {
-        value: "{colors.pink.800}"
+        value: "{colors.red.600}"
       },
       disabled: {
         value: "{colors.grey.300}"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/preset-panda",
-  "version": "0.0.49",
+  "version": "0.0.51",
   "description": "Panda preset for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -32,10 +32,10 @@
   ],
   "devDependencies": {
     "@ndla/core": "^5.0.3",
-    "@pandacss/dev": "^0.48.0"
+    "@pandacss/dev": "^0.52.0"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "7960790a61f90467f2c0b0919201967eac276662"
+  "gitHead": "d841c85ea6bbf6152736ec9bf7231d150b05c076"
 }