@ndla/preset-panda 0.0.1

package/es/semanticTokens.js

@@ -0,0 +1,413 @@
+/**
+ * Copyright (c) 2024-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import { defineSemanticTokens } from "@pandacss/dev";
+export const semanticTokens = defineSemanticTokens({
+  spacing: {
+    "4xsmall": {
+      value: "{spacing.2}"
+    },
+    "3xsmall": {
+      value: "{spacing.3}"
+    },
+    xxsmall: {
+      value: "{spacing.4}"
+    },
+    xsmall: {
+      value: "{spacing.6}"
+    },
+    small: {
+      value: "{spacing.8}"
+    },
+    medium: {
+      value: "{spacing.12}"
+    },
+    large: {
+      value: "{spacing.15}"
+    },
+    xlarge: {
+      value: "{spacing.18}"
+    },
+    xxlarge: {
+      value: "{spacing.24}"
+    },
+    "3xlarge": {
+      value: "{spacing.36}"
+    },
+    "4xlarge": {
+      value: "{spacing.48}"
+    },
+    surface: {
+      "4xsmall": {
+        value: "{spacing.50}"
+      },
+      "3xsmall": {
+        value: "{spacing.75}"
+      },
+      xxsmall: {
+        value: "{spacing.100}"
+      },
+      xsmall: {
+        value: "{spacing.150}"
+      },
+      small: {
+        value: "{spacing.200}"
+      },
+      medium: {
+        value: "{spacing.250}"
+      },
+      large: {
+        value: "{spacing.300}"
+      },
+      xlarge: {
+        value: "{spacing.350}"
+      },
+      xxlarge: {
+        value: "{spacing.400}"
+      },
+      "3xlarge": {
+        value: "{spacing.500}"
+      },
+      "4xlarge": {
+        value: "{spacing.550}"
+      }
+    }
+  },
+  sizes: {
+    "4xsmall": {
+      value: "{spacing.2}"
+    },
+    "3xsmall": {
+      value: "{spacing.3}"
+    },
+    xxsmall: {
+      value: "{spacing.4}"
+    },
+    xsmall: {
+      value: "{spacing.6}"
+    },
+    small: {
+      value: "{spacing.8}"
+    },
+    medium: {
+      value: "{spacing.12}"
+    },
+    large: {
+      value: "{spacing.15}"
+    },
+    xlarge: {
+      value: "{spacing.18}"
+    },
+    xxlarge: {
+      value: "{spacing.24}"
+    },
+    "3xlarge": {
+      value: "{spacing.36}"
+    },
+    "4xlarge": {
+      value: "{spacing.48}"
+    },
+    surface: {
+      "4xsmall": {
+        value: "{spacing.50}"
+      },
+      "3xsmall": {
+        value: "{spacing.75}"
+      },
+      xxsmall: {
+        value: "{spacing.100}"
+      },
+      xsmall: {
+        value: "{spacing.150}"
+      },
+      small: {
+        value: "{spacing.200}"
+      },
+      medium: {
+        value: "{spacing.250}"
+      },
+      large: {
+        value: "{spacing.300}"
+      },
+      xlarge: {
+        value: "{spacing.350}"
+      },
+      xxlarge: {
+        value: "{spacing.400}"
+      },
+      "3xlarge": {
+        value: "{spacing.500}"
+      },
+      "4xlarge": {
+        value: "{spacing.550}"
+      }
+    }
+  },
+  colors: {
+    background: {
+      default: {
+        value: "{colors.white}"
+      },
+      subtle: {
+        value: "{colors.grey.100}"
+      },
+      strong: {
+        value: "{colors.purple.50}"
+      }
+    },
+    text: {
+      default: {
+        value: "{colors.grey.950}"
+      },
+      subtle: {
+        value: "{colors.grey.700}"
+      },
+      strong: {
+        value: "{colors.primary}"
+      },
+      action: {
+        value: "{colors.purple.800}"
+      },
+      onAction: {
+        value: "{colors.white}"
+      },
+      link: {
+        value: "{colors.purple.900}"
+      },
+      error: {
+        value: "{colors.pink.800}"
+      },
+      disabled: {
+        value: "{colors.grey.400}"
+      }
+    },
+    icon: {
+      default: {
+        value: "{colors.grey.950}"
+      },
+      strong: {
+        value: "{colors.primary}"
+      },
+      onAction: {
+        value: "{colors.white}"
+      }
+    },
+    surface: {
+      brand: {
+        1: {
+          DEFAULT: {
+            value: "{colors.purple.500}"
+          },
+          subtle: {
+            value: "{colors.purple.100}"
+          },
+          strong: {
+            value: "{colors.purple.950}"
+          }
+        },
+        2: {
+          DEFAULT: {
+            value: "{colors.blue.500}"
+          },
+          subtle: {
+            value: "{colors.blue.100}"
+          },
+          strong: {
+            value: "{colors.blue.900}"
+          }
+        },
+        3: {
+          DEFAULT: {
+            value: "{colors.green.500}"
+          },
+          subtle: {
+            value: "{colors.green.100}"
+          },
+          strong: {
+            value: "{colors.green.900}"
+          }
+        },
+        4: {
+          DEFAULT: {
+            value: "{colors.yellow.500}"
+          },
+          subtle: {
+            value: "{colors.yellow.100}"
+          },
+          strong: {
+            value: "{colors.yellow.1100}"
+          }
+        },
+        5: {
+          DEFAULT: {
+            value: "{colors.pink.500}"
+          },
+          subtle: {
+            value: "{colors.pink.100}"
+          },
+          strong: {
+            value: "{colors.pink.900}"
+          }
+        }
+      },
+      default: {
+        value: "{colors.white}"
+      },
+      hover: {
+        value: "{colors.grey.100}"
+      },
+      active: {
+        value: "{colors.grey.200}"
+      },
+      selected: {
+        value: "{colors.purple.200}"
+      },
+      disabled: {
+        DEFAULT: {
+          value: "{colors.grey.200}"
+        },
+        subtle: {
+          value: "{colors.grey.50}"
+        },
+        strong: {
+          value: "{colors.grey.700}"
+        }
+      },
+      infoSubtle: {
+        DEFAULT: {
+          value: "{colors.grey.100}"
+        },
+        hover: {
+          value: "{colors.grey.200}"
+        },
+        active: {
+          value: "{colors.grey.300}"
+        }
+      },
+      action: {
+        DEFAULT: {
+          value: "{colors.primary}"
+        },
+        hover: {
+          value: "{colors.purple.900}"
+        },
+        active: {
+          value: "{colors.purple.800}"
+        }
+      },
+      actionSubtle: {
+        DEFAULT: {
+          value: "{colors.purple.50}"
+        },
+        hover: {
+          DEFAULT: {
+            value: "{colors.purple.100}"
+          },
+          strong: {
+            value: "{colors.purple.400}"
+          }
+        },
+        active: {
+          value: "{colors.purple.300}"
+        }
+      },
+      success: {
+        DEFAULT: {
+          value: "{colors.green.800}"
+        },
+        hover: {
+          value: "{colors.green.900}"
+        },
+        active: {
+          value: "{colors.green.950}"
+        }
+      },
+      successSubtle: {
+        DEFAULT: {
+          value: "{colors.green.100}"
+        },
+        hover: {
+          value: "{colors.green.300}"
+        },
+        active: {
+          value: "{colors.green.500}"
+        }
+      },
+      warning: {
+        DEFAULT: {
+          value: "{colors.yellow.600}"
+        },
+        hover: {
+          value: "{colors.yellow.800}"
+        },
+        active: {
+          value: "{colors.yellow.1200}"
+        }
+      },
+      warningSubtle: {
+        DEFAULT: {
+          value: "{colors.yellow.100}"
+        },
+        hover: {
+          value: "{colors.yellow.300}"
+        },
+        active: {
+          value: "{colors.yellow.400}"
+        }
+      },
+      error: {
+        DEFAULT: {
+          value: "{colors.pink.800}"
+        },
+        hover: {
+          value: "{colors.pink.900}"
+        },
+        active: {
+          value: "{colors.pink.950}"
+        }
+      },
+      errorSubtle: {
+        DEFAULT: {
+          value: "{colors.pink.100}"
+        },
+        hover: {
+          value: "{colors.pink.300}"
+        },
+        active: {
+          value: "{colors.pink.500}"
+        }
+      }
+    },
+    stroke: {
+      default: {
+        value: "{colors.primary}"
+      },
+      hover: {
+        value: "{colors.purple.800}"
+      },
+      subtle: {
+        value: "{colors.grey.500}"
+      },
+      success: {
+        value: "{colors.green.900}"
+      },
+      info: {
+        value: "{colors.grey.500}"
+      },
+      warning: {
+        value: "{colors.yellow.1200}"
+      },
+      error: {
+        value: "{colors.pink.800}"
+      },
+      disabled: {
+        value: "{colors.grey.300}"
+      }
+    }
+  }
+});

package/es/spacing.js

@@ -0,0 +1,137 @@
+/**
+ * Copyright (c) 2024-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import { defineTokens } from "@pandacss/dev";
+export const spacing = defineTokens.spacing({
+  1: {
+    value: "2px"
+  },
+  2: {
+    value: "4px"
+  },
+  3: {
+    value: "6px"
+  },
+  4: {
+    value: "8px"
+  },
+  5: {
+    value: "10px"
+  },
+  6: {
+    value: "12px"
+  },
+  7: {
+    value: "14px"
+  },
+  8: {
+    value: "16px"
+  },
+  9: {
+    value: "18px"
+  },
+  10: {
+    value: "20px"
+  },
+  11: {
+    value: "22px"
+  },
+  12: {
+    value: "24px"
+  },
+  13: {
+    value: "26px"
+  },
+  14: {
+    value: "28px"
+  },
+  15: {
+    value: "30px"
+  },
+  16: {
+    value: "32px"
+  },
+  17: {
+    value: "34px"
+  },
+  18: {
+    value: "36px"
+  },
+  19: {
+    value: "38px"
+  },
+  20: {
+    value: "40px"
+  },
+  22: {
+    value: "44px"
+  },
+  24: {
+    value: "48px"
+  },
+  26: {
+    value: "52px"
+  },
+  28: {
+    value: "56px"
+  },
+  32: {
+    value: "64px"
+  },
+  36: {
+    value: "72px"
+  },
+  40: {
+    value: "80px"
+  },
+  44: {
+    value: "88px"
+  },
+  48: {
+    value: "96px"
+  },
+  50: {
+    value: "100px"
+  },
+  60: {
+    value: "120px"
+  },
+  72: {
+    value: "144px"
+  },
+  75: {
+    value: "150px"
+  },
+  100: {
+    value: "200px"
+  },
+  150: {
+    value: "300px"
+  },
+  200: {
+    value: "400px"
+  },
+  250: {
+    value: "500px"
+  },
+  300: {
+    value: "600px"
+  },
+  350: {
+    value: "700px"
+  },
+  400: {
+    value: "800px"
+  },
+  500: {
+    value: "1000px"
+  },
+  550: {
+    value: "1100px"
+  }
+});