Component: @phase2/outline-core-button

.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';

packages/outline-core-button/CHANGELOG.md

@@ -0,0 +1,5 @@
+# @phase2/outline-core-button
+
+## 0.0.1
+
+### Patch Changes

packages/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/outline-core-button/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@phase2/outline-core-button",
+  "version": "0.0.1",
+  "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/outline-core-button/src/css-variables/vars-default.css

@@ -0,0 +1,23 @@
+/*
+Default CSS Variables for `outline-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-button` styling can be found in
+`outline-button.ts` delcared with the `@cssprop` annotations.
+*/
+
+/*
+--outline-button--family
+--outline-button--weight
+--outline-button--padding
+--outline-button--radius
+*/
+
+:host {
+  --outline-button--family--computed: var(--outline-button--family, var(--ff-body));
+  --outline-button--weight--computed: var(--outline-button--weight, var(--fw-semibold));
+  --outline-button--padding--computed: var(--outline-button--padding, var(--spacing-2) var(--spacing-4));
+  --outline-button--radius--computed: var(--outline-button--radius, var(--spacing-2));
+}

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

@@ -0,0 +1,84 @@
+/*
+Default CSS Variables for the `outline-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-button` styling can be found in
+`outline-button.ts` delcared with the `@cssprop` annotations.
+*/
+
+/*
+--outline-button--link-padding
+--outline-button--link-radius
+--outline-button--link-bg-color
+--outline-button--link-text-color
+--outline-button--link-decoration
+--outline-button--link-weight
+--outline-button--link-ring
+
+--outline-button--link-bg-color-hover
+--outline-button--link-text-color-hover
+--outline-button--link-decoration-hover
+--outline-button--link-weight-hover
+--outline-button--link-ring-hover
+
+--outline-button--link-bg-color-focus
+--outline-button--link-text-color-focus
+--outline-button--link-decoration-focus
+--outline-button--link-weight-focus
+--outline-button--link-ring-focus
+
+--outline-button--link-disabled-bg-color
+--outline-button--link-disabled-text-color
+--outline-button--link-disabled-decoration
+--outline-button--link-disabled-weight
+--outline-button--link-disabled-ring
+--outline-button--link-disabled-bg-color-focus
+--outline-button--link-disabled-text-color-focus
+--outline-button--link-disabled-decoration-focus
+--outline-button--link-disabled-weight-focus
+--outline-button--link-disabled-ring-focus
+*/
+
+:host {
+
+  /* Link Button(s) */
+  --outline-button--link-padding--computed: var(--outline-button--link-padding, var(--outline-button--padding--computed));
+  --outline-button--link-radius--computed: var(--outline-button--link-radius, var(--outline-button--radius--computed));
+
+  /* Link Button(s) - Default */
+  --outline-button--link-bg-color--computed: var(--outline-button--link-bg-color, var(--outline-transparent));
+  --outline-button--link-color--computed: var(--outline-button--link-color, var(--outline-link--color--computed));
+  --outline-button--link-decoration--computed: var(--outline-button--link-decoration,  var(--outline-link--decoration--computed));
+  --outline-button--link-weight--computed: var(--outline-button--link-weight, var(--outline-button--weight--computed));
+  --outline-button--link-ring--computed: var(--outline-button--link-ring, none);
+
+  /* Link Button(s) - Hover */
+  --outline-button--link-bg-color-hover--computed: var(--outline-button--link-bg-color-hover, var(--outline-transparent));
+  --outline-button--link-color-hover--computed: var(--outline-button--link-color-hover, var(--outline-link--color-hover--computed));
+  --outline-button--link-decoration-hover--computed: var(--outline-button--link-decoration-hover, underline);
+  --outline-button--link-weight-hover--computed: var(--outline-button--link-weight-hover, var(--outline-button--weight--computed));
+  --outline-button--link-ring-hover--computed: var(--outline-button--link-ring-hover, none);
+
+  /* Link Button(s) - Focus */
+  --outline-button--link-bg-color-focus--computed: var(--outline-button--link-bg-color-focus, var(--outline-transparent));
+  --outline-button--link-color-focus--computed: var(--outline-button--link-color-focus, var(--outline-link--color-focus--computed));
+  --outline-button--link-decoration-focus--computed: var(--outline-button--link-decoration-focus, underline);
+  --outline-button--link-weight-focus--computed: var(--outline-button--link-weight-focus, var(--outline-button--weight--computed));
+  --outline-button--link-ring-focus--computed: var(--outline-button--link-ring-focus, none);
+
+  /* Link Button(s) - Disabled */
+  --outline-button--link-disabled-bg-color--computed: var(--outline-button--link-disabled-bg-color, var(--outline-transparent));
+  --outline-button--link-disabled-color--computed: var(--outline-button--link-disabled-color, var(--outline-gray-500));
+  --outline-button--link-disabled-decoration--computed: var(--outline-button--link-disabled-decoration, none);
+  --outline-button--link-disabled-weight--computed: var(--outline-button--link-disabled-weight, var(--outline-button--weight--computed));
+  --outline-button--link-disabled-ring--computed: var(--outline-button--link-disabled-ring, none);
+
+  /* Link Button(s) - Disabled:Focus */
+  --outline-button--link-disabled-bg-color-focus--computed: var(--outline-button--link-disabled-bg-color-focus, var(--outline-transparent));
+  --outline-button--link-disabled-color-focus--computed: var(--outline-button--link-disabled-color-focus, var(--outline-gray-500));
+  --outline-button--link-disabled-decoration-focus--computed: var(--outline-button--link-disabled-decoration-focus, none);
+  --outline-button--link-disabled-weight-focus--computed: var(--outline-button--link-disabled-weight-focus, var(--outline-button--weight--computed));
+  --outline-button--link-disabled-ring-focus--computed: var(--outline-button--link-disabled-ring-focus, var(--outline-ring-inset) 0 0 0 var(--outline-ring-offset-width) var(--outline-gray-500));
+}

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

