{
  "oip": {
    "color": {
      "$extensions": {
        "dte.metadata": {
          "groupDescription": "Globally tweak commonly used colors."
        }
      },
      "primary": {
        "value": "hsl(var(--oip-color-primary-h), var(--oip-color-primary-s), var(--oip-color-primary-l))",
        "comment": "The primary color #0065BD makes up a large part of the theme, it is used in buttons for example.",
        "$extensions": {
          "dte.metadata": {
            "isCurated": true,
            "category": "color"
          }
        }
      },
      "primary-h": {
        "value": "210",
        "comment": "Primary color hue value"
      },
      "primary-s": {
        "value": "100%",
        "comment": "Primary color saturation value"
      },
      "primary-l": {
        "value": "37%",
        "comment": "Primary color lightness value"
      },
      "primary-lighter": {
        "value": "hsl(var(--oip-color-primary-h), var(--oip-color-primary-s), calc(var(--oip-color-primary-l) + 30%))",
        "comment": "Lighter version of primary color"
      },
      "primary-darker": {
        "value": "hsl(var(--oip-color-primary-h), var(--oip-color-primary-s), calc(var(--oip-color-primary-l) - 10%))",
        "comment": "Darker version of primary color"
      },
      "secondary": {
        "value": "hsl(var(--oip-color-secondary-h), var(--oip-color-secondary-s), var(--oip-color-secondary-l))",
        "comment": "The secondary color #006A0F compliments the primary color and serves as the default for text-links.",
        "$extensions": {
          "dte.metadata": {
            "isCurated": true,
            "category": "color"
          }
        }
      },
      "secondary-h": {
        "value": "207",
        "comment": "Secondary color hue value"
      },
      "secondary-s": {
        "value": "80%",
        "comment": "Secondary color saturation value"
      },
      "secondary-l": {
        "value": "35%",
        "comment": "Secondary color lightness value"
      },
      "secondary-darker": {
        "value": "hsl(var(--oip-color-secondary-h), var(--oip-color-secondary-s), calc(var(--oip-color-secondary-l) - 10%))",
        "comment": "Darker version of secondary color"
      },
      "accent": {
        "value": "hsl(var(--oip-color-accent-h), var(--oip-color-accent-s), var(--oip-color-accent-l))",
        "comment": "The accent color #E10019 is usually the main identity color for a municipality",
        "$extensions": {
          "dte.metadata": {
            "isCurated": true,
            "category": "color"
          }
        }
      },
      "accent-h": {
        "value": "50",
        "comment": "Accent color hue value"
      },
      "accent-s": {
        "value": "94%",
        "comment": "Accent color saturation value"
      },
      "accent-l": {
        "value": "57%",
        "comment": "Accent color lightness value"
      },
      "accent-darker": {
        "value": "hsl(var(--oip-color-accent-h), var(--oip-color-accent-s), calc(var(--oip-color-accent-l) - 10%))",
        "comment": "Darker version of accent color"
      },
      "accent-lighter": {
        "value": "hsl(var(--oip-color-accent-h), var(--oip-color-accent-s), calc(var(--oip-color-accent-l) + 10%))",
        "comment": "Lighter version of accent color"
      },
      "info": {
        "value": "#2566A7",
        "comment": "The dark blue text color for informational states and/or messages.",
        "$extensions": {
          "dte.metadata": {
            "isCurated": true,
            "category": "color"
          }
        }
      },
      "info-light": {
        "value": "#D5E6F6",
        "comment": "The light blue background color for informational states and/or messages.",
        "$extensions": {
          "dte.metadata": {
            "isCurated": true,
            "category": "color"
          }
        }
      },
      "success": {
        "value": "#4A7746",
        "comment": "The dark green text color for success states and/or messages."
      },
      "success-light": {
        "value": "#ecf4ec",
        "comment": "The light green background color for success states and/or messages."
      },
      "warning": {
        "value": "#704000",
        "comment": "The dark orange text color for warning states and/or messages."
      },
      "warning-light": {
        "value": "#ffdcad",
        "comment": "The light orange background color for warning states and/or messages."
      },
      "danger": {
        "value": "#5c000f",
        "comment": "The dark red text color for error/critical states and/or messages."
      },
      "danger-h": {
        "value": "34",
        "comment": "Danger color hue value"
      },
      "danger-s": {
        "value": "100%",
        "comment": "Danger color saturation value"
      },
      "danger-l": {
        "value": "27%",
        "comment": "Danger color lightness value"
      },
      "danger-light": {
        "value": "hsl(var(--oip-color-danger-h), var(--oip-color-danger-s), calc(var(--oip-color-danger-l) + 13%))",
        "comment": "The light red background color for error/critical states and/or messages."
      },
      "danger-lightest": {
        "value": "hsl(var(--oip-color-danger-h), var(--oip-color-danger-s), calc(var(--oip-color-danger-l) + 57%))",
        "comment": "Lightest version of danger color"
      },
      "bg": {
        "value": "#ffffff",
        "comment": "Background color for the (main) user interface."
      },
      "fg": {
        "value": "#4b4b4b",
        "comment": "Blackish/gray-dark foreground color for the (main) user interface."
      },
      "fg-font-primary": {
        "value": "#ffffff",
        "comment": "White font color for texts inside primary buttons."
      },
      "fg-font-secondary": {
        "value": "#ffffff",
        "comment": "White font color for texts inside secondary buttons."
      },
      "fg-font-accent": {
        "value": "#4b4b4b",
        "comment": "Dark gray font color for texts inside areas with a very light accent color as a light background-color."
      },
      "fg-lighter": {
        "value": "#676767",
        "comment": "Blackish 90% gray foreground color for lighter text elements (eg date)."
      },
      "fg-muted": {
        "value": "#757575",
        "comment": "Font/foreground color for non-actionable or less-important content."
      },
      "fg-heading": {
        "value": "#000000",
        "comment": "Black foreground color for fully black elements, like headings."
      },
      "border": {
        "value": "#d2d2d2",
        "comment": "Default color for borders."
      },
      "gray": {
        "value": "#d2d2d2",
        "comment": "Default 80% gray for borders."
      },
      "gray-lighter": {
        "value": "#7a7a7a",
        "comment": "Default light-gray for table text."
      },
      "gray-lightest": {
        "value": "#f3f3f3",
        "comment": "Very lightest gray for hover styles."
      },
      "focus": {
        "$extensions": {
          "dte.metadata": {
            "stateType": "userAction"
          }
        },
        "border": {}
      },
      "red-notification": {
        "value": "#e50026",
        "comment": "The bright red color for notification badges and texts."
      }
    }
  }
}