srcdev-nuxt-components 4.0.6 → 5.0.0

package/assets/styles/forms/themes/_tertiary.css

@@ -1,77 +0,0 @@
-:root {
-  [data-form-theme='tertiary'] {
-    --theme-form-input-bg: light-dark(var(--gray-1), var(--gray-4));
-    --theme-form-input-border: var(--gray-8);
-    --theme-form-input-border-active: var(--gray-2);
-    --theme-form-input-border-focus: var(--gray-2);
-    --theme-form-input-outline: white;
-    --theme-form-input-outline-active: var(--gray-6);
-    --theme-form-input-outline-focus: var(--gray-6);
-    --theme-form-input-text: light-dark(var(--gray-10), var(--gray-11));
-
-    --theme-form-focus-box-shadow: light-dark(var(--gray-12), var(--gray-2));
-
-    --theme-form-checkbox-bg: light-dark(var(--gray-1), var(--gray-4));
-    --theme-form-checkbox-border: light-dark(var(--gray-12), var(--gray-12));
-    --theme-form-checkbox-outline: light-dark(var(--gray-1), var(--gray-1));
-    --theme-form-checkbox-shadow: transparent;
-    --theme-form-checkbox-shadow-focus: var(--gray-6);
-    --theme-form-checkbox-symbol: var(--gray-12);
-
-    --theme-form-radio-bg: light-dark(var(--gray-1), var(--gray-4));
-    --theme-form-radio-border: light-dark(var(--gray-12), var(--gray-12));
-    --theme-form-radio-outline: light-dark(var(--gray-1), var(--gray-1));
-    --theme-form-radio-shadow: transparent;
-    --theme-form-radio-shadow-focus: var(--gray-6);
-    --theme-form-radio-symbol: var(--gray-12);
-
-    --theme-form-range-accent-color: light-dark(var(--gray-12), var(--gray-3));
-
-    /*
-    * ToggleSwitch
-    **/
-    --theme-form-toggle-bg-off: light-dark(var(--gray-1), var(--gray-4));
-    --theme-form-toggle-bg-on: light-dark(var(--gray-1), var(--gray-6));
-
-    --theme-form-toggle-border: var(--form-element-border-width) solid light-dark(var(--gray-12), var(--gray-1));
-
-    --theme-form-toggle-outline: var(--form-element-outline-width) solid light-dark(var(--gray-12), var(--gray-12));
-    --theme-form-toggle-symbol-off: var(--gray-4);
-    --theme-form-toggle-symbol-on: var(--gray-12);
-    --theme-form-toggle-icon-stroke-colour-off: var(--gray-1);
-    --theme-form-toggle-icon-stroke-colour-on: var(--gray-1);
-
-    /*
-    * Checkbox as button
-    **/
-
-    --theme-checkbox-radio-button-bg-default: light-dark(var(--gray-1), var(--gray-4));
-
-    --theme-checkbox-radio-button-border-default: light-dark(var(--green-12), var(--green-12));
-    --theme-checkbox-radio-button-border-width: 0.1rem;
-
-    --theme-checkbox-radio-button-outline-default: light-dark(var(--green-5), var(--green-5));
-    --theme-checkbox-radio-button-outline-width: 0.1rem;
-
-    --theme-checkbox-radio-button-label-default: light-dark(var(--green-12), var(--green-12));
-  }
-
-  [data-btn-theme='tertiary'] {
-    --theme-btn-bg: var(--gray-0);
-    --theme-btn-border: var(--gray-0);
-    --theme-btn-outline: var(--gray-12);
-    --theme-btn-text: var(--gray-12);
-
-    --theme-btn-bg-hover: var(--gray-12);
-    --theme-btn-border-hover: var(--gray-0);
-    --theme-btn-outline-hover: var(--gray-12);
-    --theme-btn-text-hover: var(--gray-0);
-
-    --theme-btn-bg-focus: var(--gray-12);
-    --theme-btn-border-focus: var(--gray-0);
-    --theme-btn-outline-focus: var(--gray-12);
-    --theme-btn-text-focus: var(--gray-0);
-
-    --theme-form-focus-box-shadow: 0.1rem 0.1rem 0.8rem 0.1rem var(--gray-12);
-  }
-}

