[Design System] - Finish initial base token specification

.cspell.json

@@ -623,7 +623,9 @@
     "cafebabe",
     "Icann",
     "limitbar",
-    "eazy"
+    "eazy",
+    "Maizzle",
+    "MJML"
   ],
   "flagWords": [],
   "patterns": [

libs/design-system/src/panda/NovuPandaPreset.ts

@@ -1,8 +1,12 @@
 import { definePreset } from '@pandacss/dev';
+import { BORDER_TOKENS, BORDER_WIDTH_TOKENS } from './borders.tokens';
 import { COLOR_PALETTE_TOKENS, LEGACY_COLOR_TOKENS } from './colors.tokens';
-import { COLOR_SEMANTIC_TOKENS, LEGACY_COLOR_SEMANTIC_TOKENS } from './semanticColors.tokens';
+import { GRADIENT_TOKENS, LEGACY_GRADIENT_TOKENS } from './gradients.tokens';
+import { LEGACY_RADIUS_TOKENS } from './radius.tokens';
 import { TEXT_RECIPE } from './recipes/text.recipe';
 import { TITLE_RECIPE } from './recipes/title.recipe';
+import { COLOR_SEMANTIC_TOKENS, LEGACY_COLOR_SEMANTIC_TOKENS } from './semanticColors.tokens';
+import { LEGACY_SHADOW_TOKENS } from './shadow.tokens';
 import { SIZES_TOKENS } from './sizes.tokens';
 import { SPACING_TOKENS } from './spacing.tokens';
 import { TEXT_STYLES } from './textStyles.tokens';
@@ -14,7 +18,7 @@ import {
   LETTER_SPACING_TOKENS,
   LINE_HEIGHT_TOKENS,
 } from './typography.tokens';
-import { LEGACY_GRADIENT_TOKENS } from './gradients.tokens';
+import { Z_INDEX_TOKENS } from './zIndex.tokens';
 
 /**
  * This defines all Novu tokens into a single preset to be used in our various apps (and design-system).
@@ -42,13 +46,21 @@ export const NovuPandaPreset = definePreset({
       lineHeights: LINE_HEIGHT_TOKENS,
       fontWeights: FONT_WEIGHT_TOKENS,
       letterSpacings: LETTER_SPACING_TOKENS,
+      radii: LEGACY_RADIUS_TOKENS,
+      borderWidths: BORDER_WIDTH_TOKENS,
+      borders: BORDER_TOKENS,
     },
     semanticTokens: {
       colors: {
         ...COLOR_SEMANTIC_TOKENS,
         ...LEGACY_COLOR_SEMANTIC_TOKENS,
       },
-      gradients: LEGACY_GRADIENT_TOKENS,
+      shadows: LEGACY_SHADOW_TOKENS,
+      gradients: {
+        ...GRADIENT_TOKENS,
+        ...LEGACY_GRADIENT_TOKENS,
+      },
+      zIndex: Z_INDEX_TOKENS,
     },
     textStyles: TEXT_STYLES,
     extend: {

libs/design-system/src/panda/borders.tokens.ts

@@ -0,0 +1,35 @@
+import { defineTokens } from '@pandacss/dev';
+
+export const BORDER_WIDTH_TOKENS = defineTokens.borderWidths({
+  '0': {
+    value: '0',
+    type: 'borderWidth',
+  },
+  '100': {
+    value: '1px',
+    type: 'borderWidth',
+  },
+  '200': {
+    value: '2px',
+    type: 'borderWidth',
+  },
+});
+
+export const BORDER_TOKENS = defineTokens.borders({
+  none: {
+    value: 'none',
+    type: 'border',
+  },
+  solid: {
+    value: '{borderWidths.100} solid',
+    type: 'border',
+  },
+  double: {
+    value: '{borderWidths.200} solid',
+    type: 'border',
+  },
+  dashed: {
+    value: '{borderWidths.100} dashed',
+    type: 'border',
+  },
+});

libs/design-system/src/panda/gradients.tokens.ts

@@ -1,11 +1,23 @@
 import { defineSemanticTokens } from '@pandacss/dev';
 
-/**
- * @deprecated
- */
+export const GRADIENT_TOKENS = defineSemanticTokens.gradients({
+  vertical: {
+    value: `linear-gradient(0deg, {colors.legacy.gradientStart} 0%, {colors.legacy.gradientEnd} 100%)`,
+    type: 'gradient',
+  },
+  horizontal: {
+    value: `linear-gradient(99deg, {colors.legacy.gradientEnd} 0%, {colors.legacy.gradientStart} 100%)`,
+    type: 'gradient',
+  },
+  disabled: {
+    value: {
+      base: 'linear-gradient(90deg, #F5C4D8 0%, #FFCBC1 100%)',
+      _dark: 'linear-gradient(90deg, #58203E 0%, #612E29 100%)',
+    },
+    type: 'gradient',
+  },
+});
+
 export const LEGACY_GRADIENT_TOKENS = defineSemanticTokens.gradients({
-  vertical: { value: `linear-gradient(0deg, {colors.legacy.gradientStart} 0%, {colors.legacy.gradientEnd} 100%)` },
-  horizontal: { value: `linear-gradient(99deg, {colors.legacy.gradientEnd} 0%, {colors.legacy.gradientStart} 100%)` },
-  disabled: { value: 'linear-gradient(90deg, #F5C4D8 0%, #FFCBC1 100%)' },
-  darkDisabled: { value: 'linear-gradient(90deg, #58203E 0%, #612E29 100%)' },
+  darkDisabled: { value: 'linear-gradient(90deg, #58203E 0%, #612E29 100%)', type: 'gradient' },
 });

libs/design-system/src/panda/opacity.tokens.ts

@@ -0,0 +1,41 @@
+import { defineTokens } from '@pandacss/dev';
+
+/**
+ * Represents the size of an element.
+ *
+ * Used for properties like width and height.
+ */
+export const OPACITY_TOKENS = defineTokens.opacity({
+  '0': {
+    value: '0',
+    type: 'opacity',
+  },
+  '40': {
+    value: '40%',
+    type: 'opacity',
+  },
+  '80': {
+    value: '80%',
+    type: 'opacity',
+  },
+  '100': {
+    value: '100%',
+    type: 'opacity',
+  },
+});
+
+/** @deprecated */
+export const LEGACY_OPACITY_TOKENS = defineTokens.radii({
+  '20': {
+    value: '20%',
+    type: 'opacity',
+  },
+  '50': {
+    value: '50%',
+    type: 'opacity',
+  },
+  '60': {
+    value: '60%',
+    type: 'opacity',
+  },
+});

libs/design-system/src/panda/radius.tokens.ts

@@ -0,0 +1,45 @@
+import { defineTokens } from '@pandacss/dev';
+
+/**
+ * Represents the size of an element.
+ *
+ * Used for properties like width and height.
+ */
+export const RADIUS_TOKENS = defineTokens.radii({
+  '50': {
+    value: '0.25rem',
+    type: 'radius',
+  },
+  '75': {
+    value: '0.375rem',
+    type: 'radius',
+  },
+  '100': {
+    value: '0.5rem',
+    type: 'radius',
+  },
+  '150': {
+    value: '0.75rem',
+    type: 'radius',
+  },
+  circle: {
+    value: '50%',
+    type: 'radius',
+  },
+  pill: {
+    value: '9999px',
+    type: 'radius',
+  },
+});
+
+/** @deprecated */
+export const LEGACY_RADIUS_TOKENS = defineTokens.radii({
+  '63': {
+    value: '5px',
+    type: 'radius',
+  },
+  '88': {
+    value: '7px',
+    type: 'radius',
+  },
+});

libs/design-system/src/panda/shadow.tokens.ts

@@ -0,0 +1,20 @@
+import { defineSemanticTokens } from '@pandacss/dev';
+
+/** @deprecated */
+export const LEGACY_SHADOW_TOKENS = defineSemanticTokens.shadows({
+  light: {
+    value: '0px 5px 15px rgba(38, 68, 128, 0.05)',
+  },
+  medium: {
+    value: {
+      base: '0px 5px 15px rgba(122, 133, 153, 0.25)',
+      _dark: '0px 5px 20px rgba(0, 0, 0, 0.2)',
+    },
+  },
+  dark: {
+    value: '0px 5px 20px rgba(0, 0, 0, 0.2)',
+  },
+  color: {
+    value: '0px 5px 20px -5px rgba(233, 52, 94, 0.5)',
+  },
+});

libs/design-system/src/panda/sizes.tokens.ts

@@ -38,4 +38,16 @@ export const SIZES_TOKENS = defineTokens.sizes({
     value: '2rem',
     type: 'sizes',
   },
+  '225': {
+    value: '2.25rem',
+    type: 'sizes',
+  },
+  '250': {
+    value: '2.5rem',
+    type: 'sizes',
+  },
+  '300': {
+    value: '3rem',
+    type: 'sizes',
+  },
 });

