feat(css-variables): add new css variables for border-width, `borde…

…r-radius`, `control-padding-x`, `control-padding-y`, `control-icon-size`, `control-size`, `control-width`, `font-size`, `html-font-size`, `html-line-height`, `line-height`, `layout-spacing`,`unit-o`, `unit-h`, and `unit-0` to `unit-16`. Add index to export all css variables.

src/css-variables/_border-width.scss

@@ -0,0 +1,11 @@
+@use '../mixins/set-var' as *;
+@use '../variables' as *;
+
+/*
+  Border width. Alphabetical order.
+*/
+:root, :host {
+  @include set-var('border-width', $border-width); // $unit-o
+  @include set-var('border-width', $border-width-lg, $suffix: 'lg'); // $unit-h
+  @include set-var('border-radius', $border-radius); // $unit-h
+}

src/css-variables/_control-padding.scss

@@ -0,0 +1,23 @@
+@use '../functions/get-var' as *;
+@use '../functions/strip-unit' as *;
+@use '../mixins/set-var' as *;
+@use '../variables' as *;
+
+/*
+  Control padding. Alphabetical order.
+*/
+:root, :host {
+  // padding-x
+  @include set-var('control-padding-x', $control-padding-x); // $unit-2
+  // padding-x-sm
+  @include set-var('control-padding-x', calc(get-var('control-padding') * 0.75), $suffix: 'sm'); // $unit-2 * 0.75
+  // padding-x-lg
+  @include set-var('control-padding-x', calc(get-var('control-padding') * 1.5), $suffix: 'lg'); // $unit-2 * 1.5
+
+  // padding-y
+  @include set-var('control-padding-y', calc((get-var('control-size') - get-var('line-height')) * 0.5 - get-var('border-width'))); // ($control-size - $line-height) * 0.5 - $border-width
+  // padding-y-sm
+  @include set-var('control-padding-y', calc((get-var('control-size', $suffix: 'sm') - get-var('line-height')) * 0.5 - get-var('border-width'))); // ($control-size-sm - $line-height) * 0.5 - $border-width
+  // padding-y-lg
+  @include set-var('control-padding-y', calc((get-var('control-size', $suffix: 'lg') - get-var('line-height')) * 0.5 - get-var('border-width'))); // ($control-size-lg - $line-height) * 0.5 - $border-width
+}

src/css-variables/_control-size.scss

@@ -0,0 +1,12 @@
+@use '../mixins/set-var' as *;
+@use '../variables' as *;
+
+/*
+  Control size. Alphabetical order.
+*/
+:root, :host {
+  @include set-var('control-icon-size', $control-icon-size); // 0.8rem
+  @include set-var('control-size', $control-size); // $unit-9
+  @include set-var('control-size', $control-size-lg, $suffix: 'lg'); // $unit-10
+  @include set-var('control-size', $control-size-sm, $suffix: 'sm'); // $unit-7
+}

src/css-variables/_control-width.scss

@@ -0,0 +1,13 @@
+@use '../mixins/set-var' as *;
+@use '../variables' as *;
+
+/*
+  Control width. Alphabetical order.
+*/
+:root, :host {
+  @include set-var('control-width', $control-width-lg, $suffix: 'lg'); // 960px
+  @include set-var('control-width', $control-width-md, $suffix: 'md'); // 640px
+  @include set-var('control-width', $control-width-sm, $suffix: 'sm'); // 320px
+  @include set-var('control-width', $control-width-xl, $suffix: 'xl'); // 1280px
+  @include set-var('control-width', $control-width-xs, $suffix: 'xs'); // 180px
+}

src/css-variables/_font-size.scss

@@ -0,0 +1,17 @@
+@use '../mixins/set-var' as *;
+@use '../variables' as *;
+
+/*
+  Font size and line height. Alphabetical order.
+*/
+:root, :host {
+  // Font sizes.
+  @include set-var('font-size', $font-size); // 0.8rem
+  @include set-var('font-size', $font-size-lg, $suffix: 'lg'); // 0.9rem
+  @include set-var('font-size', $font-size-sm, $suffix: 'sm'); // 0.7rem
+  @include set-var('html-font-size', $html-font-size); // 20px
+
+  // Line height.
+  @include set-var('html-line-height', $html-line-height); // 1.5
+  @include set-var('line-height', $line-height); // 1.2rem
+}

src/css-variables/_layout-spacing.scss

@@ -0,0 +1,13 @@
+@use '../functions/strip-unit' as *;
+@use '../mixins/set-var' as *;
+@use '../variables' as *;
+
+/*
+  Layout spacing. Alphabetical order.
+*/
+:root, :host {
+  @include set-var('layout-spacing', strip-unit($layout-spacing)); // $unit-2
+  @include set-var('layout-spacing', strip-unit($layout-spacing-lg), $suffix: 'lg'); // $unit-4
+  @include set-var('layout-spacing', strip-unit($layout-spacing-sm), $suffix: 'sm'); // $unit-1
+  @include set-var('layout-spacing', 1rem, $suffix: 'unit'); // rem
+}

src/css-variables/_unit-sizes.scss

@@ -0,0 +1,24 @@
+@use '../mixins/set-var' as *;
+@use '../variables' as *;
+
+/*
+  Unit sizes. Alphabetical order.
+*/
+:root, :host {
+  @include set-var('unit-o', $unit-o); // 0.05rem
+  @include set-var('unit-h', $unit-h); // 0.1rem
+
+  @include set-var('unit-0', 0rem); // ! New. 0rem
+  @include set-var('unit-1', $unit-1); // 0.2rem
+  @include set-var('unit-2', $unit-2); // 0.4rem
+  @include set-var('unit-3', $unit-3); // 0.6rem
+  @include set-var('unit-4', $unit-4); // 0.8rem
+  @include set-var('unit-5', $unit-5); // 1rem
+  @include set-var('unit-6', $unit-6); // 1.2rem
+  @include set-var('unit-7', $unit-7); // 1.4rem
+  @include set-var('unit-8', $unit-8); // 1.6rem
+  @include set-var('unit-9', $unit-9); // 1.8rem
+  @include set-var('unit-10', $unit-10); // 2rem
+  @include set-var('unit-12', $unit-12); // 2.4rem
+  @include set-var('unit-16', $unit-16); // 3.2rem
+}

src/css-variables/index.scss

@@ -0,0 +1,16 @@
+@forward 'bg-colors';
+@forward 'body-colors';
+@forward 'border-width';
+@forward 'border-colors';
+@forward 'color-scheme';
+@forward 'control-colors';
+@forward 'control-padding';
+@forward 'control-size';
+@forward 'control-width';
+@forward 'core-colors';
+@forward 'font-size';
+@forward 'gray-colors';
+@forward 'layout-spacing';
+@forward 'link-colors';
+@forward 'other-colors';
+@forward 'unit-sizes';