package/assets/styles/forms/themes/_warning.css

@@ -1,77 +0,0 @@
-:root {
-  [data-form-theme='warning'] {
-    --theme-form-input-bg: light-dark(var(--gray-1), var(--gray-4));
-    --theme-form-input-border: var(--orange-8);
-    --theme-form-input-border-active: var(--orange-2);
-    --theme-form-input-border-focus: var(--orange-2);
-    --theme-form-input-outline: white;
-    --theme-form-input-outline-active: var(--orange-6);
-    --theme-form-input-outline-focus: var(--orange-6);
-    --theme-form-input-text: light-dark(var(--gray-10), var(--gray-11));
-
-    --theme-form-focus-box-shadow: light-dark(var(--orange-12), var(--orange-2));
-
-    --theme-form-checkbox-bg: light-dark(var(--gray-1), var(--gray-4));
-    --theme-form-checkbox-border: light-dark(var(--orange-12), var(--orange-12));
-    --theme-form-checkbox-outline: light-dark(var(--orange-1), var(--orange-1));
-    --theme-form-checkbox-shadow: transparent;
-    --theme-form-checkbox-shadow-focus: var(--orange-6);
-    --theme-form-checkbox-symbol: var(--orange-12);
-
-    --theme-form-radio-bg: light-dark(var(--gray-1), var(--gray-4));
-    --theme-form-radio-border: light-dark(var(--orange-12), var(--orange-12));
-    --theme-form-radio-outline: light-dark(var(--orange-1), var(--orange-1));
-    --theme-form-radio-shadow: transparent;
-    --theme-form-radio-shadow-focus: var(--orange-6);
-    --theme-form-radio-symbol: var(--orange-12);
-
-    --theme-form-range-accent-color: light-dark(var(--orange-12), var(--orange-3));
-
-    /*
-    * ToggleSwitch
-    **/
-    --theme-form-toggle-bg-off: light-dark(var(--gray-1), var(--gray-4));
-    --theme-form-toggle-bg-on: light-dark(var(--gray-1), var(--gray-6));
-
-    --theme-form-toggle-border: var(--form-element-border-width) solid light-dark(var(--orange-12), var(--orange-1));
-
-    --theme-form-toggle-outline: var(--form-element-outline-width) solid light-dark(var(--orange-12), var(--orange-12));
-    --theme-form-toggle-symbol-off: var(--orange-12);
-    --theme-form-toggle-symbol-on: var(--gray-12);
-    --theme-form-toggle-icon-stroke-colour-off: var(--gray-1);
-    --theme-form-toggle-icon-stroke-colour-on: var(--gray-1);
-
-    /*
-    * Checkbox as button
-    **/
-
-    --theme-checkbox-radio-button-bg-default: light-dark(var(--gray-1), var(--gray-4));
-
-    --theme-checkbox-radio-button-border-default: light-dark(var(--orange-12), var(--orange-12));
-    --theme-checkbox-radio-button-border-width: 0.1rem;
-
-    --theme-checkbox-radio-button-outline-default: light-dark(var(--orange-5), var(--orange-5));
-    --theme-checkbox-radio-button-outline-width: 0.1rem;
-
-    --theme-checkbox-radio-button-label-default: light-dark(var(--orange-12), var(--orange-12));
-  }
-
-  [data-btn-theme='warning'] {
-    --theme-btn-bg: var(--orange-12);
-    --theme-btn-border: var(--orange-0);
-    --theme-btn-outline: var(--orange-12);
-    --theme-btn-text: var(--orange-0);
-
-    --theme-btn-bg-hover: var(--orange-0);
-    --theme-btn-border-hover: var(--orange-12);
-    --theme-btn-outline-hover: var(--orange-0);
-    --theme-btn-text-hover: var(--orange-12);
-
-    --theme-btn-bg-focus: var(--orange-0);
-    --theme-btn-border-focus: var(--orange-12);
-    --theme-btn-outline-focus: var(--orange-0);
-    --theme-btn-text-focus: var(--orange-12);
-
-    --theme-form-focus-box-shadow: light-dark(var(--orange-12), var(--orange-2));
-  }
-}