libs/design-system/src/panda/spacing.tokens.ts

@@ -38,4 +38,16 @@ export const SPACING_TOKENS = defineTokens.spacing({
     value: '2rem',
     type: 'spacing',
   },
+  '225': {
+    value: '2.25rem',
+    type: 'spacing',
+  },
+  '250': {
+    value: '2.5rem',
+    type: 'spacing',
+  },
+  '300': {
+    value: '3rem',
+    type: 'spacing',
+  },
 });

libs/design-system/src/panda/zIndex.tokens.ts

@@ -0,0 +1,63 @@
+import { defineSemanticTokens } from '@pandacss/dev';
+
+/**
+ * Specifies the "depth" of UI elements.
+ *
+ * Based on the system from ParkUI:
+ * https://github.com/cschroeter/park-ui/blob/main/plugins/panda/src/theme/tokens/z-index.ts
+ * It’s similar to the system from MUI as well: https://mui.com/material-ui/customization/z-index/
+ */
+export const Z_INDEX_TOKENS = defineSemanticTokens.zIndex({
+  hide: {
+    value: -1,
+    type: 'zIndex',
+  },
+  auto: {
+    value: 'auto',
+    type: 'zIndex',
+  },
+  base: {
+    value: 0,
+    type: 'zIndex',
+  },
+  docked: {
+    value: 10,
+    type: 'zIndex',
+  },
+  dropdown: {
+    value: 1000,
+    type: 'zIndex',
+  },
+  sticky: {
+    value: 1100,
+    type: 'zIndex',
+  },
+  banner: {
+    value: 1200,
+    type: 'zIndex',
+  },
+  overlay: {
+    value: 1300,
+    type: 'zIndex',
+  },
+  modal: {
+    value: 1400,
+    type: 'zIndex',
+  },
+  popover: {
+    value: 1500,
+    type: 'zIndex',
+  },
+  skipLink: {
+    value: 1600,
+    type: 'zIndex',
+  },
+  toast: {
+    value: 1700,
+    type: 'zIndex',
+  },
+  tooltip: {
+    value: 1800,
+    type: 'zIndex',
+  },
+});