Component: @phase2/outline-core-button

.husky/pre-commit

@@ -0,0 +1,45 @@
+#!/bin/sh
+
+if [ "$LEFTHOOK" = "0" ]; then
+  exit 0
+fi
+
+call_lefthook()
+{
+  dir="$(git rev-parse --show-toplevel)"
+  osArch=$(uname | tr '[:upper:]' '[:lower:]')
+  cpuArch=$(uname -m | sed 's/aarch64/arm64/')
+
+  if lefthook -h >/dev/null 2>&1
+  then
+    lefthook "$@"
+  elif test -f "$dir/node_modules/lefthook/bin/index.js"
+  then
+    "$dir/node_modules/lefthook/bin/index.js" "$@"
+  elif test -f "$dir/node_modules/@evilmartians/lefthook/bin/lefthook_${osArch}_${cpuArch}/lefthook"
+  then
+    "$dir/node_modules/@evilmartians/lefthook/bin/lefthook_${osArch}_${cpuArch}/lefthook" "$@"
+  elif test -f "$dir/node_modules/@evilmartians/lefthook-installer/bin/lefthook_${osArch}_${cpuArch}/lefthook"
+  then
+    "$dir/node_modules/@evilmartians/lefthook-installer/bin/lefthook_${osArch}_${cpuArch}/lefthook" "$@"
+  elif bundle exec lefthook -h >/dev/null 2>&1
+  then
+    bundle exec lefthook "$@"
+  elif yarn lefthook -h >/dev/null 2>&1
+  then
+    yarn lefthook "$@"
+  elif pnpm lefthook -h >/dev/null 2>&1
+  then
+    pnpm lefthook "$@"
+  elif command -v npx >/dev/null 2>&1
+  then
+    npx @evilmartians/lefthook "$@"
+  elif swift package plugin lefthook >/dev/null 2>&1
+  then
+    swift package --disable-sandbox plugin lefthook "$@"
+  else
+    echo "Can't find lefthook in PATH"
+  fi
+}
+
+call_lefthook run "pre-commit" "$@"

.storybook/storybook.css

@@ -1,5 +1,3 @@
 @import url('https://rsms.me/inter/inter.css');
 /* Outline */
 @import '../packages/outline-templates/default/outline.theme.css';
-/* Global Tailwind Utilities */
-@import '../packages/outline-templates/default/tailwind.css';

package.json

@@ -136,7 +136,7 @@
     "svgo": "^2.8.0",
     "tailwindcss": "3.0.0",
     "ts-lit-plugin": "^1.2.1",
-    "turbo": "^1.2.16",
+    "turbo": "^1.10.16",
     "vite": "^4.1.4"
   },
   "dependencies": {},

packages/components/outline-core-button/CHANGELOG.md

@@ -0,0 +1,11 @@
+# @phase2/outline-core-button
+
+## 0.0.2
+
+### Patch Changes
+
+- Updates for outline-core-button.
+
+## 0.0.1
+
+### Patch Changes

packages/components/outline-core-button/index.ts

@@ -0,0 +1,2 @@
+export { OutlineCoreButton } from './src/outline-core-button';
+export type { ButtonVariant, ButtonSize } from './src/outline-core-button';

packages/components/outline-core-button/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@phase2/outline-core-button",
+  "version": "0.0.2",
+  "description": "The Outline Components for the web button component",
+  "keywords": [
+    "outline components",
+    "outline design",
+    "button"
+  ],
+  "main": "index.ts",
+  "types": "index.ts",
+  "typings": "index.d.ts",
+  "files": [
+    "/dist/",
+    "/src/",
+    "!/dist/tsconfig.build.tsbuildinfo"
+  ],
+  "author": "Phase2 Technology",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/phase2/outline.git",
+    "directory": "packages/outline-core-button"
+  },
+  "license": "BSD-3-Clause",
+  "scripts": {
+    "build": "node ../../../scripts/build.js",
+    "package": "yarn publish"
+  },
+  "dependencies": {
+    "@phase2/outline-core": "^0.1.10",
+    "@phase2/outline-link": "^0.1.4",
+    "lit": "^2.3.1",
+    "tslib": "^2.1.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "exports": {
+    ".": "./index.ts"
+  }
+}

packages/components/outline-core-button/src/css-variables/vars-default.css