package/assets/styles/forms/themes/index.css

@@ -1,8 +0,0 @@
-@import './_primary';
-@import './_secondary';
-@import './_tertiary';
-@import './_ghost';
-@import './_error';
-@import './_success';
-@import './_warning';
-@import './_input-action';

package/assets/styles/forms/variables/_sizes.css

@@ -1,82 +0,0 @@
-:root {
-  --form-element-padding-block-start: 0.4lh;
-  --form-element-padding-block-end: 0.4lh;
-  --form-element-border-width: 0.2rem;
-  --form-element-outline-width: 0.1rem;
-
-  [data-size='x-small'] {
-    --form-element-font-size: var(--step-0);
-    --form-placeholder-font-size: calc(var(--step-0) * 0.65);
-    --form-element-line-height: var(--step-0);
-    --form-icon-size: var(--step-0);
-    --form-button-padding-inline: calc(var(--step-0) * 1.65);
-    --form-text-padding-inline: calc(var(--step-0) * 0.25);
-    --form-button-icon-gap: calc(var(--step-0) * 0.65);
-    --form-input-border-radius: 0.4rem;
-    --form-icon-only-button-size: calc(var(--step-1) * 2);
-    --form-toggle-symbol-size: calc(var(--step-0) * 1.55);
-    --form-toggle-switch-width-adjustment: 0.5rem;
-
-    --form-input-checkbox-radio-button-size: var(--step-0);
-  }
-  [data-size='small'] {
-    --form-element-font-size: var(--step-1);
-    --form-placeholder-font-size: calc(var(--step-1) * 0.65);
-    --form-element-line-height: var(--step-1);
-    --form-icon-size: var(--step-1);
-    --form-button-padding-inline: calc(var(--step-0) * 1.65);
-    --form-text-padding-inline: calc(var(--step-0) * 0.25);
-    --form-button-icon-gap: calc(var(--step-0) * 0.65);
-    --form-input-border-radius: 0.4rem;
-    --form-icon-only-button-size: calc(var(--step-1) * 2.25);
-    --form-toggle-symbol-size: calc(var(--step-1) * 1.635);
-    --form-toggle-switch-width-adjustment: 0.3rem;
-
-    --form-input-checkbox-radio-button-size: var(--step-1);
-  }
-  [data-size='normal'] {
-    --form-element-font-size: var(--step-2);
-    --form-placeholder-font-size: calc(var(--step-2) * 0.65);
-    --form-element-line-height: var(--step-2);
-    --form-icon-size: var(--step-2);
-    --form-button-padding-inline: calc(var(--step-0) * 1.65);
-    --form-text-padding-inline: calc(var(--step-0) * 0.25);
-    --form-button-icon-gap: calc(var(--step-0) * 0.65);
-    --form-input-border-radius: 0.4rem;
-    --form-icon-only-button-size: calc(var(--step-1) * 2.5);
-    --form-toggle-symbol-size: calc(var(--step-2) * 1.72);
-    --form-toggle-switch-width-adjustment: 0.2rem;
-
-    --form-input-checkbox-radio-button-size: var(--step-2);
-  }
-  [data-size='medium'] {
-    --form-element-font-size: var(--step-3);
-    --form-placeholder-font-size: calc(var(--step-3) * 0.65);
-    --form-element-line-height: var(--step-3);
-    --form-icon-size: var(--step-3);
-    --form-button-padding-inline: calc(var(--step-0) * 1.65);
-    --form-text-padding-inline: calc(var(--step-0) * 0.25);
-    --form-button-icon-gap: calc(var(--step-0) * 0.65);
-    --form-input-border-radius: 0.4rem;
-    --form-icon-only-button-size: calc(var(--step-1) * 2.75);
-    --form-toggle-symbol-size: calc(var(--step-3) * 1.78);
-    --form-toggle-switch-width-adjustment: 0rem;
-
-    --form-input-checkbox-radio-button-size: var(--step-3);
-  }
-  [data-size='large'] {
-    --form-element-font-size: var(--step-4);
-    --form-placeholder-font-size: calc(var(--step-4) * 0.65);
-    --form-element-line-height: var(--step-4);
-    --form-icon-size: var(--step-4);
-    --form-button-padding-inline: calc(var(--step-0) * 1.75);
-    --form-text-padding-inline: calc(var(--step-0) * 0.25);
-    --form-button-icon-gap: calc(var(--step-0) * 0.75);
-    --form-input-border-radius: 0.4rem;
-    --form-icon-only-button-size: calc(var(--step-1) * 3);
-    --form-toggle-symbol-size: calc(var(--step-4) * 1.816);
-    --form-toggle-switch-width-adjustment: -0.2rem;
-
-    --form-input-checkbox-radio-button-size: var(--step-4);
-  }
-}