@@ -0,0 +1,74 @@
+/*
+Default CSS Variables for the `outline-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-button` styling can be found in
+`outline-button.ts` delcared with the `@cssprop` annotations.
+*/
+/*
+// ### CSS Variables
+
+// > The following CSS Variables are used to style the primary buttons.
+
+// - \`--outline-button--primary-padding\`: Padding for the primary buttons.
+// - \`--outline-button--primary-radius\`: Border radius for the primary buttons.
+// - \`--outline-button--primary-bg-color\`: Background color for the primary buttons.
+// - \`--outline-button--primary-text-color\`: Text color for the primary buttons.
+// - \`--outline-button--primary-weight\`: Font weight for the primary buttons.
+// - \`--outline-button--primary-ring\`: Border ring for the primary buttons.
+// - \`--outline-button--primary-bg-color-hover\`: Background color for the primary buttons when hovered.
+// - \`--outline-button--primary-text-color-hover\`: Text color for the primary buttons when hovered.
+// - \`--outline-button--primary-weight-hover\`: Font weight for the primary buttons when hovered.
+// - \`--outline-button--primary-ring-hover\`: Border ring for the primary buttons when hovered.
+// - \`--outline-button--primary-bg-color-focus\`: Background color for the primary buttons when focused.
+// - \`--outline-button--primary-text-color-focus\`: Text color for the primary buttons when focused.
+// - \`--outline-button--primary-weight-focus\`: Font weight for the primary buttons when focused.
+// - \`--outline-button--primary-ring-focus\`: Border ring for the primary buttons when focused.
+// - \`--outline-button--primary-disabled-bg-color\`: Background color for the primary buttons when disabled.
+// - \`--outline-button--primary-disabled-text-color\`: Text color for the primary buttons when disabled.
+// - \`--outline-button--primary-disabled-weight\`: Font weight for the primary buttons when disabled.
+// - \`--outline-button--primary-disabled-ring\`: Border ring for the primary buttons when disabled.
+// - \`--outline-button--primary-disabled-bg-color-focus\`: Background color for the primary buttons when disabled and focused.
+// - \`--outline-button--primary-disabled-text-color-focus\`: Text color for the primary buttons when disabled and focused.
+// - \`--outline-button--primary-disabled-weight-focus\`: Font weight for the primary buttons when disabled and focused.
+// - \`--outline-button--primary-disabled-ring-focus\`: Border ring for the primary buttons when disabled and focused.
+*/
+
+:host {
+
+  /* Primary Button(s) */
+  --outline-button--primary-padding--computed: var(--outline-button--primary-padding, var(--outline-button--padding--computed));
+  --outline-button--primary-radius--computed: var(--outline-button--primary-radius, var(--outline-button--radius--computed));
+
+  /* Primary Button(s) - Default */
+  --outline-button--primary-bg-color--computed: var(--outline-button--primary-bg-color, var(--outline-blue-600));
+  --outline-button--primary-color--computed: var(--outline-button--primary-color, var(--outline-white));
+  --outline-button--primary-weight--computed: var(--outline-button--primary-weight, var(--outline-button--weight--computed));
+  --outline-button--primary-ring--computed: var(--outline-button--primary-ring, none);
+
+  /* Primary Button(s) - Hover */
+  --outline-button--primary-bg-color-hover--computed: var(--outline-button--primary-bg-color-hover, var(--outline-white));
+  --outline-button--primary-color-hover--computed: var(--outline-button--primary-color-hover, var(--outline-blue-600));
+  --outline-button--primary-weight-hover--computed: var(--outline-button--primary-weight-hover, var(--outline-button--weight--computed));
+  --outline-button--primary-ring-hover--computed: var(--outline-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-button--primary-bg-color-focus--computed: var(--outline-button--primary-bg-color-focus, var(--outline-white));
+  --outline-button--primary-color-focus--computed: var(--outline-button--primary-color-focus, var(--outline-blue-600));
+  --outline-button--primary-weight-focus--computed: var(--outline-button--primary-weight-focus, var(--outline-button--weight--computed));
+  --outline-button--primary-ring-focus--computed: var(--outline-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-button--primary-disabled-bg-color--computed: var(--outline-button--primary-disabled-bg-color, var(--outline-white));
+  --outline-button--primary-disabled-color--computed: var(--outline-button--primary-disabled-color, var(--outline-gray-400));
+  --outline-button--primary-disabled-weight--computed: var(--outline-button--primary-disabled-weight, var(--outline-button--weight--computed));
+  --outline-button--primary-disabled-ring--computed: var(--outline-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-button--primary-disabled-bg-color-focus--computed: var(--outline-button--primary-disabled-bg-color-focus, var(--outline-white));
+  --outline-button--primary-disabled-color-focus--computed: var(--outline-button--primary-disabled-color-focus, var(--outline-gray-400));
+  --outline-button--primary-disabled-weight-focus--computed: var(--outline-button--primary-disabled-weight-focus, var(--outline-button--weight--computed));
+  --outline-button--primary-disabled-ring-focus--computed: var(--outline-button--primary-disabled-ring-focus, var(--outline-ring-inset) 0 0 0 var(--outline-ring-offset-width) var(--outline-gray-400));
+}

packages/outline-core-button/src/css-variables/vars-secondary.css

@@ -0,0 +1,74 @@
+/*
+Default CSS Variables for the `outline-button` secondary 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-button` styling can be found in
+`outline-button.ts` delcared with the `@cssprop` annotations.
+*/
+
+/*
+--outline-button--secondary-padding
+--outline-button--secondary-radius
+--outline-button--secondary-bg-color
+--outline-button--secondary-text-color
+--outline-button--secondary-weight
+--outline-button--secondary-ring
+
+--outline-button--secondary-bg-color-hover
+--outline-button--secondary-text-color-hover
+--outline-button--secondary-weight-hover
+--outline-button--secondary-ring-hover
+
+--outline-button--secondary-bg-color-focus
+--outline-button--secondary-text-color-focus
+--outline-button--secondary-weight-focus
+--outline-button--secondary-ring-focus
+
+--outline-button--secondary-disabled-bg-color
+--outline-button--secondary-disabled-text-color
+--outline-button--secondary-disabled-weight
+--outline-button--secondary-disabled-ring
+--outline-button--secondary-disabled-bg-color-focus
+--outline-button--secondary-disabled-text-color-focus
+--outline-button--secondary-disabled-weight-focus
+--outline-button--secondary-disabled-ring-focus
+*/
+
+:host {
+
+  /* Secondary Button(s) */
+  --outline-button--secondary-padding--computed: var(--outline-button--secondary-padding, var(--outline-button--padding--computed));
+  --outline-button--secondary-radius--computed: var(--outline-button--secondary-radius, var(--outline-button--radius--computed));
+
+  /* Secondary Button(s) - Default */
+  --outline-button--secondary-bg-color--computed: var(--outline-button--secondary-bg-color, var(--outline-white));
+  --outline-button--secondary-color--computed: var(--outline-button--secondary-color, var(--outline-blue-600));
+  --outline-button--secondary-weight--computed: var(--outline-button--secondary-weight, var(--outline-button--weight--computed));
+  --outline-button--secondary-ring--computed: var(--outline-button--secondary-ring, var(--outline-ring-inset) 0 0 0 var(--outline-ring-offset-width) var(--outline-blue-600));
+
+  /* Secondary Button(s) - Hover */
+  --outline-button--secondary-bg-color-hover--computed: var(--outline-button--secondary-bg-color-hover, var(--outline-blue-600));
+  --outline-button--secondary-color-hover--computed: var(--outline-button--secondary-color-hover, var(--outline-white));
+  --outline-button--secondary-weight-hover--computed: var(--outline-button--secondary-weight-hover, var(--outline-button--weight--computed));
+  --outline-button--secondary-ring-hover--computed: var(--outline-button--secondary-ring-hover, none);
+
+  /* Secondary Button(s) - Focus */
+  --outline-button--secondary-bg-color-focus--computed: var(--outline-button--secondary-bg-color-focus, var(--outline-blue-600));
+  --outline-button--secondary-color-focus--computed: var(--outline-button--secondary-color-focus, var(--outline-white));
+  --outline-button--secondary-weight-focus--computed: var(--outline-button--secondary-weight-focus, var(--outline-button--weight--computed));
+  --outline-button--secondary-ring-focus--computed: var(--outline-button--secondary-ring-focus, none);
+
+  /* Secondary Button(s) - Disabled */
+  --outline-button--secondary-disabled-bg-color--computed: var(--outline-button--secondary-disabled-bg-color, var(--outline-white));
+  --outline-button--secondary-disabled-color--computed: var(--outline-button--secondary-disabled-color, var(--outline-gray-400));
+  --outline-button--secondary-disabled-weight--computed: var(--outline-button--secondary-disabled-weight, var(--outline-button--weight--computed));
+  --outline-button--secondary-disabled-ring--computed: var(--outline-button--secondary-disabled-ring, var(--outline-ring-inset) 0 0 0 var(--outline-ring-offset-width) var(--outline-gray-300));
+
+  /* Secondary Button(s) - Disabled:Focus */
+  --outline-button--secondary-disabled-bg-color-focus--computed: var(--outline-button--secondary-disabled-bg-color-focus, var(--outline-white));
+  --outline-button--secondary-disabled-color-focus--computed: var(--outline-button--secondary-disabled-color-focus, var(--outline-gray-400));
+  --outline-button--secondary-disabled-weight-focus--computed: var(--outline-button--secondary-disabled-weight-focus, var(--outline-button--weight--computed));
+  --outline-button--secondary-disabled-ring-focus--computed: var(--outline-button--secondary-disabled-ring-focus, var(--outline-ring-inset) 0 0 0 var(--outline-ring-offset-width) var(--outline-gray-400));
+}