@hpe-web/design-tokens 1.0.0 → 1.2.0

package/src/semantic/color.dark.json

@@ -0,0 +1,414 @@
+{
+  "hpe-web": {
+    "color": {
+      "background": {
+        "back": {
+          "$type": "color",
+          "$value": "{hpe-web.base.color.grey.1000}",
+          "$description": "Default background color to be used on containers."
+        },
+        "card": {
+          "$type": "color",
+          "$value": "{hpe-web.base.color.grey.1000}"
+        },
+        "carousel": {
+          "$type": "color",
+          "$value": "{hpe-web.base.color.grey.200}"
+        },
+        "carousel-disabled": {
+          "$type": "color",
+          "$value": "{hpe-web.base.color.grey.500}"
+        },
+        "carousel-hover": {
+          "$type": "color",
+          "$value": "{hpe-web.base.color.grey.400}"
+        },
+        "contrast": {
+          "$type": "color",
+          "$value": "{hpe-web.base.color.white.opacity6}",
+          "$description": "Use to create a subtle differentiation between a component or container and the region it sits on."
+        },
+        "critical": {
+          "$type": "color",
+          "$value": "{hpe-web.base.color.red.1000}"
+        },
+        "default": {
+          "$type": "color",
+          "$value": "{hpe-web.base.color.grey.1300}",
+          "$description": "Default background color to be used on containers."
+        },
+        "disabled": {
+          "$type": "color",
+          "$value": "{hpe-web.base.color.white.opacity7}"
+        },
+        "floating": {
+          "$type": "color",
+          "$value": "{hpe-web.base.color.grey.1300}"
+        },
+        "neutral": {
+          "$type": "color",
+          "$value": "{hpe-web.base.color.grey.400}"
+        },
+        "neutral-strong": {
+          "$type": "color",
+          "$value": "{hpe-web.base.color.white.100}"
+        },
+        "neutral-weak": {
+          "$type": "color",
+          "$value": "{hpe-web.base.color.grey.600}"
+        },
+        "ok": {
+          "$type": "color",
+          "$value": "{hpe-web.base.color.green.1000}"
+        },
+        "primary": {
+          "$type": "color",
+          "$value": "{hpe-web.base.color.green.600}",
+          "$description": "Primary palette is derived from the brand color and used for high visual prominence."
+        },
+        "primary-strong": {
+          "$type": "color",
+          "$value": "{hpe-web.base.color.green.700}",
+          "$description": "The strong variant of background-primary. Primary palette is derived from the brand color and used for high visual prominence."
+        },
+        "sunken": {
+          "$type": "color",
+          "$value": "{hpe-web.base.color.grey.1200}"
+        },
+        "warning": {
+          "$type": "color",
+          "$value": "{hpe-web.base.color.orange.1000}"
+        }
+      },
+      "border": {
+        "critical": {
+          "$type": "color",
+          "$value": "{hpe-web.color.foreground.critical}"
+        },
+        "default": {
+          "$type": "color",
+          "$value": "{hpe-web.base.color.white.opacity36}",
+          "$description": "Default border color."
+        },
+        "disabled": {
+          "$type": "color",
+          "$value": "{hpe-web.base.color.white.opacity12}",
+          "$description": "Disabled color for borders. Using disabled colors ensures that disabled components are consistently styled."
+        },
+        "ok": {
+          "$type": "color",
+          "$value": "{hpe-web.deprecated.base.color.green.400}"
+        },
+        "primary": {
+          "$type": "color",
+          "$value": "{hpe-web.base.color.green.600}"
+        },
+        "selected": {
+          "$type": "color",
+          "$value": "{hpe-web.color.foreground.primary}"
+        },
+        "strong": {
+          "$type": "color",
+          "$value": "{hpe-web.base.color.white.opacity72}",
+          "$description": "Default border color."
+        },
+        "warning": {
+          "$type": "color",
+          "$value": "{hpe-web.color.foreground.warning}"
+        },
+        "weak": {
+          "$type": "color",
+          "$value": "{hpe-web.base.color.white.opacity12}"
+        }
+      },
+      "decorative": {
+        "black": {
+          "$type": "color",
+          "$value": "{hpe-web.base.color.black.opacity100}"
+        },
+        "blue": {
+          "$type": "color",
+          "$value": "{hpe-web.base.color.blue.500}",
+          "$description": "Use for decorative purposes when color has no specific meaning."
+        },
+        "brand": {
+          "$type": "color",
+          "$value": "{hpe-web.base.color.green.600}",
+          "$description": "The brand color."
+        },
+        "cyan": {
+          "$type": "color",
+          "$value": "{hpe-web.base.color.cyan.400}",
+          "$description": "Use for decorative purposes when color has no specific meaning."
+        },
+        "green": {
+          "$type": "color",
+          "$value": "{hpe-web.base.color.green.700}",
+          "$description": "Use for decorative purposes when color has no specific meaning."
+        },
+        "neutral": {
+          "$type": "color",
+          "$value": "{hpe-web.base.color.grey.500}",
+          "$description": "Highest emphasis variant of neutral palette."
+        },
+        "neutral-strong": {
+          "$type": "color",
+          "$value": "{hpe-web.base.color.grey.400}",
+          "$description": "Highest emphasis variant of neutral palette."
+        },
+        "purple": {
+          "$type": "color",
+          "$value": "{hpe-web.base.color.purple.400}",
+          "$description": "Use for decorative purposes when color has no specific meaning."
+        },
+        "white": {
+          "$type": "color",
+          "$value": "{hpe-web.base.color.white.100}"
+        }
+      },
+      "foreground": {
+        "critical": {
+          "$type": "color",
+          "$value": "{hpe-web.base.color.red.500}",
+          "$description": "Use for foreground regions communicating error or danger. Often used to color values in a meter or progress bar. Keywords: status"
+        },
+        "ok": {
+          "$type": "color",
+          "$value": "{hpe-web.base.color.green.550}",
+          "$description": "Use for foreground regions communicating success, completion, or a normal/ok status. Often used to color values in a meter or progress bar. Keywords: status"
+        },
+        "primary": {
+          "$type": "color",
+          "$value": "{hpe-web.base.color.green.550}"
+        },
+        "unknown": {
+          "$type": "color",
+          "$value": "{hpe-web.base.color.grey.600}",
+          "$description": "Use for foreground regions communicating unknown status. Often used to color values in a meter or progress bar. Keywords: status"
+        },
+        "warning": {
+          "$type": "color",
+          "$value": "{hpe-web.base.color.orange.500}",
+          "$description": "Use for foreground regions communicating warning or caution. Often used to color values in a meter or progress bar. Keywords: status"
+        }
+      },
+      "icon": {
+        "critical": {
+          "$type": "color",
+          "$value": "{hpe-web.color.foreground.critical}"
+        },
+        "default": {
+          "$type": "color",
+          "$value": "{hpe-web.color.text.default}",
+          "$description": "Default icon color."
+        },
+        "disabled": {
+          "$type": "color",
+          "$value": "{hpe-web.color.text.disabled}",
+          "$description": "Disabled color for icons. Using disabled colors ensures that disabled components are consistently styled."
+        },
+        "info": {
+          "$type": "color",
+          "$value": "{hpe-web.base.color.blue.200}"
+        },
+        "neutral": {
+          "$type": "color",
+          "$value": "{hpe-web.base.color.white.100}"
+        },
+        "ok": {
+          "$type": "color",
+          "$value": "{hpe-web.base.color.green.550}"
+        },
+        "onStrong": {
+          "$type": "color",
+          "$value": "{hpe-web.base.color.grey.1000}",
+          "$description": "Icon color to be used on strong backgrounds. For example, background-neutral-xstrong."
+        },
+        "primary": {
+          "$type": "color",
+          "$value": "{hpe-web.color.decorative.brand}",
+          "$description": "High emphasis color for icons that should draw from the primary palette. Often used to highlight that interacting with a given element will result in an action."
+        },
+        "primary-strong": {
+          "$type": "color",
+          "$value": "{hpe-web.base.color.green.600}"
+        },
+        "strong": {
+          "$type": "color",
+          "$value": "{hpe-web.color.text.strong}",
+          "$description": "Emphasized icon color for increased visual prominence."
+        },
+        "warning": {
+          "$type": "color",
+          "$value": "{hpe-web.base.color.orange.500}"
+        },
+        "weak": {
+          "$type": "color",
+          "$value": "{hpe-web.color.text.weak}",
+          "$description": "Subtle icon color for reduced visual prominence."
+        }
+      },
+      "logo": {
+        "element": {
+          "$type": "color",
+          "$value": "{hpe-web.base.color.green.600}"
+        },
+        "logoText": {
+          "$type": "color",
+          "$value": "{hpe-web.base.color.white.100}"
+        }
+      },
+      "text": {
+        "critical": {
+          "$type": "color",
+          "$value": "{hpe-web.base.color.red.500}"
+        },
+        "default": {
+          "$type": "color",
+          "$value": "{hpe-web.base.color.grey.200}",
+          "$description": "Default text color that is accessible on standard background colors. Also called 'text.default'"
+        },
+        "disabled": {
+          "$type": "color",
+          "$value": "{hpe-web.base.color.white.opacity24}",
+          "$description": "Disabled color for text. Using disabled colors ensures that disabled components are consistently styled."
+        },
+        "neutral-strong": {
+          "$type": "color",
+          "$value": "{hpe-web.base.color.grey.50}"
+        },
+        "ok": {
+          "$type": "color",
+          "$value": "{hpe-web.deprecated.base.color.green.400}"
+        },
+        "onStrong": {
+          "$type": "color",
+          "$value": "{hpe-web.base.color.grey.1000}",
+          "$description": "Text color to be used for text sitting on a primary background. This text and background pairing helps ensure accessibility."
+        },
+        "primary": {
+          "$type": "color",
+          "$value": "{hpe-web.base.color.green.400}",
+          "$description": "Text color to be used for text sitting on a primary background. This text and background pairing helps ensure accessibility."
+        },
+        "primary-strong": {
+          "$type": "color",
+          "$value": "{hpe-web.base.color.green.600}",
+          "$description": "Strong variant text color to be used for text sitting on a primary background. This text and background pairing helps ensure accessibility."
+        },
+        "strong": {
+          "$type": "color",
+          "$value": "{hpe-web.base.color.white.100}",
+          "$description": "Also called 'text.strong'"
+        },
+        "warning": {
+          "$type": "color",
+          "$value": "{hpe-web.base.color.orange.500}"
+        },
+        "weak": {
+          "$type": "color",
+          "$value": "{hpe-web.base.color.grey.500}",
+          "$description": "Subtle text color for reduced visual prominence. Often used for supporting text."
+        }
+      },
+      "transparent": {
+        "$type": "color",
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [
+            1,
+            1,
+            1
+          ],
+          "hex": "#ffffff",
+          "alpha": 0
+        }
+      }
+    },
+    "deprecated": {
+      "deprecated-gradient": {
+        "element green": {
+          "stop0": {
+            "$type": "color",
+            "$value": "{hpe-web.base.color.green.550}",
+            "$deprecated": true
+          },
+          "stop100": {
+            "$type": "color",
+            "$value": {
+              "colorSpace": "srgb",
+              "components": [
+                0.059,
+                0.063,
+                0.086
+              ],
+              "hex": "#0f1016",
+              "alpha": 0
+            },
+            "$deprecated": true
+          }
+        },
+        "element neutral": {
+          "stop0": {
+            "$type": "color",
+            "$value": {
+              "colorSpace": "srgb",
+              "components": [
+                0.361,
+                0.4,
+                0.447
+              ],
+              "hex": "#5c6672"
+            },
+            "$deprecated": true
+          }
+        },
+        "neutral": {
+          "stop100": {
+            "$type": "color",
+            "$value": {
+              "colorSpace": "srgb",
+              "components": [
+                0.114,
+                0.122,
+                0.153
+              ],
+              "hex": "#1d1f27"
+            },
+            "$deprecated": true
+          }
+        },
+        "video overlay": {
+          "stop0": {
+            "$type": "color",
+            "$value": {
+              "colorSpace": "srgb",
+              "components": [
+                0,
+                0,
+                0
+              ],
+              "hex": "#000000",
+              "alpha": 0
+            },
+            "$deprecated": true
+          },
+          "stop100": {
+            "$type": "color",
+            "$value": {
+              "colorSpace": "srgb",
+              "components": [
+                0,
+                0,
+                0
+              ],
+              "hex": "#000000",
+              "alpha": 0.4
+            },
+            "$deprecated": true
+          }
+        }
+      }
+    }
+  }
+}