package/assets/styles/forms/variables/index.css

@@ -1,2 +0,0 @@
-@import './_theme.css';
-@import './_sizes.css';

package/assets/styles/typography/index.css

@@ -1,2 +0,0 @@
-@import './utils';
-@import './variables';

package/assets/styles/typography/utils/_font-classes.css

@@ -1,160 +0,0 @@
-.heading-1 {
-  font-size: var(--step-5);
-  font-weight: bold;
-  line-height: 1.3;
-}
-
-.heading-2 {
-  font-size: var(--step-4);
-  font-weight: bold;
-  line-height: 1.3;
-}
-
-.heading-3 {
-  font-size: var(--step-3);
-  font-weight: bold;
-  line-height: 1.3;
-}
-
-.heading-4 {
-  font-size: var(--step-2);
-  font-weight: bold;
-  line-height: 1.3;
-}
-
-.heading-5 {
-  font-size: var(--step-1);
-  font-weight: bold;
-  line-height: 1.3;
-}
-
-.heading-6 {
-  font-size: var(--step-0);
-  font-weight: bold;
-  line-height: 1.3;
-}
-
-/* Body text */
-
-.body-large {
-  font-size: var(--step-2);
-  font-weight: normal;
-  line-height: 1.5;
-}
-
-.body-normal {
-  font-size: var(--step-1);
-  font-weight: normal;
-  line-height: 1.5;
-}
-
-.body-small {
-  font-size: var(--step--0);
-  font-weight: normal;
-  line-height: 1.5;
-}
-
-.body-xsmall {
-  font-size: var(--step--1);
-  font-weight: normal;
-  line-height: 1.5;
-}
-
-.body-large-semibold {
-  font-size: var(--step-2);
-  font-weight: 500;
-  line-height: 1.5;
-}
-
-.body-normal-semibold {
-  font-size: var(--step-1);
-  font-weight: 500;
-  line-height: 1.5;
-}
-
-.body-small-semibold {
-  font-size: var(--step-0);
-  font-weight: 500;
-  line-height: 1.5;
-}
-
-.body-xsmall-semibold {
-  font-size: var(--step--1);
-  font-weight: 500;
-  line-height: 1.5;
-}
-
-.body-large-bold {
-  font-size: var(--step-2);
-  font-weight: bold;
-  line-height: 1.5;
-}
-
-.body-normal-bold {
-  font-size: var(--step-1);
-  font-weight: bold;
-  line-height: 1.5;
-}
-
-.body-small-bold {
-  font-size: var(--step-0);
-  font-weight: bold;
-  line-height: 1.5;
-}
-
-.body-xsmall-bold {
-  font-size: var(--step--1);
-  font-weight: bold;
-  line-height: 1.5;
-}
-
-/* Links */
-
-.link-large {
-  color: var(--theme-link-default);
-  font-size: var(--step-2);
-  font-weight: 600;
-  line-height: 1.5;
-  text-decoration: underline;
-
-  &:visited {
-    color: var(--theme-link-default);
-  }
-}
-
-.link-normal {
-  color: var(--theme-link-default);
-  font-size: var(--step-1);
-  font-weight: 600;
-  line-height: 1.5;
-  text-decoration: underline;
-
-  &:visited,
-  &:active {
-    color: var(--theme-link-default);
-  }
-}
-
-.link-small {
-  color: var(--theme-link-default);
-  font-size: var(--step-0);
-  font-weight: 600;
-  line-height: 1.5;
-  text-decoration: underline;
-
-  &:visited {
-    color: var(--theme-link-default);
-  }
-}
-
-.link-xsmall {
-  color: var(--theme-link-default);
-  font-size: var(--step--1);
-  font-weight: 600;
-  line-height: 1.5;
-  text-decoration: underline;
-
-  &:visited {
-    color: var(--theme-link-default);
-  }
-}

