feat(cornerrounding): add custom token and foundations documentation (#…

…2559)

* feat(cornerrounding): documentation, custom tokens

- feat(cornerrounding): add custom token
- chore(cornerrounding): adds dist
- docs(cornerrounding): add file strucutre for foundations
- feat(cornerrounding): override token value
  - Sets custom var to override token spectrum-corner-radius-full
- chore(cornerrounding): add override to dist
  - Adds custom var to override token value to dist
- chore(cornerrounding): adjust file structure
  - Also renames file
- feat(cornerrounding): add Foundations story for corner-rounding
- feat(cornerrounding): add action buttons and checkboxes
  - Adds action buttons and checkboxes stories to demonstrate corner rounding
- docs(cornerrounding): update corner-rounding docs
  - better utilize storybook features
  - clean up checkbox and action button stories
  - hide stories in corner-rounding directory
  - improve table styling and css token use
  - improve corner rounding documentation
  - add tables for component size tokens
- fix(cornerrounding): remove mdx for tables
- fix(cornerrounding): use sentence case
- feat(cornerrounding): use custom token on close button
- docs: add alias note
- docs: remove reference to non-alias tokens
- feat(actionbutton): partial migration for corner rounding only
- feat(checkbox): partial migration for corner rounding only
- chore(closebutton): update custom var post-refactor
- fix: token rebase issue
- chore(actionbutton,checkbox): update package version
- chore: use corner-radius alias token
- chore: update tokens version
- chore: revert unneeded component version change
- docs: design requested updates, show token with example
- docs: move tables to stories, inline spacing for tables

* fix: includes error

---------

Co-authored-by: Melissa Thompson <[email protected]>

.storybook/foundations/corner-rounding/action-button-corner-rounding.stories.js

@@ -0,0 +1,105 @@
+import { html } from "lit";
+import { Template } from "../../../components/actionbutton/stories/template";
+
+export default {
+	title: "Foundations/Corner rounding",
+	description:
+		"The action button component represents an action a user can take.",
+	component: "ActionButton",
+	args: {
+		rootClass: "spectrum-ActionButton",
+	},
+	parameters: {
+		actions: {
+			handles: ["click .spectrum-ActionButton:not([disabled])"],
+		},
+	},
+	tags: ['foundation'],
+};
+
+const ActionButton = ({
+	...args
+}) => {
+	return html`
+		<div style="padding: 1rem 0;">
+			${Template({
+				...args,
+				iconName: undefined,
+			})}
+		</div>
+	`;
+};
+
+const ActionButtonTable = ({ ...args }) => {
+	return html`
+		<table class="spectrum-Foundations-Example-CornerRounding-table">
+			<thead>
+				<tr>
+					<th scope="col">Token</th>
+					<th scope="col" style="padding: 0 2rem;">Value</th>
+					<th scope="col">Medium example</th>
+				</tr>
+			</thead>
+			<tbody>
+				<tr>
+					<td>--spectrum-corner-radius-medium-size-extra-small</td>
+					<td style="padding: 0 2rem;">6px</td>
+					<td>
+						${ActionButton({
+							...args,
+							label: "Extra Small",
+							size: "xs"
+						})}
+					</td>
+				</tr>
+				<tr>
+					<td>--spectrum-corner-radius-medium-size-small</td>
+					<td style="padding: 0 2rem;">7px</td>
+					<td>
+						${ActionButton({
+							...args,
+							label: "Small",
+							size: "s"
+						})}
+					</td>
+				</tr>
+				<tr>
+					<td>--spectrum-corner-radius-medium-size-medium</td>
+					<td style="padding: 0 2rem;">8px</td>
+					<td>
+						${ActionButton({
+							...args,
+							label: "Medium",
+							size: "m"
+						})}
+					</td>
+				</tr>
+				<tr>
+					<td>--spectrum-corner-radius-medium-size-large</td>
+					<td style="padding: 0 2rem;">9px</td>
+					<td>
+						${ActionButton({
+							...args,
+							label: "Large",
+							size: "l"
+						})}
+					</td>
+				</tr>
+				<tr>
+					<td>--spectrum-corner-radius-medium-size-extra-large</td>
+					<td style="padding: 0 2rem;">10px</td>
+					<td>
+						${ActionButton({
+							...args,
+							label: "Extra Large",
+							size: "xl"
+						})}
+					</td>
+				</tr>
+			</tbody>
+		</table>
+	`;
+};
+
+export const ActionButtonExamples = ActionButtonTable.bind({});
+ActionButtonExamples.args = {};