@@ -0,0 +1,23 @@
+/*
+Default CSS Variables for `outline-core-button`.
+You can override these using `outline.theme.css`,
+or any css file in your consumer application with
+a later loading order than `outline.theme.css`.
+The variables used to override the default
+`outline-core-button` styling can be found in
+`outline-core-button.ts` delcared with the `@cssprop` annotations.
+*/
+
+/*
+--outline-core-button--family
+--outline-core-button--weight
+--outline-core-button--padding
+--outline-core-button--radius
+*/
+
+:host {
+  --outline-core-button--family--computed: var(--outline-core-button--family, var(--ff-body));
+  --outline-core-button--weight--computed: var(--outline-core-button--weight, var(--fw-semibold));
+  --outline-core-button--padding--computed: var(--outline-core-button--padding, var(--spacing-2) var(--spacing-4));
+  --outline-core-button--radius--computed: var(--outline-core-button--radius, var(--spacing-2));
+}

packages/components/outline-core-button/src/css-variables/vars-link.css

@@ -0,0 +1,84 @@
+/*
+Default CSS Variables for the `outline-core-button` link variant.
+You can override these using `outline.theme.css`,
+or any css file in your consumer application with
+a later loading order than `outline.theme.css`.
+The variables used to override the default
+`outline-core-button` styling can be found in
+`outline-core-button.ts` delcared with the `@cssprop` annotations.
+*/
+
+/*
+--outline-core-button--link-padding
+--outline-core-button--link-radius
+--outline-core-button--link-bg-color
+--outline-core-button--link-text-color
+--outline-core-button--link-decoration
+--outline-core-button--link-weight
+--outline-core-button--link-ring
+
+--outline-core-button--link-bg-color-hover
+--outline-core-button--link-text-color-hover
+--outline-core-button--link-decoration-hover
+--outline-core-button--link-weight-hover
+--outline-core-button--link-ring-hover
+
+--outline-core-button--link-bg-color-focus
+--outline-core-button--link-text-color-focus
+--outline-core-button--link-decoration-focus
+--outline-core-button--link-weight-focus
+--outline-core-button--link-ring-focus
+
+--outline-core-button--link-disabled-bg-color
+--outline-core-button--link-disabled-text-color
+--outline-core-button--link-disabled-decoration
+--outline-core-button--link-disabled-weight
+--outline-core-button--link-disabled-ring
+--outline-core-button--link-disabled-bg-color-focus
+--outline-core-button--link-disabled-text-color-focus
+--outline-core-button--link-disabled-decoration-focus
+--outline-core-button--link-disabled-weight-focus
+--outline-core-button--link-disabled-ring-focus
+*/
+
+:host {
+
+  /* Link Button(s) */
+  --outline-core-button--link-padding--computed: var(--outline-core-button--link-padding, var(--outline-core-button--padding--computed));
+  --outline-core-button--link-radius--computed: var(--outline-core-button--link-radius, var(--outline-core-button--radius--computed));
+
+  /* Link Button(s) - Default */
+  --outline-core-button--link-bg-color--computed: var(--outline-core-button--link-bg-color, var(--outline-transparent));
+  --outline-core-button--link-color--computed: var(--outline-core-button--link-color, var(--outline-link--color--computed));
+  --outline-core-button--link-decoration--computed: var(--outline-core-button--link-decoration,  var(--outline-link--decoration--computed));
+  --outline-core-button--link-weight--computed: var(--outline-core-button--link-weight, var(--outline-core-button--weight--computed));
+  --outline-core-button--link-ring--computed: var(--outline-core-button--link-ring, none);
+
+  /* Link Button(s) - Hover */
+  --outline-core-button--link-bg-color-hover--computed: var(--outline-core-button--link-bg-color-hover, var(--outline-transparent));
+  --outline-core-button--link-color-hover--computed: var(--outline-core-button--link-color-hover, var(--outline-link--color-hover--computed));
+  --outline-core-button--link-decoration-hover--computed: var(--outline-core-button--link-decoration-hover, underline);
+  --outline-core-button--link-weight-hover--computed: var(--outline-core-button--link-weight-hover, var(--outline-core-button--weight--computed));
+  --outline-core-button--link-ring-hover--computed: var(--outline-core-button--link-ring-hover, none);
+
+  /* Link Button(s) - Focus */
+  --outline-core-button--link-bg-color-focus--computed: var(--outline-core-button--link-bg-color-focus, var(--outline-transparent));
+  --outline-core-button--link-color-focus--computed: var(--outline-core-button--link-color-focus, var(--outline-link--color-focus--computed));
+  --outline-core-button--link-decoration-focus--computed: var(--outline-core-button--link-decoration-focus, underline);
+  --outline-core-button--link-weight-focus--computed: var(--outline-core-button--link-weight-focus, var(--outline-core-button--weight--computed));
+  --outline-core-button--link-ring-focus--computed: var(--outline-core-button--link-ring-focus, none);
+
+  /* Link Button(s) - Disabled */
+  --outline-core-button--link-disabled-bg-color--computed: var(--outline-core-button--link-disabled-bg-color, var(--outline-transparent));
+  --outline-core-button--link-disabled-color--computed: var(--outline-core-button--link-disabled-color, var(--outline-gray-500));
+  --outline-core-button--link-disabled-decoration--computed: var(--outline-core-button--link-disabled-decoration, none);
+  --outline-core-button--link-disabled-weight--computed: var(--outline-core-button--link-disabled-weight, var(--outline-core-button--weight--computed));
+  --outline-core-button--link-disabled-ring--computed: var(--outline-core-button--link-disabled-ring, none);
+
+  /* Link Button(s) - Disabled:Focus */
+  --outline-core-button--link-disabled-bg-color-focus--computed: var(--outline-core-button--link-disabled-bg-color-focus, var(--outline-transparent));
+  --outline-core-button--link-disabled-color-focus--computed: var(--outline-core-button--link-disabled-color-focus, var(--outline-gray-500));
+  --outline-core-button--link-disabled-decoration-focus--computed: var(--outline-core-button--link-disabled-decoration-focus, none);
+  --outline-core-button--link-disabled-weight-focus--computed: var(--outline-core-button--link-disabled-weight-focus, var(--outline-core-button--weight--computed));
+  --outline-core-button--link-disabled-ring-focus--computed: var(--outline-core-button--link-disabled-ring-focus, var(--outline-ring-inset) 0 0 0 var(--outline-ring-offset-width) var(--outline-gray-500));
+}