package/assets/styles/typography/utils/_weights.css

@@ -1,69 +0,0 @@
-/* By numeric step */
-.wght-100 {
-  font-weight: 100;
-}
-.wght-200 {
-  font-weight: 200;
-}
-.wght-300 {
-  font-weight: 300;
-}
-.wght-400 {
-  font-weight: 400;
-}
-.wght-500 {
-  font-weight: 500;
-}
-.wght-600 {
-  font-weight: 600;
-}
-.wght-700 {
-  font-weight: 700;
-}
-.wght-800 {
-  font-weight: 800;
-}
-.wght-900 {
-  font-weight: 900;
-}
-
-/* By named weight */
-.light {
-  font-weight: light;
-}
-.normal {
-  font-weight: normal;
-}
-.bold {
-  font-weight: bold;
-}
-
-/* Using the font-variation-settings property. */
-
-.fvs-wght-100 {
-  font-variation-settings: 'wght' 100;
-}
-.fvs-wght-200 {
-  font-variation-settings: 'wght' 200;
-}
-.fvs-wght-300 {
-  font-variation-settings: 'wght' 300;
-}
-.fvs-wght-400 {
-  font-variation-settings: 'wght' 400;
-}
-.fvs-wght-500 {
-  font-variation-settings: 'wght' 500;
-}
-.fvs-wght-600 {
-  font-variation-settings: 'wght' 600;
-}
-.fvs-wght-700 {
-  font-variation-settings: 'wght' 700;
-}
-.fvs-wght-800 {
-  font-variation-settings: 'wght' 800;
-}
-.fvs-wght-900 {
-  font-variation-settings: 'wght' 900;
-}

package/assets/styles/typography/utils/index.css

@@ -1,2 +0,0 @@
-@import './_font-classes.css';
-@import './_weights.css';

package/assets/styles/typography/variables/_colors.css

@@ -1,14 +0,0 @@
-:root {
-  --theme-link-default: light-dark(var(--blue-12), var(--blue-4));
-
-  --page-bg: light-dark(var(--gray-0), var(--gray-9));
-
-  --surface-subtle: light-dark(var(--gray-1), var(--gray-8));
-
-  --grayscale-text-title: light-dark(var(--gray-12), var(--gray-2));
-  --grayscale-text-body: light-dark(var(--gray-12), var(--gray-3));
-  --grayscale-text-subtitle: light-dark(var(--gray-12), var(--gray-2));
-  --grayscale-text-caption: light-dark(var(--gray-12), var(--gray-2));
-  --grayscale-text-negative: light-dark(var(--gray-12), var(--gray-2));
-  --grayscale-text-disabled: light-dark(var(--gray-12), var(--gray-2));
-}

package/assets/styles/typography/variables/index.css

@@ -1,2 +0,0 @@
-@import './_colors.css';
-@import './_reponsive-font-size.css';

package/assets/styles/utils/_animations.css

