Sass migration

src/documentation/atom/_atom.scss

@@ -1,9 +1,9 @@
-@import 'button/button';
-@import 'header-item/header-item';
-@import 'image/image';
-@import 'link/link';
-@import 'logo/logo';
-@import 'nav-item/nav-item';
-@import 'paragraph/paragraph';
-@import 'quote/quote';
-@import 'title/title';
+@use 'button/button';
+@use 'header-item/header-item';
+@use 'image/image';
+@use 'link/link';
+@use 'logo/logo';
+@use 'nav-item/nav-item';
+@use 'paragraph/paragraph';
+@use 'quote/quote';
+@use 'title/title';

src/documentation/atom/button/_button.scss

@@ -1,3 +1,5 @@
+@use '../../token/color/color' as color-color;
+@use '../../token/font-family/font-family';
 @use 'sass:color';
 
 $tikui-button-border-width: 1px !default;
@@ -10,19 +12,19 @@ $tikui-button-line-height-small: 16px !default;
 $tikui-button-font-size: 16px !default;
 $tikui-button-font-size-small: 12px !default;
 $tikui-button-radius: 30px !default;
-$tikui-button-font-family: $tikui-font-family-main !default;
-$tikui-button-color-background: $tikui-color-secondary !default;
-$tikui-button-color-border: $tikui-color-secondary !default;
-$tikui-button-color-text: $tikui-color-text-dark !default;
+$tikui-button-font-family: font-family.$tikui-font-family-main !default;
+$tikui-button-color-background: color-color.$tikui-color-secondary !default;
+$tikui-button-color-border: color-color.$tikui-color-secondary !default;
+$tikui-button-color-text: color-color.$tikui-color-text-dark !default;
 $tikui-button-focus-blur-radius: 5px !default;
-$tikui-button-focus-color-shadow: $tikui-color-primary !default;
+$tikui-button-focus-color-shadow: color-color.$tikui-color-primary !default;
 $tikui-button-hover-color-background: color.scale(
   $tikui-button-color-background,
   $lightness: -10%
 ) !default;