.storybook/foundations/corner-rounding/checkbox-corner-rounding.stories.js

@@ -0,0 +1,97 @@
+// Import the component markup template
+import { html } from "lit";
+import { Template } from "../../../components/checkbox/stories/template";
+
+export default {
+	title: "Foundations/Corner rounding",
+	description:
+		"Checkboxes allow users to select multiple items from a list of individual items, or mark one individual item as selected.",
+	component: "Checkbox",
+	args: {
+		rootClass: "spectrum-Checkbox",
+	},
+	parameters: {
+		actions: {
+			handles: ['click input[type="checkbox"]'],
+		},
+	},
+	tags: ['foundation'],
+};
+
+const Checkbox = ({
+	customStyles = {},
+	isChecked = false,
+	...args
+}) => {
+	return html`
+		<div style="padding: 1rem 0;">
+			${Template({
+				...args,
+				iconName: undefined,
+			})}
+		</div>
+	`;
+};
+
+const CheckboxTable = ({...args}) => {
+	return html`
+		<table class="spectrum-Foundations-Example-CornerRounding-table">
+			<thead>
+				<tr>
+					<th scope="col">Token</th>
+					<th scope="col" style="padding: 0 2rem;">Value</th>
+					<th scope="col">Small example</th>
+				</tr>
+			</thead>
+			<tbody>
+				<tr>
+					<td>--spectrum-corner-radius-small-size-small</td>
+					<td style="padding: 0 2rem;">3px</td>
+					<td>
+						${Checkbox({
+							...args,
+							label: "Small",
+							size: "s"
+						})}
+					</td>
+				</tr>
+				<tr>
+					<td>--spectrum-corner-radius-small-size-medium</td>
+					<td style="padding: 0 2rem;">4px</td>
+					<td>
+						${Checkbox({
+							...args,
+							label: "Medium",
+							size: "m"
+						})}
+					</td>
+				</tr>
+				<tr>
+					<td>--spectrum-corner-radius-small-size-large</td>
+					<td style="padding: 0 2rem;">5px</td>
+					<td>
+						${Checkbox({
+							...args,
+							label: "Large",
+							size: "l"
+						})}
+					</td>
+				</tr>
+				<tr>
+					<td>--spectrum-corner-radius-small-size-extra-large</td>
+					<td style="padding: 0 2rem;">6px</td>
+					<td>
+						${Checkbox({
+							...args,
+							label: "Extra Large",
+							size: "xl"
+						})}
+					</td>
+				</tr>
+			</tbody>
+		</table>
+	`;
+}
+
+export const CheckboxExamples = CheckboxTable.bind({});
+CheckboxExamples.args = {};

.storybook/foundations/corner-rounding/component-size-tokens-medium.md

@@ -0,0 +1,7 @@
+| Component size token                              | Alias token (if available)    | Global token                 | Value |
+|---------------------------------------------------|-------------------------------|------------------------------|-------|
+| --spectrum-corner-radius-medium-size-extra-small   |                               | --spectrum-corner-radius-300 | 6px   |
+| --spectrum-corner-radius-medium-size-small         |                               | --spectrum-corner-radius-400 | 7px   |
+| --spectrum-corner-radius-medium-size-medium        | --spectrum-corner-radius-medium-default | --spectrum-corner-radius-500 | 8px   |
+| --spectrum-corner-radius-medium-size-large         |                               | --spectrum-corner-radius-600 | 9px   |
+| --spectrum-corner-radius-medium-size-extra-large   | --spectrum-corner-radius-large-default | --spectrum-corner-radius-700 | 10px  |

.storybook/foundations/corner-rounding/component-size-tokens-small.md

@@ -0,0 +1,6 @@
+| Component size token                              | Alias token (if available)    | Global token                 | Value |
+|---------------------------------------------------|-------------------------------|------------------------------|-------|
+| --spectrum-corner-radius-small-size-small         |                               | --spectrum-corner-radius-75  | 3px   |
+| --spectrum-corner-radius-small-size-medium        | --spectrum-corner-radius-small-default | --spectrum-corner-radius-100 | 4px   |
+| --spectrum-corner-radius-small-size-large         |                               | --spectrum-corner-radius-200 | 5px   |
+| --spectrum-corner-radius-small-size-extra-large   |                               | --spectrum-corner-radius-300 | 6px   |

.storybook/foundations/corner-rounding/corner-rounding.mdx