@@ -1,42 +0,0 @@
-.auto-rotate {
-  animation: autoRotateAnimation;
-  animation-timeline: view();
-}
-@keyframes autoRotateAnimation {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-.auto-show {
-  animation: autoShowAnimation both;
-  animation-timeline: view(70% 5%);
-}
-@keyframes autoShowAnimation {
-  from {
-    opacity: 0;
-    transform: translateY(200px) scale(0.3);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0) scale(1);
-  }
-}
-.auto-bLur {
-  animation: autoBlurAnimation linear both;
-  animation-timeline: view();
-}
-@keyframes autoBlurAnimation {
-  0% {
-    filter: blur(40px);
-  }
-  45%,
-  55% {
-    filter: blur(0px);
-  }
-  100% {
-    filter: blur(40px);
-  }
-}

package/assets/styles/utils/_canvasWidths.css

@@ -1,18 +0,0 @@
-/*
-* Used for testing the responsiveness of components
-* by setting the max-width of the canvas to the desired width
-* See: useCanvasSwitcher()
-**/
-
-.mobileCanvas {
-  max-width: 412px;
-}
-.tabletCanvas {
-  max-width: 768px;
-}
-.laptopCanvas {
-  max-width: 1024px;
-}
-.desktopCanvas {
-  max-width: 1280px;
-}

package/assets/styles/utils/_display.css

@@ -1,7 +0,0 @@
-.display-flex {
-  display: flex;
-}
-
-.display-grid {
-  display: grid;
-}

package/assets/styles/utils/_page.css

@@ -1,27 +0,0 @@
-:root {
-  color-scheme: light dark;
-  interpolate-size: allow-keywords; /* can also be set within html {} */
-}
-
-html {
-  /* background-color: var(--body-background-color); */
-  background-color: var(--page-bg);
-
-  font-size: 62.5%;
-  scrollbar-gutter: stable;
-  overflow-x: hidden;
-}
-body {
-  color: var(--grayscale-text-body);
-  font-family: var(--font-family);
-  font-size: var(--step-1);
-  min-height: 100vh;
-}
-
-body {
-  overflow-x: hidden;
-
-  &.lock {
-    overflow: hidden;
-  }
-}

package/assets/styles/utils/_placement.css

@@ -1,73 +0,0 @@
-/*
-* <div placement="top-left"></siv>
-* <div placement="bottom-right"></siv>
-**/
-
-[placement^='top'] {
-  align-self: start;
-}
-
-[placement^='bottom'] {
-  align-self: end;
-}
-
-[placement^='center'] {
-  align-self: center;
-}
-
-[placement$='left'] {
-  justify-self: start;
-}
-
-[placement$='right'] {
-  justify-self: start;
-}
-
-[placement$='center'] {
-  align-self: center;
-}
-
-/*
-* <div align-content="top-left"></siv>
-* <div align-content="bottom-right"></siv>
-**/
-
-[align-content^='center'] {
-  align-items: center;
-}
-
-[align-content^='top'] {
-  align-items: start;
-}
-
-[align-content^='bottom'] {
-  align-items: end;
-}
-
-[align-content$='center'] {
-  justify-content: center;
-}
-
-[align-content$='left'] {
-  justify-content: start;
-}
-
-[align-content$='right'] {
-  justify-content: end;
-}
-
-[align-content$='space-around'] {
-  justify-content: space-around;
-}
-
-[align-content$='space-between'] {
-  justify-content: space-between;
-}
-
-[gap='12px'] {
-  gap: 12px;
-}
-
-[flex-wrap='wrap'] {
-  flex-wrap: wrap;
-}

package/assets/styles/utils/index.css

@@ -1,7 +0,0 @@
-@import './_page';
-@import './_margin-helpers';
-@import './_padding-helpers';
-@import './_canvasWidths';
-@import './_display';
-@import './_placement';
-@import './_animations';

package/assets/styles/variables/components/_accordian.css

@@ -1,7 +0,0 @@
-:root {
-  --accordian-panel-border: 0.1rem solid light-dark(var(--gray-3), var(--gray-6));
-  --accordian-panel-border-radius: 0.4rem;
-  --accordian-panel-mbe: 1.6rem;
-
-  --accordion-trigger-bg: light-dark(var(--gray-3), var(--gray-6));
-}