@graupl/graupl 1.0.0-beta.10 → 1.0.0-beta.12

package/packages/core/src/scss/base/button/_variables.scss

@@ -1,252 +0,0 @@
-// @graupl/core button base variables.
-//
-// These values are to be used to directly style bases and provide a
-// cleaner way to reference custom properties.
-
-@use "defaults";
-@use "../../variables" as root-variables;
-@use "../../defaults" as root-defaults;
-@use "../../theme/color/variables" as color;
-@use "../../theme/typography/variables" as typography;
-@use "../../functions/theme";
-@use "sass:map";
-
-// Button properties.
-$button-min-width: var(
-  --#{root-defaults.$prefix}button-min-width,
-  #{root-defaults.$interactive-min-width}
-);
-$button-min-height: var(
-  --#{root-defaults.$prefix}button-min-height,
-  #{root-defaults.$interactive-min-height}
-);
-$button-padding-x: var(
-  --#{root-defaults.$prefix}button-padding-x,
-  #{map.get(root-variables.$spacers, 5)}
-);
-$button-padding-y: var(
-  --#{root-defaults.$prefix}button-padding-y,
-  #{map.get(root-variables.$spacers, 3)}
-);
-$button-padding: var(
-  --#{root-defaults.$prefix}button-padding,
-  #{$button-padding-y} #{$button-padding-x}
-);
-$button-font-size: var(
-  --#{root-defaults.$prefix}button-font-size,
-  #{map.get(typography.$font-sizes, base)}
-);
-$button-transition: var(
-  --#{root-defaults.$prefix}button-transition,
-  background #{map.get(root-variables.$transition-durations, fast)}
-    #{root-variables.$transition-timing-function},
-  color #{map.get(root-variables.$transition-durations, fast)}
-    #{root-variables.$transition-timing-function},
-  transform #{map.get(root-variables.$transition-durations, fast)}
-    #{root-variables.$transition-timing-function}
-);
-$button-transition-reduced-motion: var(
-  --#{root-defaults.$prefix}button-transition-reduced-motion,
-  background #{map.get(root-variables.$transition-durations, none)}
-    #{root-variables.$transition-timing-function},
-  color #{map.get(root-variables.$transition-durations, none)}
-    #{root-variables.$transition-timing-function}
-);
-
-// Transform properties.
-$button-transform: var(
-  --#{root-defaults.$prefix}button-transform,
-  #{defaults.$button-initial-transform}
-);
-$button-visited-transform: var(
-  --#{root-defaults.$prefix}button-visited-transform,
-  #{$button-transform}
-);
-$button-focus-transform: var(
-  --#{root-defaults.$prefix}button-focus-transform,
-  #{$button-transform}
-);
-$button-hover-transform: var(
-  --#{root-defaults.$prefix}button-hover-transform,
-  #{$button-transform}
-);
-$button-active-transform: var(
-  --#{root-defaults.$prefix}button-active-transform,
-  #{defaults.$button-final-transform}
-);
-$button-disabled-transform: var(
-  --#{root-defaults.$prefix}button-disabled-transform,
-  #{defaults.$button-disabled-transform}
-);
-$button-transform-states: (
-  default: $button-transform,
-  visited: $button-visited-transform,
-  focus: $button-focus-transform,
-  hover: $button-hover-transform,
-  active: $button-active-transform,
-  disabled: $button-disabled-transform,
-);
-
-// Background properties.
-$button-background: var(
-  --#{root-defaults.$prefix}button-background,
-  #{color.$background}
-);
-$button-visited-background: var(
-  --#{root-defaults.$prefix}button-visited-background,
-  #{$button-background}
-);
-$button-focus-background: var(
-  --#{root-defaults.$prefix}button-focus-background,
-  #{$button-background}
-);
-$button-hover-background: var(
-  --#{root-defaults.$prefix}button-hover-background,
-  #{color.$color}
-);
-$button-active-background: var(
-  --#{root-defaults.$prefix}button-active-background,
-  #{$button-hover-background}
-);
-$button-disabled-background: var(
-  --#{root-defaults.$prefix}button-disabled-background,
-  #{color.$background}
-);
-$button-background-states: (
-  default: $button-background,
-  visited: $button-visited-background,
-  focus: $button-focus-background,
-  hover: $button-hover-background,
-  active: $button-active-background,
-  disabled: $button-disabled-background,
-);
-
-// Text properties.
-$button-color: var(--#{root-defaults.$prefix}button-color, #{color.$color});
-$button-visited-color: var(
-  --#{root-defaults.$prefix}button-visited-color,
-  #{$button-color}
-);
-$button-focus-color: var(
-  --#{root-defaults.$prefix}button-focus-color,
-  #{$button-color}
-);
-$button-hover-color: var(
-  --#{root-defaults.$prefix}button-hover-color,
-  #{color.$background}
-);
-$button-active-color: var(
-  --#{root-defaults.$prefix}button-active-color,
-  #{$button-hover-color}
-);
-$button-disabled-color: var(
-  --#{root-defaults.$prefix}button-disabled-color,
-  #{theme.get(primary, 200)}
-);
-$button-color-states: (
-  default: $button-color,
-  visited: $button-visited-color,
-  focus: $button-focus-color,
-  hover: $button-hover-color,
-  active: $button-active-color,
-  disabled: $button-disabled-color,
-);
-
-// Border properties.
-$button-border-top-width: var(
-  --#{root-defaults.$prefix}button-border-top-width,
-  #{root-variables.$border-top-width}
-);
-$button-border-right-width: var(
-  --#{root-defaults.$prefix}button-border-right-width,
-  #{root-variables.$border-right-width}
-);
-$button-border-bottom-width: var(
-  --#{root-defaults.$prefix}button-border-bottom-width,
-  #{root-variables.$border-bottom-width}
-);
-$button-border-left-width: var(
-  --#{root-defaults.$prefix}button-border-left-width,
-  #{root-variables.$border-left-width}
-);
-$button-border-width: var(
-  --#{root-defaults.$prefix}button-border-width,
-  #{$button-border-top-width} #{$button-border-right-width}
-    #{$button-border-bottom-width} #{$button-border-left-width}
-);
-$button-border-top-style: var(
-  --#{root-defaults.$prefix}button-border-top-style,
-  #{root-variables.$border-top-style}
-);
-$button-border-right-style: var(
-  --#{root-defaults.$prefix}button-border-right-style,
-  #{root-variables.$border-right-style}
-);
-$button-border-bottom-style: var(
-  --#{root-defaults.$prefix}button-border-bottom-style,
-  #{root-variables.$border-bottom-style}
-);
-$button-border-left-style: var(
-  --#{root-defaults.$prefix}button-border-left-style,
-  #{root-variables.$border-left-style}
-);
-$button-border-style: var(
-  --#{root-defaults.$prefix}button-border-style,
-  #{$button-border-top-style} #{$button-border-right-style}
-    #{$button-border-bottom-style} #{$button-border-left-style}
-);
-$button-border-top-left-radius: var(
-  --#{root-defaults.$prefix}button-border-top-left-radius,
-  #{root-variables.$border-top-left-radius}
-);
-$button-border-top-right-radius: var(
-  --#{root-defaults.$prefix}button-border-top-right-radius,
-  #{root-variables.$border-top-right-radius}
-);
-$button-border-bottom-right-radius: var(
-  --#{root-defaults.$prefix}button-border-bottom-right-radius,
-  #{root-variables.$border-bottom-right-radius}
-);
-$button-border-bottom-left-radius: var(
-  --#{root-defaults.$prefix}button-border-bottom-left-radius,
-  #{root-variables.$border-bottom-left-radius}
-);
-$button-border-radius: var(
-  --#{root-defaults.$prefix}button-border-radius,
-  #{$button-border-top-left-radius} #{$button-border-top-right-radius}
-    #{$button-border-bottom-right-radius} #{$button-border-bottom-left-radius}
-);
-
-// Border colour properties.
-$button-border-color: var(
-  --#{root-defaults.$prefix}button-border-color,
-  #{color.$border-color}
-);
-$button-visited-border-color: var(
-  --#{root-defaults.$prefix}button-visited-border-color,
-  #{$button-border-color}
-);
-$button-focus-border-color: var(
-  --#{root-defaults.$prefix}button-focus-border-color,
-  #{$button-border-color}
-);
-$button-hover-border-color: var(
-  --#{root-defaults.$prefix}button-hover-border-color,
-  #{color.$border-color}
-);
-$button-active-border-color: var(
-  --#{root-defaults.$prefix}button-active-border-color,
-  #{$button-hover-border-color}
-);
-$button-disabled-border-color: var(
-  --#{root-defaults.$prefix}button-disabled-border-color,
-  #{theme.get(primary, 200)}
-);
-$button-border-color-states: (
-  default: $button-border-color,
-  visited: $button-visited-border-color,
-  focus: $button-focus-border-color,
-  hover: $button-hover-border-color,
-  active: $button-active-border-color,
-  disabled: $button-disabled-border-color,
-);

package/packages/core/src/scss/base/form/_defaults.scss

@@ -1,24 +0,0 @@
-// @graupl/core form base default values.
-//
-// Generally, these should not be used directly when styling bases unless a static value is needed.
-// They are mainly used to provide class selectors, fallbacks for custom properties, or loop values.
-//
-// They should not be used to define direct property values (i.e. font-size, color, etc.).
-// Those should be defined as custom properties in the `_variables.scss` file.
-
-// Form selectors.
-$selector-base: "" !default;
-$modifier-selector-base: $selector-base !default;
-$input-selector-base: $selector-base !default;
-$input-selector: "input" !default;
-$textarea-selector-base: $selector-base !default;
-$textarea-selector: "textarea" !default;
-$select-selector-base: $selector-base !default;
-$select-selector: "select" !default;
-$label-selector-base: $selector-base !default;
-$label-selector: "label" !default;
-$fieldset-selector-base: $selector-base !default;
-$fieldset-selector: "fieldset" !default;
-
-// Fieldset properties.
-$fieldset-direction: column !default;

package/packages/core/src/scss/base/form/_index.scss

@@ -1,227 +0,0 @@
-// @graupl/core form base styles.
-//
-// This module provides the base styles for form components such as inputs, textareas, selects, labels, and fieldsets.
-//
-// The following selectors are generated by default:
-// - `input`: The input component.
-// - `textarea`: The textarea component.
-// - `select`: The select component.
-// - `label`: The label component.
-// - `fieldset`: The fieldset component.
-//
-// The following custom properties control the generated selectors:
-// - `--graupl-input-padding-x`: The horizontal padding for input components.
-// - `--graupl-input-padding-y`: The vertical padding for input components.
-// - `--graupl-input-padding`: The padding for input components (combines x and y padding).
-// - `--graupl-input-font-size`: The font size for input components.
-// - `--graupl-label-font-size`: The font size for label components.
-// - `--graupl-fieldset-direction`: The direction of fieldset items.
-// - `--graupl-fieldset-gap`: The gap between fieldset items.
-// - `--graupl-fieldset-padding-x`: The horizontal padding for fieldset components.
-// - `--graupl-fieldset-padding-y`: The vertical padding for fieldset components.
-// - `--graupl-fieldset-padding`: The padding for fieldset components (combines x and y padding).
-// - `--graupl-fieldset-font-size`: The font size for fieldset components.
-// - `--graupl-input-background`: The background color for input components.
-// - `--graupl-fieldset-background`: The background color for fieldset components.
-// - `--graupl-input-color`: The text color for input components.
-// - `--graupl-input-placeholder-color`: The placeholder text color for input components.
-// - `--graupl-label-color`: The text color for label components.
-// - `--graupl-fieldset-color`: The text color for fieldset components.
-// - `--graupl-input-disabled-color`: The text color for disabled input components.
-// - `--graupl-input-placeholder-disabled-color`: The placeholder text color for disabled input components.
-// - `--graupl-label-disabled-color`: The text color for disabled label components.
-// - `--graupl-fieldset-disabled-color`: The text color for disabled fieldset components.
-// - `--graupl-input-border-top-width`: The top border width for input components.
-// - `--graupl-input-border-right-width`: The right border width for input components.
-// - `--graupl-input-border-bottom-width`: The bottom border width for input components.
-// - `--graupl-input-border-left-width`: The left border width for input components.
-// - `--graupl-input-border-width`: The border width for input components (combines top, right, bottom, and left widths).
-// - `--graupl-input-border-top-style`: The top border style for input components.
-// - `--graupl-input-border-right-style`: The right border style for input components.
-// - `--graupl-input-border-bottom-style`: The bottom border style for input components.
-// - `--graupl-input-border-left-style`: The left border style for input components.
-// - `--graupl-input-border-style`: The border style for input components (combines top, right, bottom, and left styles).
-// - `--graupl-input-border-top-left-radius`: The top-left border radius for input components.
-// - `--graupl-input-border-top-right-radius`: The top-right border radius for input components.
-// - `--graupl-input-border-bottom-right-radius`: The bottom-right border radius for input components.
-// - `--graupl-input-border-bottom-left-radius`: The bottom-left border radius for input components.
-// - `--graupl-input-border-radius`: The border radius for input components (combines top-left, top-right, bottom-right, and bottom-left radii).
-// - `--graupl-fieldset-border-top-width`: The top border width for fieldset components.
-// - `--graupl-fieldset-border-right-width`: The right border width for fieldset components.
-// - `--graupl-fieldset-border-bottom-width`: The bottom border width for fieldset components.
-// - `--graupl-fieldset-border-left-width`: The left border width for fieldset components.
-// - `--graupl-fieldset-border-width`: The border width for fieldset components (combines top, right, bottom, and left widths).
-// - `--graupl-fieldset-border-top-style`: The top border style for fieldset components.
-// - `--graupl-fieldset-border-right-style`: The right border style for fieldset components.
-// - `--graupl-fieldset-border-bottom-style`: The bottom border style for fieldset components.
-// - `--graupl-fieldset-border-left-style`: The left border style for fieldset components.
-// - `--graupl-fieldset-border-style`: The border style for fieldset components (combines top, right, bottom, and left styles).
-// - `--graupl-fieldset-border-top-left-radius`: The top-left border radius for fieldset components.
-// - `--graupl-fieldset-border-top-right-radius`: The top-right border radius for fieldset components.
-// - `--graupl-fieldset-border-bottom-right-radius`: The bottom-right border radius for fieldset components.
-// - `--graupl-fieldset-border-bottom-left-radius`: The bottom-left border radius for fieldset components.
-// - `--graupl-fieldset-border-radius`: The border radius for fieldset components (combines top-left, top-right, bottom-right, and bottom-left radii).
-// - `--graupl-input-border-color`: The border color for input components.
-// - `--graupl-input-disabled-border-color`: The border color for disabled input components.
-// - `--graupl-fieldset-border-color`: The border color for fieldset components.
-// - `--graupl-fieldset-disabled-border-color`: The border color for disabled fieldset components.
-// - `--graupl-input-accent-color`: The accent color for input components.
-//
-// The following variables control the generated selectors:
-// - `$selector-base`: The selector base for the component.
-// - `$modifier-selector-base`: The selector base for component modifiers.
-// - `$input-selector-base`: The base selector for the input component.
-// - `$input-selector`: The input component selector.
-// - `$textarea-selector-base`: The base selector for the textarea component.
-// - `$textarea-selector`: The textarea component selector.
-// - `$select-selector-base`: The base selector for the select component.
-// - `$select-selector`: The select component selector.
-// - `$fieldset-selector-base`: The base selector for the fieldset component.
-// - `$fieldset-selector`: The fieldset component selector.
-// - `$fieldset-direction`: The direction of fieldset component items.
-//
-// @example
-// <label for="input-id">Input Label</label>
-// <input id="input-id" type="text" placeholder="Enter text" />
-//
-// @example
-// <label for="textarea-id">Textarea Label</label>
-// <textarea id="textarea-id" placeholder="Enter text"></textarea>
-//
-// @example
-// <label for="select-id">Select Label</label>
-// <select id="select-id">
-//   <option value="1">Option 1</option>
-//   <option value="2">Option 2</option>
-// </select>
-//
-// @example
-// <fieldset>
-//   <legend>Fieldset Legend</legend>
-//   <label for="input-id">Input Label</label>
-//   <input id="input-id" type="text" placeholder="Enter text" />
-//   <label for="textarea-id">Textarea Label</label>
-//   <textarea id="textarea-id" placeholder="Enter text"></textarea>
-//   <label for="select-id">Select Label</label>
-//   <select id="select-id">
-//     <option value="1">Option 1</option>
-//     <option value="2">Option 2</option>
-//   </select>
-// </fieldset>
-
-@use "../../defaults" as root-defaults;
-@use "../../mixins/layer" as *;
-@use "defaults";
-@use "sass:map";
-@use "variables" as *;
-
-@include layer(base) {
-  // input, textarea, select
-  #{defaults.$input-selector-base}#{defaults.$input-selector},
-  #{defaults.$textarea-selector-base}#{defaults.$textarea-selector},
-  #{defaults.$select-selector-base}#{defaults.$select-selector} {
-    padding: $input-padding;
-    border-width: $input-border-width;
-    border-style: $input-border-style;
-    border-radius: $input-border-radius;
-    font-size: $input-font-size;
-
-    @each $selector in map.get(root-defaults.$state-selectors, "disabled") {
-      // e.g :disabled, .disabled
-      &#{$selector} {
-        cursor: not-allowed;
-      }
-    }
-  }
-
-  // label
-  #{defaults.$label-selector-base}#{defaults.$label-selector} {
-    font-size: $label-font-size;
-  }
-
-  // fieldset
-  #{defaults.$fieldset-selector-base}#{defaults.$fieldset-selector} {
-    display: flex;
-    flex-flow: $fieldset-direction wrap;
-    gap: $fieldset-gap;
-    padding: $fieldset-padding;
-    border-width: $fieldset-border-width;
-    border-style: $fieldset-border-style;
-    border-radius: $fieldset-border-radius;
-    font-size: $fieldset-font-size;
-
-    @each $selector in map.get(root-defaults.$state-selectors, "disabled") {
-      // e.g :disabled, .disabled
-      &#{$selector} {
-        #{defaults.$input-selector},
-        #{defaults.$textarea-selector},
-        #{defaults.$select-selector} {
-          cursor: not-allowed;
-        }
-      }
-    }
-  }
-}
-
-@include layer(theme) {
-  // input, textarea, select
-  #{defaults.$input-selector-base}#{defaults.$input-selector},
-  #{defaults.$textarea-selector-base}#{defaults.$textarea-selector},
-  #{defaults.$select-selector-base}#{defaults.$select-selector} {
-    border-color: $input-border-color;
-    background: $input-background;
-    color: $input-color;
-    accent-color: $input-accent-color;
-
-    &::placeholder {
-      color: $input-placeholder-color;
-    }
-
-    @each $selector in map.get(root-defaults.$state-selectors, "disabled") {
-      // e.g :disabled, .disabled
-      &#{$selector} {
-        border-color: $input-disabled-border-color;
-        color: $input-disabled-color;
-
-        &::placeholder {
-          color: $input-placeholder-disabled-color;
-        }
-      }
-    }
-  }
-
-  // label
-  #{defaults.$label-selector-base}#{defaults.$label-selector} {
-    color: $label-color;
-
-    @each $selector in map.get(root-defaults.$state-selectors, "disabled") {
-      // &:has(:disabled, .disabled)
-      &:has(
-          + #{defaults.$input-selector-base}#{defaults.$input-selector}#{$selector},
-          + #{defaults.$textarea-selector-base}#{defaults.$textarea-selector}#{$selector},
-          + #{defaults.$select-selector-base}#{defaults.$select-selector}#{$selector}
-        ) {
-        color: $label-disabled-color;
-      }
-    }
-  }
-
-  // fieldset
-  #{defaults.$fieldset-selector-base}#{defaults.$fieldset-selector} {
-    border-color: $fieldset-border-color;
-    background: $fieldset-background;
-    color: $fieldset-color;
-
-    @each $selector in map.get(root-defaults.$state-selectors, "disabled") {
-      // e.g :disabled, .disabled
-      &#{$selector} {
-        border-color: $fieldset-disabled-border-color;
-        color: $fieldset-disabled-color;
-
-        #{defaults.$label-selector} {
-          color: $label-disabled-color;
-        }
-      }
-    }
-  }
-}