-$tikui-button-secondary-color-background: $tikui-color-shade-100 !default;
-$tikui-button-secondary-color-border: $tikui-color-secondary !default;
-$tikui-button-secondary-color-text: $tikui-color-text-dark !default;
+$tikui-button-secondary-color-background: color-color.$tikui-color-shade-100 !default;
+$tikui-button-secondary-color-border: color-color.$tikui-color-secondary !default;
+$tikui-button-secondary-color-text: color-color.$tikui-color-text-dark !default;
 $tikui-button-secondary-hover-color-background: $tikui-button-color-background !default;
 
 .tikui-button {

src/documentation/atom/header-item/_header-item.scss

@@ -1,13 +1,17 @@
-$tikui-header-item-color-text: $tikui-color-text-dark !default;
-$tikui-header-item-font-family: $tikui-font-family-main !default;
+@use '../../token/breakpoint/breakpoint';
+@use '../../token/color/color';
+@use '../../token/font-family/font-family';
+
+$tikui-header-item-color-text: color.$tikui-color-text-dark !default;
+$tikui-header-item-font-family: font-family.$tikui-font-family-main !default;
 $tikui-header-item-spacing: 6px !default;
 $tikui-header-item-feedback-size: 9px !default;
-$tikui-header-item-feedback-color: $tikui-color-tertiary !default;
-$tikui-header-item-focus-color-shadow: $tikui-color-primary !default;
+$tikui-header-item-feedback-color: color.$tikui-color-tertiary !default;
+$tikui-header-item-focus-color-shadow: color.$tikui-color-primary !default;
 $tikui-header-item-focus-radius-shadow: 5px !default;
 $tikui-header-item-font-size: 16px !default;
 $tikui-header-item-text-radius: 3px !default;
-$tikui-header-item-large-breakpoint: $tikui-breakpoint-large !default;
+$tikui-header-item-large-breakpoint: breakpoint.$tikui-breakpoint-large !default;
 $tikui-header-item-small-font-size: 5vw !default;
 $tikui-header-item-padding-bottom: $tikui-header-item-spacing + $tikui-header-item-feedback-size;
 

src/documentation/atom/link/_link.scss

@@ -1,3 +1,5 @@
+@use '../../quark/link/link';
+
 .tikui-link {
-  @include tikui-link;
+  @include link.tikui-link;
 }

src/documentation/atom/nav-item/_nav-item.scss

@@ -1,5 +1,8 @@
-$tikui-nav-item-color-text: $tikui-color-text-dark !default;
-$tikui-nav-item-font-family: $tikui-font-family-main !default;
+@use '../../token/color/color';
+@use '../../token/font-family/font-family';
+
+$tikui-nav-item-color-text: color.$tikui-color-text-dark !default;
+$tikui-nav-item-font-family: font-family.$tikui-font-family-main !default;
 $tikui-nav-item-font-size: 16px !default;
 $tikui-nav-item-main-font-size: 24px !default;
 

src/documentation/atom/paragraph/_paragraph.scss

@@ -1,3 +1,5 @@
+@use '../../quark/paragraph/paragraph';
+
 .tikui-paragraph {
-  @include tikui-paragraph;
+  @include paragraph.tikui-paragraph;
 }

src/documentation/atom/quote/_quote.scss

@@ -1,5 +1,8 @@
-$tikui-quote-text-color: $tikui-color-text-dark !default;
-$tikui-quote-font-family: $tikui-font-family-main !default;
+@use '../../token/color/color';
+@use '../../token/font-family/font-family';
+
+$tikui-quote-text-color: color.$tikui-color-text-dark !default;
+$tikui-quote-font-family: font-family.$tikui-font-family-main !default;
 $tikui-quote-text-font-size: 16px;
 $tikui-quote-author-font-size: 14px;
 $tikui-quote-author-margin-left: 24px;

src/documentation/atom/title/_title.scss

@@ -1,4 +1,4 @@
-@import 'title-main/title-main';
-@import 'title-brand/title-brand';
-@import 'title-section/title-section';
-@import 'title-part/title-part';
+@use 'title-main/title-main';
+@use 'title-brand/title-brand';
+@use 'title-section/title-section';
+@use 'title-part/title-part';

src/documentation/atom/title/title-brand/_title-brand.scss

@@ -1,11 +1,15 @@
-$tikui-title-brand-large-breakpoint: $tikui-breakpoint-large !default;
+@use '../../../quark/title/title-brand';
+@use '../../../token/breakpoint/breakpoint';
+@use '../../header-item/header-item';
+
+$tikui-title-brand-large-breakpoint: breakpoint.$tikui-breakpoint-large !default;
 $tikui-title-brand-small-font-size: 7vw;
 
 .tikui-title-brand {
-  @include tikui-title-brand;
+  @include title-brand.tikui-title-brand;
 }
 
-@media screen and (max-width: $tikui-header-item-large-breakpoint) {
+@media screen and (max-width: header-item.$tikui-header-item-large-breakpoint) {
   .tikui-title-brand {
     font-size: $tikui-title-brand-small-font-size;
   }

src/documentation/atom/title/title-main/_title-main.scss

@@ -1,3 +1,5 @@
+@use '../../../quark/title/title-main';
+
 .tikui-title-main {
-  @include tikui-title-main;
+  @include title-main.tikui-title-main;
 }

src/documentation/atom/title/title-part/_title-part.scss

@@ -1,3 +1,5 @@
+@use '../../../quark/title/title-part';
+
 .tikui-title-part {
-  @include tikui-title-part;
+  @include title-part.tikui-title-part;
 }

src/documentation/atom/title/title-section/_title-section.scss

@@ -1,3 +1,5 @@
+@use '../../../quark/title/title-section';
+
 .tikui-title-section {
-  @include tikui-title-section;
+  @include title-section.tikui-title-section;
 }

src/documentation/molecule/_molecule.scss

@@ -1,5 +1,5 @@
-@import 'atom/atom';
-@import 'component/component';
-@import 'header-navigation/header-navigation';
-@import 'list/list';
-@import 'nav-vertical/nav-vertical';
+@use 'atom/atom';
+@use 'component/component';
+@use 'header-navigation/header-navigation';
+@use 'list/list';
+@use 'nav-vertical/nav-vertical';

src/documentation/molecule/atom/_atom.scss

@@ -1,7 +1,9 @@
+@use '../../token/color/color';
+
 $tikui-atom-outer-space: 60px !default;
 $tikui-atom-inner-space: 16px !default;
-$tikui-atom-color-outline: $tikui-color-background-secondary !default;
-$tikui-atom-color-background: $tikui-color-background-secondary !default;
+$tikui-atom-color-outline: color.$tikui-color-background-secondary !default;
+$tikui-atom-color-background: color.$tikui-color-background-secondary !default;
 
 .tikui-atom {
   box-sizing: border-box;

src/documentation/molecule/component/_component.scss

@@ -1,3 +1,10 @@
+@use '../../quark/link/link';
+@use '../../quark/list/list';
+@use '../../quark/paragraph/paragraph';
+@use '../../quark/title/title-main';
+@use '../../quark/title/title-part';
+@use '../../quark/title/title-section';
+
 @mixin tikui-component-spacing($spacing) {
   & {
     margin-bottom: $spacing * 1px;
@@ -19,32 +26,32 @@
 
   &--markdown {
     h1 {
-      @include tikui-title-main;
+      @include title-main.tikui-title-main;
       @include tikui-component-spacing(24);
     }
 
     h2 {
-      @include tikui-title-section;
+      @include title-section.tikui-title-section;
       @include tikui-component-spacing(24);
     }
 
     h3 {
-      @include tikui-title-part;
+      @include title-part.tikui-title-part;
       @include tikui-component-spacing(24);
     }
 
     p {
-      @include tikui-paragraph;
+      @include paragraph.tikui-paragraph;
       @include tikui-component-spacing(16);
     }
 
     a {
-      @include tikui-link;
+      @include link.tikui-link;
     }
 
     ul,
     ol {
-      @include tikui-list;
+      @include list.tikui-list;
       @include tikui-component-spacing(16);
     }
   }

src/documentation/molecule/header-navigation/_header-navigation.scss

@@ -1,5 +1,7 @@
+@use '../../token/breakpoint/breakpoint';
+
 $tikui-header-navigation-spacing: 80px !default;
-$tikui-header-navigation-large-breakpoint: $tikui-breakpoint-large !default;
+$tikui-header-navigation-large-breakpoint: breakpoint.$tikui-breakpoint-large !default;
 
 .tikui-header-navigation {
   display: flex;

src/documentation/molecule/list/_list.scss

@@ -1,3 +1,5 @@
+@use '../../quark/list/list';
+
 .tikui-list {
-  @include tikui-list;
+  @include list.tikui-list;
 }

src/documentation/molecule/nav-vertical/_nav-vertical.scss

@@ -1,5 +1,7 @@
+@use '../../token/color/color';
+
 $tikui-nav-vertical-padding: 32px !default;
-$tikui-nav-vertical-color-background: $tikui-color-background-secondary !default;
+$tikui-nav-vertical-color-background: color.$tikui-color-background-secondary !default;
 $tikui-nav-vertical-item-spacing: 16px !default;
 $tikui-nav-vertical-item-level-1-spacing: 24px !default;
 $tikui-nav-vertical-item-indent-space: 16px !default;

src/documentation/organism/_organism.scss

@@ -1,5 +1,5 @@
-@import 'dual-section/dual-section';
-@import 'line-section/line-section';
-@import 'header/header';
-@import 'linear-molecule/linear-molecule';
-@import 'spacing/spacing';
+@use 'dual-section/dual-section';
+@use 'line-section/line-section';
+@use 'header/header';
+@use 'linear-molecule/linear-molecule';
+@use 'spacing/spacing';

src/documentation/organism/dual-section/_dual-section.scss

@@ -1,6 +1,8 @@
+@use '../../token/breakpoint/breakpoint';
+
 $tikui-dual-section-horizontal-spacing: 200px !default;
 $tikui-dual-section-vertical-spacing: 100px !default;
-$tikui-dual-section-medium-breakpoint: $tikui-breakpoint-medium !default;
+$tikui-dual-section-medium-breakpoint: breakpoint.$tikui-breakpoint-medium !default;
 
 @mixin tikui-dual-section-size($size) {
   $size-pixel: $size * 1px;

src/documentation/organism/header/_header.scss

@@ -1,6 +1,9 @@
-$tikui-header-height: $tikui-size-header-height !default;
+@use '../../token/breakpoint/breakpoint';
+@use '../../token/size/size';
+
+$tikui-header-height: size.$tikui-size-header-height !default;
 $tikui-header-spacing: 80px !default;
-$tikui-header-large-breakpoint: $tikui-breakpoint-large !default;
+$tikui-header-large-breakpoint: breakpoint.$tikui-breakpoint-large !default;
 $tikui-header-small-spacing: 10px !default;
 
 .tikui-header {

src/documentation/organism/line-section/_line-section.scss

@@ -1,4 +1,7 @@
-$tikui-line-section-breakpoint: $tikui-breakpoint-large !default;
+@use '../../token/breakpoint/breakpoint';
+@use '../../token/size/size';
+
+$tikui-line-section-breakpoint: breakpoint.$tikui-breakpoint-large !default;
 
 @mixin tikui-line-section-spacing($spacing) {
   $pixel-spacing: $spacing * 1px;
@@ -28,7 +31,7 @@ $tikui-line-section-breakpoint: $tikui-breakpoint-large !default;
   display: flex;
   flex-direction: row;
 
-  @each $size in $tikui-size-spacing {
+  @each $size in size.$tikui-size-spacing {
     @include tikui-line-section-spacing($size);
   }
 
@@ -43,7 +46,7 @@ $tikui-line-section-breakpoint: $tikui-breakpoint-large !default;
   .tikui-line-section {
     flex-direction: column;
 
-    @each $size in $tikui-size-spacing {
+    @each $size in size.$tikui-size-spacing {
       @include tikui-line-section-small-spacing($size);
     }
 

src/documentation/organism/linear-molecule/_linear-molecule.scss

@@ -1,5 +1,7 @@
+@use '../../token/breakpoint/breakpoint';
+
 $tikui-linear-molecule: 30px !default;
-$tikui-linear-molecule-medium-breakpoint: $tikui-breakpoint-medium !default;
+$tikui-linear-molecule-medium-breakpoint: breakpoint.$tikui-breakpoint-medium !default;
 
 .tikui-linear-molecule {
   display: flex;

src/documentation/organism/spacing/_spacing.scss

@@ -1,2 +1,2 @@
-@import 'horizontal-spacing/horizontal-spacing';
-@import 'vertical-spacing/vertical-spacing';
+@use 'horizontal-spacing/horizontal-spacing';
+@use 'vertical-spacing/vertical-spacing';

src/documentation/organism/spacing/horizontal-spacing/_horizontal-spacing.scss

@@ -1,3 +1,5 @@
+@use '../../../token/size/size';
+
 @mixin tikui-horizontal-spacing-column-size($size) {
   &.-s#{$size} > &--column {
     margin-right: $size * 1px;
@@ -11,7 +13,7 @@
 .tikui-horizontal-spacing {
   display: flex;
 
-  @each $size in $tikui-size-spacing {
+  @each $size in size.$tikui-size-spacing {
     @include tikui-horizontal-spacing-column-size($size);
   }
 

src/documentation/organism/spacing/vertical-spacing/_vertical-spacing.scss

@@ -1,3 +1,5 @@
+@use '../../../token/size/size';
+
 @mixin tikui-vertical-spacing-line-size($size) {
   &.-s#{$size} > &--line {
     margin-bottom: $size * 1px;
@@ -9,7 +11,7 @@
 }
 
 .tikui-vertical-spacing {
-  @each $size in $tikui-size-spacing {
+  @each $size in size.$tikui-size-spacing {
     @include tikui-vertical-spacing-line-size($size);
   }
 }

src/documentation/quark/_quark.scss

@@ -1,5 +1,5 @@
-@import 'link/link';
-@import 'list/list';
-@import 'paragraph/paragraph';
-@import 'text/text';
-@import 'title/title';
+@use 'link/link';
+@use 'list/list';
+@use 'paragraph/paragraph';
+@use 'text/text';
+@use 'title/title';

src/documentation/quark/list/_list.scss

@@ -1,7 +1,11 @@
-$tikui-list-color-text: $tikui-color-text-dark !default;
-$tikui-list-font-family: $tikui-font-family-main !default;
+@use '../../token/color/color';
+@use '../../token/font-family/font-family';
+@use '../../token/size/size';
+
+$tikui-list-color-text: color.$tikui-color-text-dark !default;
+$tikui-list-font-family: font-family.$tikui-font-family-main !default;
 $tikui-list-font-size: 16px !default;
-$tikui-list-line-height: $tikui-size-line-standard !default;
+$tikui-list-line-height: size.$tikui-size-line-standard !default;
 
 %tikui-list {
   margin: 0;