packages/components/outline-core-button/src/css-variables/vars-primary.css

@@ -0,0 +1,74 @@
+/*
+Default CSS Variables for the `outline-core-button` primary variant.
+You can override these using `outline.theme.css`,
+or any css file in your consumer application with
+a later loading order than `outline.theme.css`.
+The variables used to override the default
+`outline-core-button` styling can be found in
+`outline-core-button.ts` delcared with the `@cssprop` annotations.
+*/
+/*
+// ### CSS Variables
+
+// > The following CSS Variables are used to style the primary buttons.
+
+// - \`--outline-core-button--primary-padding\`: Padding for the primary buttons.
+// - \`--outline-core-button--primary-radius\`: Border radius for the primary buttons.
+// - \`--outline-core-button--primary-bg-color\`: Background color for the primary buttons.
+// - \`--outline-core-button--primary-text-color\`: Text color for the primary buttons.
+// - \`--outline-core-button--primary-weight\`: Font weight for the primary buttons.
+// - \`--outline-core-button--primary-ring\`: Border ring for the primary buttons.
+// - \`--outline-core-button--primary-bg-color-hover\`: Background color for the primary buttons when hovered.
+// - \`--outline-core-button--primary-text-color-hover\`: Text color for the primary buttons when hovered.
+// - \`--outline-core-button--primary-weight-hover\`: Font weight for the primary buttons when hovered.
+// - \`--outline-core-button--primary-ring-hover\`: Border ring for the primary buttons when hovered.
+// - \`--outline-core-button--primary-bg-color-focus\`: Background color for the primary buttons when focused.
+// - \`--outline-core-button--primary-text-color-focus\`: Text color for the primary buttons when focused.
+// - \`--outline-core-button--primary-weight-focus\`: Font weight for the primary buttons when focused.
+// - \`--outline-core-button--primary-ring-focus\`: Border ring for the primary buttons when focused.
+// - \`--outline-core-button--primary-disabled-bg-color\`: Background color for the primary buttons when disabled.
+// - \`--outline-core-button--primary-disabled-text-color\`: Text color for the primary buttons when disabled.
+// - \`--outline-core-button--primary-disabled-weight\`: Font weight for the primary buttons when disabled.
+// - \`--outline-core-button--primary-disabled-ring\`: Border ring for the primary buttons when disabled.
+// - \`--outline-core-button--primary-disabled-bg-color-focus\`: Background color for the primary buttons when disabled and focused.
+// - \`--outline-core-button--primary-disabled-text-color-focus\`: Text color for the primary buttons when disabled and focused.
+// - \`--outline-core-button--primary-disabled-weight-focus\`: Font weight for the primary buttons when disabled and focused.
+// - \`--outline-core-button--primary-disabled-ring-focus\`: Border ring for the primary buttons when disabled and focused.
+*/
+
+:host {
+
+  /* Primary Button(s) */
+  --outline-core-button--primary-padding--computed: var(--outline-core-button--primary-padding, var(--outline-core-button--padding--computed));
+  --outline-core-button--primary-radius--computed: var(--outline-core-button--primary-radius, var(--outline-core-button--radius--computed));
+
+  /* Primary Button(s) - Default */
+  --outline-core-button--primary-bg-color--computed: var(--outline-core-button--primary-bg-color, var(--outline-blue-600));
+  --outline-core-button--primary-color--computed: var(--outline-core-button--primary-color, var(--outline-white));
+  --outline-core-button--primary-weight--computed: var(--outline-core-button--primary-weight, var(--outline-core-button--weight--computed));
+  --outline-core-button--primary-ring--computed: var(--outline-core-button--primary-ring, none);
+
+  /* Primary Button(s) - Hover */
+  --outline-core-button--primary-bg-color-hover--computed: var(--outline-core-button--primary-bg-color-hover, var(--outline-white));
+  --outline-core-button--primary-color-hover--computed: var(--outline-core-button--primary-color-hover, var(--outline-blue-600));
+  --outline-core-button--primary-weight-hover--computed: var(--outline-core-button--primary-weight-hover, var(--outline-core-button--weight--computed));
+  --outline-core-button--primary-ring-hover--computed: var(--outline-core-button--primary-ring-hover, var(--outline-ring-inset) 0 0 0 var(--outline-ring-offset-width) var(--outline-blue-600));
+
+  /* Primary Button(s) - Focus */
+  --outline-core-button--primary-bg-color-focus--computed: var(--outline-core-button--primary-bg-color-focus, var(--outline-white));
+  --outline-core-button--primary-color-focus--computed: var(--outline-core-button--primary-color-focus, var(--outline-blue-600));
+  --outline-core-button--primary-weight-focus--computed: var(--outline-core-button--primary-weight-focus, var(--outline-core-button--weight--computed));
+  --outline-core-button--primary-ring-focus--computed: var(--outline-core-button--primary-ring-focus, var(--outline-ring-inset) 0 0 0 var(--outline-ring-offset-width) var(--outline-blue-600));
+
+  /* Primary Button(s) - Disabled */
+  --outline-core-button--primary-disabled-bg-color--computed: var(--outline-core-button--primary-disabled-bg-color, var(--outline-white));
+  --outline-core-button--primary-disabled-color--computed: var(--outline-core-button--primary-disabled-color, var(--outline-gray-400));
+  --outline-core-button--primary-disabled-weight--computed: var(--outline-core-button--primary-disabled-weight, var(--outline-core-button--weight--computed));
+  --outline-core-button--primary-disabled-ring--computed: var(--outline-core-button--primary-disabled-ring, var(--outline-ring-inset) 0 0 0 var(--outline-ring-offset-width) var(--outline-gray-300));
+
+  /* Primary Button(s) - Disabled:Focus */
+  --outline-core-button--primary-disabled-bg-color-focus--computed: var(--outline-core-button--primary-disabled-bg-color-focus, var(--outline-white));
+  --outline-core-button--primary-disabled-color-focus--computed: var(--outline-core-button--primary-disabled-color-focus, var(--outline-gray-400));
+  --outline-core-button--primary-disabled-weight-focus--computed: var(--outline-core-button--primary-disabled-weight-focus, var(--outline-core-button--weight--computed));
+  --outline-core-button--primary-disabled-ring-focus--computed: var(--outline-core-button--primary-disabled-ring-focus, var(--outline-ring-inset) 0 0 0 var(--outline-ring-offset-width) var(--outline-gray-400));
+}