@@ -0,0 +1,26 @@
+import { Meta, Canvas, Story, Title, Unstyled } from '@storybook/blocks';
+import * as CornerRoundingStories from './corner-rounding.stories.js';
+import * as CheckboxStories from './checkbox-corner-rounding.stories.js';
+import * as ActionButtonStories from './action-button-corner-rounding.stories.js';
+
+<Meta of={CornerRoundingStories} />
+
+<Title />
+
+## Default values
+
+<Story of={CornerRoundingStories.CornerRounding} />
+
+## Component examples
+
+### Small tokens
+
+Checkbox includes small component size tokens to scale corner rounding.
+
+<Story of={CheckboxStories.CheckboxExamples} />
+
+### Medium tokens
+
+Action button includes medium component size tokens to scale corner rounding.
+
+<Story of={ActionButtonStories.ActionButtonExamples} />

.storybook/foundations/corner-rounding/corner-rounding.stories.js

@@ -0,0 +1,75 @@
+// Import the component markup template
+import { html } from "lit";
+import { Template } from './template';
+
+export default {
+	title: "Foundations/Corner rounding",
+	description:
+		"Corner rounding is a foundation that shows the different border-radius tokens that can be applied to a component.",
+	component: "Corner rounding",
+	args: {
+		rootClass: "spectrum-Foundations-Example-CornerRounding",
+	},
+  tags: ['foundation'],
+};
+
+const CornerRadiusGroup = ({
+	customStyles = {},
+	...args
+}) => {
+	return html`
+		<div>
+      <table class="spectrum-Foundations-Example-CornerRounding-table">
+        <thead>
+          <tr>
+            <th scope="col">Token</th>
+            <th scope="col" style="padding: 0 2rem;">Value</th>
+            <th scope="col">Example<br>(No Border)</th>
+            <th scope="col">Example<br>(Border)</th>
+          </tr>
+        </thead>
+        <tbody>
+			${Template({
+				...args,
+        label: '--spectrum-corner-radius-none',
+        size: 'none',
+        value: '0px',
+			})}
+      ${Template({
+				...args,
+        label: '--spectrum-corner-radius-small-default',
+        size: 's',
+        value: '4px',
+			})}
+      ${Template({
+				...args,
+        label: '--spectrum-corner-radius-medium-default',
+        size: 'm',
+        value: '8px',
+			})}
+      ${Template({
+				...args,
+        label: '--spectrum-corner-radius-large-default',
+        size: 'l',
+        value: '10px',
+			})}
+      ${Template({
+				...args,
+        label: '--spectrum-corner-radius-extra-large-default',
+        size: 'xl',
+        value: '16px',
+			})}
+      ${Template({
+				...args,
+        label: '--spectrum-corner-radius-full',
+        size: 'full',
+        value: '9999px',
+			})}
+        </tbody>
+      </table>
+		</div>
+	`;
+};
+
+export const CornerRounding = CornerRadiusGroup.bind({});
+CornerRounding.args = {};

.storybook/foundations/corner-rounding/index.css

@@ -0,0 +1,56 @@
+/*!
+Copyright 2024 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+
+.spectrum-Foundations-Example-CornerRounding-table {
+  border-spacing: 1rem 0;
+  margin-inline-start: -1rem;
+}
+
+.spectrum-Foundations-Example-CornerRounding-table th {
+  text-align: start;
+}
+
+.spectrum-Foundations-Example-CornerRounding {
+  inline-size: 3rem;
+  block-size: 3rem;
+  margin: 0.5rem;
+  background-color: var(--spectrum-gray-500);
+}
+
+.spectrum-Foundations-Example-CornerRounding--border {
+  background-color: var(--spectrum-gray-25);
+  border: var(--spectrum-border-width-200) solid var(--spectrum-gray-700);
+}
+
+.spectrum-Foundations-Example-CornerRounding--none {
+  border-radius: var(--spectrum-corner-radius-none);
+}
+
+.spectrum-Foundations-Example-CornerRounding--sizeS {
+  border-radius: var(--spectrum-corner-radius-small-default);
+}
+
+.spectrum-Foundations-Example-CornerRounding--sizeM {
+  border-radius: var(--spectrum-corner-radius-medium-default);
+}
+
+.spectrum-Foundations-Example-CornerRounding--sizeL {
+  border-radius: var(--spectrum-corner-radius-large-default);
+}
+
+.spectrum-Foundations-Example-CornerRounding--sizeXL {
+  border-radius: var(--spectrum-corner-radius-extra-large-default);
+}
+
+.spectrum-Foundations-Example-CornerRounding--full {
+  border-radius: var(--spectrum-corner-radius-full);
+}