Add style-dictionary definitions

web/style-definitions/README.md

@@ -0,0 +1,10 @@
+# Style Definitions
+
+Read more about [Style Dictionary](https://amzn.github.io/style-dictionary)
+## Add
+
+Add to the `tokens/**/*.yaml` files to add or modify style values.
+
+## Generating 
+
+Run `npm run build-styles` to regenerate the CSS variables.

web/style-definitions/build.sh

@@ -0,0 +1,4 @@
+#!/bin/sh
+
+mv build/variables.css ../styles/variables.css
+mv build/variables.less ../styles/theme.less

web/style-definitions/config.js

@@ -0,0 +1,41 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+const yaml = require('yaml');
+
+module.exports = {
+  parsers: [
+    {
+      // A custom parser will only run against filenames that match the pattern
+      // This pattern will match any file with the .yaml extension.
+      // This allows you to mix different types of files in your token source
+      pattern: /\.yaml$/,
+      // the parse function takes a single argument, which is an object with
+      // 2 attributes: contents which is a string of the file contents, and
+      // filePath which is the path of the file.
+      // The function is expected to return a plain object.
+      parse: ({ contents, filePath }) => yaml.parse(contents),
+    },
+  ],
+  source: [`tokens/**/*.yaml`],
+  platforms: {
+    css: {
+      transformGroup: 'css',
+      buildPath: 'build/',
+      files: [
+        {
+          destination: 'variables.css',
+          format: 'css/variables',
+        },
+      ],
+    },
+    less: {
+      transformGroup: 'less',
+      buildPath: 'build/',
+      files: [
+        {
+          destination: 'variables.less',
+          format: 'less/variables',
+        },
+      ],
+    },
+  },
+};

web/style-definitions/tokens/color/antd-overrides.yaml

@@ -0,0 +1,34 @@
+# Ant Design component color overrides.
+# You can find the variable names to override at:
+# https://github.com/ant-design/ant-design/blob/master/components/style/themes/dark.less
+
+text-color: 
+  value: "var(--theme-text-color)"
+text-color-secondry:
+  value: "var(--theme-text-color-secondary)"
+link-color:
+  value: "var(--theme-link-color)"
+popover-background:
+  value: "var(--theme-background)"
+background-color-light:
+  value: "{color.owncast.purple.100.value}"
+
+# These values require explicit colors and cannot take css variables.
+primary-color: 
+  value: "{color.owncast.purple.500.value}"
+info-color:
+  value: "{color.owncast.gray.500.value}"
+success-color:
+  value: "{color.owncast.green.500.value}"
+warning-color:
+  value: "{color.owncast.orange.500.value}"
+error-color:
+  value: "{color.owncast.red.500.value}"
+purple-base:
+  value: "{color.owncast.purple.500.value}"
+green-base:
+  value: "{color.owncast.green.500.value}"
+red-base:
+  value: "{color.owncast.red.500.value}"
+orange-base:
+  value: "{color.owncast.orange.500.value}"

web/style-definitions/tokens/color/default-theme.yaml

@@ -0,0 +1,26 @@
+# These are the variables used in the user interface.
+# They can be overwritten to customize the look and feel.
+# We should write some documentation on how to do that when the time comes.
+
+theme:
+  primary-color:
+    value: "{color.owncast.purple.500.value}"
+  text-color:
+    value: "{color.owncast.gray.300.value}"
+  text-color-secondary:
+    value: "{color.owncast.gray.500.value}"
+  link-color:
+    value: "{color.owncast.purple.500.value}"
+  success-color:
+    value: "{color.owncast.green.500.value}"
+  info-color:
+    value: "{color.owncast.purple.300.value}"
+  warning-color:
+    value: "{color.owncast.orange.500.value}"
+  error-color:
+    value: "{color.owncast.red.500.value}"
+  font-family:
+    value: "{font.owncast.family.value}"
+  background:
+    value: "{color.owncast.background.value}"
+  

web/style-definitions/tokens/color/owncast-colors.yaml

@@ -0,0 +1,112 @@
+# These are colors that make up the Owncast-specific color palette.
+color:
+  # The Owncast color definitions.
+  owncast:
+    purple:
+      100:
+        value: "#f4ebff"
+      300:
+        value: "#d6bbfb"
+      500:
+        value: "#9e77ed"
+      700:
+        value: "#6941c6"
+      900:
+        value: "#42307d"
+
+    green:
+      100:
+        value: "#d15ad5"
+      300:
+        value: "#6ce9a6"
+      500:
+        value: "#12b76a"
+      700:
+        value: "#027a48"
+      900:
+        value: "#054f31"
+
+    red:
+      100:
+        value: "#fee4e2"
+      300:
+        value: "#fda29b"
+      500:
+        value: "#f04438"
+      700:
+        value: "#b42318"
+      900:
+        value: "#7a271a"
+
+    orange:
+      100:
+        value: "#fef0c7"
+      300:
+        value: "#fec84b"
+      500:
+        value: "#f79009"
+      700:
+        value: "#b54708"
+      900:
+        value: "#93370d"
+
+    gray:
+      100:
+        value: "#f2f4f7"
+      300:
+        value: "#d0d5dd"
+      500:
+        value: "#667085"
+      700:
+        value: "#344054"
+      900:
+        value: "#101828"
+
+    logo:
+      purple:
+        value: "rgba(120, 113, 255, 1)"
+      pink:
+        value: "rgba(201, 139, 254, 1)"
+      blue:
+        value: "rgba(32, 134, 225, 1)"
+
+    background-light:
+      value: "rgba(27, 26, 38, 1)"
+    background:
+      value: "rgba(23, 21, 35, 1)"
+      
+font:
+  owncast:      
+    family:
+      value: "'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+        'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
+        'Segoe UI Symbol', 'Noto Color Emoji';"
+
+# Values used in the admin and should be migrated to variables or removed.
+# See ant-overrides.scss.
+owncast-purple:
+  value: "{color.owncast.logo.purple}"
+owncast-purple-25: 
+  value: "rgba(120, 113, 255, 0.25)"
+owncast-purple-50:
+  value: "rgba(120, 113, 255, 0.5)"
+online-color:
+  value: "#73dd3f"
+offline-color:
+  value: "#999"
+pink:
+  value: "{color.owncast.logo.pink}"
+purple:
+  value: "{color.owncast.logo.purple}"
+blue:
+  value: "{color.owncast.logo.blue}"
+white-88:
+  value: "{color.owncast.gray.500}"
+purple-dark:
+  value: "rgba(28, 26, 59, 1)"
+default-link-color:
+  value: "{color.owncast.logo.pink}"
+default-bg-color:
+  value: "black"
+default-text-color:
+  value: "rgba(255, 255, 255, 0.88)"