@prokodo/ui 1.0.5 → 1.0.7

package/dist/components/tooltip/Tooltip.css

@@ -124,6 +124,31 @@
  * This mixin specifies basic text-styles for components that render a richtext
  * content.
  */
+:root {
+  --pk-tooltip-bg: color-mix(in srgb, var(--pk-color-fg) 92%, var(--pk-color-surface));
+  --pk-tooltip-fg: var(--pk-color-surface);
+  --pk-tooltip-border: color-mix(in srgb, var(--pk-color-surface) 12%, transparent);
+  --pk-tooltip-shadow: var(--pk-shadow-lg);
+  --pk-tooltip-radius: var(--pk-radius-sm);
+  --pk-tooltip-z: 2147483647;
+  --pk-tooltip-success-bg: color-mix(in srgb, var(--pk-color-success) 12%, var(--pk-color-surface));
+  --pk-tooltip-success-fg: var(--pk-color-fg);
+  --pk-tooltip-success-border: color-mix(in srgb, var(--pk-color-success) 35%, transparent);
+  --pk-tooltip-success-shadow: 0 4px 16px color-mix(in srgb, var(--pk-color-success) 18%, transparent);
+  --pk-tooltip-error-bg: color-mix(in srgb, var(--pk-color-error) 12%, var(--pk-color-surface));
+  --pk-tooltip-error-fg: var(--pk-color-fg);
+  --pk-tooltip-error-border: color-mix(in srgb, var(--pk-color-error) 35%, transparent);
+  --pk-tooltip-error-shadow: 0 4px 16px color-mix(in srgb, var(--pk-color-error) 18%, transparent);
+  --pk-tooltip-warning-bg: color-mix(in srgb, var(--pk-color-warning) 12%, var(--pk-color-surface));
+  --pk-tooltip-warning-fg: var(--pk-color-fg);
+  --pk-tooltip-warning-border: color-mix(in srgb, var(--pk-color-warning) 35%, transparent);
+  --pk-tooltip-warning-shadow: 0 4px 16px color-mix(in srgb, var(--pk-color-warning) 18%, transparent);
+  --pk-tooltip-info-bg: color-mix(in srgb, var(--pk-color-fg) 8%, var(--pk-color-surface));
+  --pk-tooltip-info-fg: var(--pk-color-fg);
+  --pk-tooltip-info-border: color-mix(in srgb, var(--pk-color-fg) 20%, transparent);
+  --pk-tooltip-info-shadow: var(--pk-shadow-md);
+}
+
 .prokodo-Tooltip {
   position: relative;
   display: inline-flex;

package/dist/components/tooltip/Tooltip.module.css

@@ -124,6 +124,31 @@
  * This mixin specifies basic text-styles for components that render a richtext
  * content.
  */
+:root {
+  --pk-tooltip-bg: color-mix(in srgb, var(--pk-color-fg) 92%, var(--pk-color-surface));
+  --pk-tooltip-fg: var(--pk-color-surface);
+  --pk-tooltip-border: color-mix(in srgb, var(--pk-color-surface) 12%, transparent);
+  --pk-tooltip-shadow: var(--pk-shadow-lg);
+  --pk-tooltip-radius: var(--pk-radius-sm);
+  --pk-tooltip-z: 2147483647;
+  --pk-tooltip-success-bg: color-mix(in srgb, var(--pk-color-success) 12%, var(--pk-color-surface));
+  --pk-tooltip-success-fg: var(--pk-color-fg);
+  --pk-tooltip-success-border: color-mix(in srgb, var(--pk-color-success) 35%, transparent);
+  --pk-tooltip-success-shadow: 0 4px 16px color-mix(in srgb, var(--pk-color-success) 18%, transparent);
+  --pk-tooltip-error-bg: color-mix(in srgb, var(--pk-color-error) 12%, var(--pk-color-surface));
+  --pk-tooltip-error-fg: var(--pk-color-fg);
+  --pk-tooltip-error-border: color-mix(in srgb, var(--pk-color-error) 35%, transparent);
+  --pk-tooltip-error-shadow: 0 4px 16px color-mix(in srgb, var(--pk-color-error) 18%, transparent);
+  --pk-tooltip-warning-bg: color-mix(in srgb, var(--pk-color-warning) 12%, var(--pk-color-surface));
+  --pk-tooltip-warning-fg: var(--pk-color-fg);
+  --pk-tooltip-warning-border: color-mix(in srgb, var(--pk-color-warning) 35%, transparent);
+  --pk-tooltip-warning-shadow: 0 4px 16px color-mix(in srgb, var(--pk-color-warning) 18%, transparent);
+  --pk-tooltip-info-bg: color-mix(in srgb, var(--pk-color-fg) 8%, var(--pk-color-surface));
+  --pk-tooltip-info-fg: var(--pk-color-fg);
+  --pk-tooltip-info-border: color-mix(in srgb, var(--pk-color-fg) 20%, transparent);
+  --pk-tooltip-info-shadow: var(--pk-shadow-md);
+}
+
 .prokodo-Tooltip {
   position: relative;
   display: inline-flex;

package/dist/constants/project.js

@@ -1,4 +1,4 @@
-const PROKODO_UI_VERSION = "1.0.5";
+const PROKODO_UI_VERSION = "1.0.7";
 export {
   PROKODO_UI_VERSION
 };

package/dist/theme-tokens.css

@@ -0,0 +1,371 @@
+/* stylelint-disable */
+/**
+ * Calculates a rem-based value by a given pixel size.
+ */
+/* stylelint-disable */
+/**
+ * Applies flex-column and gap.
+ */
+/*
+    As example (light, primary)
+    See defined modes in designsystem/config/gradients
+*/
+/**
+ * Mixin that renders a media query that target screens that are larger than the
+ * given size.
+ */
+/**
+ * Mixin that renders a media query that target screens that are smaller than the
+ * given size.
+ */
+/**
+ * Mixin that renders a media query that target screens in between the given range.
+ */
+/**
+ * Mixin that renders a media query that target screens that have height larger than the
+ * given size.
+ */
+/**
+ * Mixin that renders a media query that target screens that have height smaller than the
+ * given size.
+ */
+/* stylelint-disable */
+/* M3/Elevation Light/1 */
+/* M3/Elevation Light/2 */
+/* M3/Elevation/5 */
+/* M3/Elevation/1 Text */
+/* Inner elevations */
+/* stylelint-disable */
+/**
+ * Visually hides an element but not removes them for screen readers.
+ */
+/**
+ * The inverse of the `hidden` helper to reset a previously hidden element to be
+ * visible for users.
+ */
+/**
+ * Creates a selector for :hover effects depending on the current user input
+ * device. If the input device is a mouse, this hover effect will appear.
+ * Keyboard and touch inputs are ignored.
+ *
+ * Example usage:
+ * .link {
+ *   color: blue;
+ *
+ *   @include when-hovered() {
+ *     color: green;
+ *   }
+ * }
+ */
+/**
+ * Creates a selector for :active effects depending on the current user input
+ * device. The state applies when the input device is a mouse or keyboard. Touch
+ * devices will not show a pressed state.
+ *
+ * Example usage:
+ * .link {
+ *   box-shadow: none;
+ *
+ *   @include when-pressed() {
+ *     box-shadow: inset 0 2px 4px grey;
+ *   }
+ * }
+ */
+/**
+ * Creates a selector for :focus effects depending on the current user input
+ * device. When the user navigates using a keyboard, the focus effect defined in
+ * here is applied. For other input devices they don't show up.
+ *
+ * Example usage:
+ * .link {
+ *   text-decoration: none;
+ *
+ *   @include when-focused() {
+ *     text-decoration: underline;
+ *   }
+ * }
+ */
+/**
+ * Creates a selector for :focus-within effects depending on the current user
+ * input device. When the user navigates using a keyboard, the focus effect
+ * defined in here is applied. For other input devices they don't show up.
+ *
+ * Example usage:
+ * .link {
+ *   img {
+ *     opacity: 0.75;
+ *
+ *     @include when-focused-within() {
+ *       opacity: 1;
+ *     }
+ *   }
+ * }
+ */
+/**
+ * Wrapper for media query "prefers-reduced-motion".
+ */
+/**
+ * This helper hides the outline but still makes it visible for
+ * Windows high-contrast users. Use this instead of `outline: 0;`.
+ */
+/**
+ * This helper hides the outline but still makes it visible for
+ * Windows high-contrast users. Use this instead of `outline: 0;`.
+ */
+/**
+ * Renders an alternative, but application consistent focus-ring.
+ */
+/**
+ * Specifies the outer layout for all contents across breakpoints. Apply this
+ * mixin to the container element, to center the contents on the screen within
+ * the layout offsets.
+ */
+/**
+ * This mixin specifies basic text-styles for components that render a richtext
+ * content.
+ */
+:root,
+.pk-theme-default {
+  --pk-palette-white: #FFFFFF;
+  --pk-palette-black: #000000;
+  --pk-palette-grey-50: #F5F5F5;
+  --pk-palette-grey-100: #BCBCBC;
+  --pk-palette-grey-200: #9C9C9C;
+  --pk-palette-grey-300: #7D7D7D;
+  --pk-palette-grey-400: #606060;
+  --pk-palette-grey-500: #4D4D4D;
+  --pk-palette-grey-600: #393939;
+  --pk-palette-grey-700: #2F2F2F;
+  --pk-palette-grey-800: #242424;
+  --pk-palette-grey-900: #121212;
+  --pk-palette-primary-50: #E5EBFF;
+  --pk-palette-primary-100: #C9D8FF;
+  --pk-palette-primary-400: #64A1FF;
+  --pk-palette-primary-500: #1E90FF;
+  --pk-palette-primary-600: #2676d0;
+  --pk-palette-primary-700: #275ea2;
+  --pk-palette-secondary-500: #00E6FF;
+  --pk-palette-slate-950: #10131b;
+  --pk-palette-success: #20E381;
+  --pk-palette-warning: #f7b529;
+  --pk-palette-error: #f0453a;
+  --pk-palette-primary-500-rgb: 30 144 255;
+  --pk-palette-primary-700-rgb: 39 94 162;
+  --pk-color-overlay-rgb: 0 0 0;
+  --pk-color-bg: var(--pk-palette-grey-50);
+  --pk-color-fg: var(--pk-palette-grey-900);
+  --pk-color-surface: var(--pk-palette-white);
+  --pk-color-surface-raised: var(--pk-palette-grey-50);
+  --pk-color-border: var(--pk-palette-grey-200);
+  --pk-color-muted: var(--pk-palette-grey-500);
+  --pk-color-overlay-alpha: 0.5;
+  --pk-color-brand: var(--pk-palette-primary-500);
+  --pk-color-brand-hover: var(--pk-palette-primary-400);
+  --pk-color-accent: var(--pk-palette-secondary-500);
+  --pk-color-on-brand: var(--pk-palette-white);
+  --pk-color-on-dark: var(--pk-palette-grey-50);
+  --pk-color-success: var(--pk-palette-success);
+  --pk-color-warning: var(--pk-palette-warning);
+  --pk-color-error: var(--pk-palette-error);
+  --pk-space-xs: 0.25rem;
+  --pk-space-sm: 0.5rem;
+  --pk-space-md: 0.75rem;
+  --pk-space-lg: 1rem;
+  --pk-space-xl: 1.5rem;
+  --pk-space-2xl: 2rem;
+  --pk-space-3xl: 4rem;
+  --pk-space-4xl: 8rem;
+  --pk-radius-sm: 5px;
+  --pk-radius-md: 0.75rem;
+  --pk-radius-lg: 2rem;
+  --pk-radius-pill: 1.5rem;
+  --pk-border-width: 1px;
+  --pk-focus-ring-width: 2px;
+  --pk-focus-ring-offset: 2px;
+  --pk-focus-ring-color: var(--pk-color-brand);
+  --pk-shadow-sm: var(--elevation-1);
+  --pk-shadow-md: var(--elevation-2);
+  --pk-shadow-lg: var(--elevation-3);
+  --pk-timing-fast: 0.15s;
+  --pk-timing-normal: 0.3s;
+  --pk-timing-slow: 0.6s;
+  --pk-z-header: 2;
+  --pk-z-nav: 999;
+  --pk-z-dropdown: 998;
+  --pk-z-modal-backdrop: 1300;
+  --pk-z-modal: 1301;
+  --pk-z-popover: 1400;
+}
+
+html[data-theme=dark],
+[data-theme=dark],
+.pk-theme-dark {
+  --pk-color-bg: var(--pk-palette-grey-900);
+  --pk-color-fg: var(--pk-palette-grey-50);
+  --pk-color-surface: var(--pk-palette-slate-950);
+  --pk-color-surface-raised: var(--pk-palette-grey-800);
+  --pk-color-border: var(--pk-palette-grey-700);
+  --pk-color-muted: var(--pk-palette-grey-200);
+  --pk-color-overlay-alpha: 0.7;
+  --pk-snackbar-info-bg: var(--pk-palette-grey-300);
+}
+
+:root {
+  --color-white: #FFFFFF;
+  --color-black: #000000;
+  --color-grey-50: #F5F5F5;
+  --color-grey-100: #BCBCBC;
+  --color-grey-200: #9C9C9C;
+  --color-grey-300: #7D7D7D;
+  --color-grey-400: #606060;
+  --color-grey-500: #4D4D4D;
+  --color-grey-600: #393939;
+  --color-grey-700: #2F2F2F;
+  --color-grey-800: #242424;
+  --color-grey-900: #121212;
+  --color-primary-20: #FFFFFF;
+  --color-primary-40: #FFFFFF;
+  --color-primary-50: #E5EBFF;
+  --color-primary-100: #C9D8FF;
+  --color-primary-200: #ACC5FF;
+  --color-primary-300: #8CB3FF;
+  --color-primary-400: #64A1FF;
+  --color-primary-500: #1E90FF;
+  --color-primary-600: #2676d0;
+  --color-primary-700: #275ea2;
+  --color-primary-800: #244677;
+  --color-primary-900: #1e304f;
+  --color-secondary-50: #E6FBFF;
+  --color-secondary-100: #CCF7FF;
+  --color-secondary-200: #AFF3FF;
+  --color-secondary-300: #8EEFFF;
+  --color-secondary-400: #64EBFF;
+  --color-secondary-500: #00E6FF;
+  --color-secondary-600: #1dbcd0;
+  --color-secondary-700: #2393a2;
+  --color-secondary-800: #236c77;
+  --color-secondary-900: #1e484e;
+  --color-success: #20E381;
+  --color-warning: #f7b529;
+  --color-error: #f0453a;
+  --color-primary-500-rgb: 30 144 255;
+  --color-primary-700-rgb: 39 94 162;
+  --elevation-1: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
+  --elevation-1--inset: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.3), inset 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
+  --elevation-1--text: 0px 1px 2px rgba(0, 0, 0, 0.15), 0px 1px 3px rgba(0, 0, 0, 0.15);
+  --elevation-2: 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 2px 6px 2px rgba(0, 0, 0, 0.15);
+  --elevation-3: 0px 6px 10px -3px rgba(0, 0, 0, 0.25);
+  --elevation-5: 0px -20px 30px -25px rgba(0, 0, 0, 0.15);
+  --inner-elevation-1: 0px 2px 4px 1px rgba(0, 0, 0, 0.25) inset;
+  --inner-elevation-2: 0px -20px 30px -25px rgba(0, 0, 0, 0.15) inset;
+  --inner-elevation-3: -4px 0px 6px 0px rgba(0, 0, 0, 0.15) inset;
+  --gradient-background-primary-secondary: linear-gradient(112.34deg, var(--color-primary-500) 0%, var(--color-secondary-500) 100%);
+  --gradient-background-primary-grey-secondary: linear-gradient(90deg, var(--color-primary-500) 0%, var(--color-primary-800) 50%, var(--color-secondary-500) 100%);
+  --gradient-background-grey-1: linear-gradient(180deg, var(--color-white) -9.57%, var(--color-grey-50) 102.02%);
+  --gradient-background-grey-2: linear-gradient(180deg, var(--color-grey-50) -9.57%, var(--color-white) 102.02%);
+  --gradient-background-radial-grey-1: radial-gradient(55.8% 55.8% at 50% 46.23%, #F0F0F0 0%, var(--color-white) 100%);
+  --gradient-background-inherit: linear-gradient(112deg, var(--color-grey-50) 0%, var(--color-grey-100) 100%);
+  --gradient-background-primary: linear-gradient(112deg, var(--color-primary-500) 0%, var(--color-secondary-500) 100%);
+  --gradient-background-secondary: linear-gradient(112deg, var(--color-secondary-500) 0%, var(--color-primary-500) 100%);
+  --gradient-background-info: linear-gradient(112deg, var(--color-grey-100) 0%, var(--color-grey-200) 50%, var(--color-grey-300) 100%);
+  --gradient-background-success: linear-gradient(112deg, #20E381 0%, #20E381 50%, #10CCB8 100%);
+  --gradient-background-warning: linear-gradient(112deg, #FFCC00 0%, #CCA300 100%);
+  --gradient-background-error: linear-gradient(112deg, #EB5550 0%, #DB4A46 50%, #FF4444 100%);
+  --gradient-border-1: linear-gradient(180deg, var(--color-secondary-500) 0%, var(--color-primary-500) 100%);
+  --gradient-border-2: linear-gradient(90deg, var(--color-primary-500) 0%, var(--color-secondary-500) 100%);
+  --gradient-border-3: linear-gradient(90deg, var(--color-primary-500) 0%, var(--color-secondary-500) 100%);
+  --gradient-border-4: linear-gradient(112.34deg, var(--color-primary-500) 0%, var(--color-secondary-500) 100%);
+  --gradient-border-5: linear-gradient(90deg, var(--color-primary-500) 0%, var(--color-secondary-500) 100%);
+  --gradient-border-6: linear-gradient(90deg, var(--color-secondary-500) 4.63%, var(--color-primary-500) 100%);
+  --gradient-border-7: linear-gradient(90deg, var(--color-primary-500), var(--color-secondary-500), var(--color-primary-500));
+  --gradient-border-8: linear-gradient(90deg, var(--color-grey-100) 4.63%, var(--color-grey-300) 100%);
+  --gradient-border-info: linear-gradient(112deg, var(--color-grey-100) 0%, var(--color-grey-300) 100%);
+  --gradient-border-success: linear-gradient(112deg, #20E381 0%, #10CCB8 100%);
+  --gradient-border-warning: linear-gradient(112deg, #FFCC00 0%, #CCA300 100%);
+  --gradient-border-error: linear-gradient(112deg, #EB5550 0%, #FF4444 100%);
+  --gradient-text-primary-secondary: linear-gradient(90deg, var(--color-primary-500) 0%, var(--color-primary-800) 50%, var(--color-secondary-500) 100%);
+  --gradient-text-primary-secondary-primary: linear-gradient(90deg, var(--color-primary-500) 0%, var(--color-secondary-500) 50%, var(--color-primary-500) 100%);
+  --gradient-text-primary: linear-gradient(90deg, var(--color-primary-500) 0%, var(--color-grey-400) 100%);
+  --gradient-text-grey: linear-gradient(90deg, var(--color-grey-300) 0%, var(--color-grey-600) 100%);
+  --gradient-text-success: linear-gradient(#20E381, #20E381, #10CCB8);
+  --gradient-text-warning: linear-gradient(#FFCC00, #CCA300);
+  --gradient-text-error: linear-gradient(#6c4d4c, #984b47, #c52a2a);
+}
+
+:root[data-theme=dark] {
+  --color-white: #000000;
+  --color-black: #F5F5F5;
+  --color-grey-50: #121212;
+  --color-grey-100: #242424;
+  --color-grey-200: #2F2F2F;
+  --color-grey-300: #393939;
+  --color-grey-400: #4D4D4D;
+  --color-grey-500: #606060;
+  --color-grey-600: #7D7D7D;
+  --color-grey-700: #9C9C9C;
+  --color-grey-800: #BCBCBC;
+  --color-grey-900: #F5F5F5;
+  --color-primary-20: #080c14;
+  --color-primary-40: #0f1726;
+  --color-primary-50: #1e304f;
+  --color-primary-100: #244677;
+  --color-primary-200: #275ea2;
+  --color-primary-300: #2676d0;
+  --color-primary-400: #64A1FF;
+  --color-primary-500: #1E90FF;
+  --color-primary-600: #8CB3FF;
+  --color-primary-700: #ACC5FF;
+  --color-primary-800: #C9D8FF;
+  --color-primary-900: #E5EBFF;
+  --color-secondary-50: #1e484e;
+  --color-secondary-100: #236c77;
+  --color-secondary-200: #2393a2;
+  --color-secondary-300: #1dbcd0;
+  --color-secondary-400: #64EBFF;
+  --color-secondary-500: #00E6FF;
+  --color-secondary-600: #8EEFFF;
+  --color-secondary-700: #AFF3FF;
+  --color-secondary-800: #CCF7FF;
+  --color-secondary-900: #E6FBFF;
+  --color-success: #20E381;
+  --color-warning: #f7b529;
+  --color-error: #f0453a;
+  --elevation-1: 0 4px 6px rgba(255, 255, 255, 0.1), 0 1px 3px rgba(255, 255, 255, 0.08);
+  --elevation-1--inset: inset 0px 1px 2px 0px rgba(255, 255, 255, 0.3), inset 0px 1px 3px 1px rgba(255, 255, 255, 0.15);
+  --elevation-1--text: 0px 1px 2px rgba(255, 255, 255, 0.15), 0px 1px 3px rgba(255, 255, 255, 0.15);
+  --elevation-2: 0px 1px 2px 0px rgba(255, 255, 255, 0.3), 0px 2px 6px 2px rgba(255, 255, 255, 0.15);
+  --elevation-3: 0px 6px 10px -3px rgba(255, 255, 255, 0.25);
+  --elevation-5: 0px -20px 30px -25px rgba(255, 255, 255, 0.15);
+  --inner-elevation-1: 0px 2px 4px 1px rgba(255, 255, 255, 0.25) inset;
+  --inner-elevation-2: 0px -20px 30px -25px rgba(255, 255, 255, 0.15) inset;
+  --inner-elevation-3: -4px 0px 6px 0px rgba(255, 255, 255, 0.15) inset;
+  --gradient-background-primary-secondary: linear-gradient(112.34deg, var(--color-primary-500) 0%, var(--color-secondary-500) 100%);
+  --gradient-background-primary-grey-secondary: linear-gradient(90deg, var(--color-primary-500) 0%, var(--color-primary-600) 50%, var(--color-secondary-500) 100%);
+  --gradient-background-grey-1: linear-gradient(180deg, var(--color-white) -9.57%, var(--color-grey-50) 102.02%);
+  --gradient-background-grey-2: linear-gradient(180deg, var(--color-grey-50) -9.57%, var(--color-white) 102.02%);
+  --gradient-background-radial-grey-1: radial-gradient(55.8% 55.8% at 50% 46.23%, var(--color-grey-100) 0%, #1e1e1e 100%);
+  --gradient-background-inherit: linear-gradient(112deg, var(--color-grey-50) 0%, var(--color-grey-100) 100%);
+  --gradient-background-primary: linear-gradient(112deg, var(--color-primary-500) 0%, var(--color-secondary-500) 100%);
+  --gradient-background-secondary: linear-gradient(112deg, var(--color-secondary-500) 0%, var(--color-primary-500) 100%);
+  --gradient-background-info: linear-gradient(var(--color-grey-100), var(--color-grey-200), var(--color-grey-300));
+  --gradient-background-success: linear-gradient(#20E381, #20E381, #10CCB8);
+  --gradient-background-warning: linear-gradient(#FFCC00, #CCA300);
+  --gradient-background-error: linear-gradient(#EB5550, #DB4A46, #FF4444);
+  --gradient-border-1: linear-gradient(180deg, var(--color-secondary-500) 0%, var(--color-primary-500) 100%);
+  --gradient-border-2: linear-gradient(90deg, var(--color-primary-500) 0%, var(--color-secondary-500) 100%);
+  --gradient-border-3: linear-gradient(90deg, var(--color-primary-500) 0%, var(--color-secondary-500) 100%);
+  --gradient-border-4: linear-gradient(112.34deg, var(--color-primary-500) 0%, var(--color-secondary-500) 100%);
+  --gradient-border-5: linear-gradient(90deg, var(--color-primary-500) 0%, var(--color-secondary-500) 100%);
+  --gradient-border-7: linear-gradient(180deg, var(--color-grey-400) 0%, var(--color-grey-600) 100%);
+  --gradient-border-8: linear-gradient(90deg, var(--color-grey-100) 4.63%, var(--color-grey-300) 100%);
+  --gradient-border-info: linear-gradient(112deg, var(--color-grey-100) 0%, var(--color-grey-300) 100%);
+  --gradient-border-success: linear-gradient(112deg, #20E381 0%, #10CCB8 100%);
+  --gradient-border-warning: linear-gradient(112deg, #FFCC00 0%, #CCA300 100%);
+  --gradient-border-error: linear-gradient(112deg, #EB5550 0%, #FF4444 100%);
+  --gradient-text-primary-secondary: linear-gradient(90deg, var(--color-primary-500) 0%, var(--color-primary-800) 50%, var(--color-secondary-500) 100%);
+  --gradient-text-primary: linear-gradient(90deg, var(--color-primary-500) 0%, var(--color-grey-700) 100%);
+  --gradient-text-grey: linear-gradient(90deg, var(--color-grey-700) 0%, var(--color-grey-900) 100%);
+  --gradient-text-success: linear-gradient(#20E381, #20E381, #10CCB8);
+  --gradient-text-warning: linear-gradient(#FFCC00, #CCA300);
+  --gradient-text-error: linear-gradient(#6c4d4c, #984b47, #c52a2a);
+}