Feat/component tabs bar (#76)

* feat(tabs): add base styles for tabs

packages/chlorophyll-storybook/src/stories/css/tabs-bar/TabsBar.stories.svelte

@@ -0,0 +1,21 @@
+<script>
+  import { Meta, Template, Story } from "@storybook/addon-svelte-csf";
+  import TabsBar from "./TabsBar.svelte";
+</script>
+
+<Meta
+  title="CSS/TabsBar/Stories"
+  component={TabsBar}
+  argTypes={{}}
+/>
+
+
+<Template let:args>
+  <TabsBar {...args}/>
+</Template>
+
+<Story
+  source={`<div></div>`}
+  name="Default"
+  args={{}}
+/>

packages/chlorophyll-storybook/src/stories/css/tabs-bar/TabsBar.svelte

@@ -0,0 +1,18 @@
+<script>
+  /**
+   * Tabs make it easy to explore and switch between different views or functional aspects of an app or to browse categorized data sets.
+   * @component
+   */
+
+</script>
+
+<nav role="tablist">
+  <a href='#tab' aria-controls="tab-content-1" role="tab" aria-selected='true'>Tab 1</a>
+  <a href='#tab' aria-controls="tab-content-2" role="tab">Tab 2</a>
+  <a href='#tab' aria-controls="tab-content-3" role="tab">Tab 3</a>
+</nav>
+<section aria-live="polite">
+  <article id="tab-content-1" role="tabpanel" aria-hidden='false'>Content for tab 1</article>
+  <article id="tab-content-2" role="tabpanel" aria-hidden='true'>Content for tab 2</article>
+  <article id="tab-content-3" role="tabpanel" aria-hidden='true'>Content for tab 3</article>
+</section>

packages/chlorophyll-storybook/src/stories/css/tabs-bar/index.stories.mdx

@@ -0,0 +1,11 @@
+import { Meta, Story } from '@storybook/addon-docs/blocks';
+
+<Meta title="CSS/TabsBar/Overview" />
+
+# Tabs bar
+
+Tabs make it easy to explore and switch between different views or functional aspects of an app or to browse categorized data sets.
+
+<Canvas>
+  <Story id="css-tabsbar-stories--default" />
+</Canvas>

packages/chlorophyll/src/scss/classes/_index.scss

@@ -3,6 +3,7 @@
 @use 'button';
 @use 'input';
 @use 'link';
+@use 'tabs-bar';
 @use 'utility/spacing';
 @use 'typography';
 

packages/chlorophyll/src/scss/classes/tabs-bar/_index.scss

@@ -0,0 +1,21 @@
+@use '../../mixins/tabs-bar';
+
+#{tabs-bar.$selector-tab} {
+  @include tabs-bar.tab;
+}
+
+#{tabs-bar.$selector-tab--selected} {
+  @include tabs-bar.tab--selected;
+}
+
+#{tabs-bar.$selector-tabs-bar} {
+  @include tabs-bar.tabs-bar
+}
+
+#{tabs-bar.$selector-tab-panel} {
+  @include tabs-bar.tabs-panel;
+}
+
+#{tabs-bar.$selector-tab-panel--selected} {
+  @include tabs-bar.tabs-panel--selected;
+}

packages/chlorophyll/src/scss/mixins/tabs-bar/_index.scss

@@ -0,0 +1,55 @@
+@use '../../tokens';
+@use '../../mixins/utility';
+@use '../../functions';
+
+$selector-tab: "[role=tab]";
+$selector-tab--selected: $selector-tab + "[aria-selected=true]";
+$selector-tab-panel: "[role=tabpanel]";
+$selector-tab-panel--selected: $selector-tab-panel + "[aria-hidden=false]";
+$selector-tabs-bar: "[role=tablist]";
+
+@mixin tab {
+  @include utility.add-border($sides: "bottom");
+  @include utility.add-border-color;
+  @include utility.padding-horizontal(5);
+  @include utility.padding-vertical(4);
+  @include utility.font-weight('medium');
+  @include utility.min-width(10);
+
+  color: map-get(tokens.$theme-colors, 'primary');
+  text-decoration: none;
+  text-align: center;
+
+  @include utility.add-hover-state;
+  @include utility.add-focus;
+}
+
+@mixin tab--selected {
+  @include utility.add-border($sides: ("top", "right", "left"));
+  @include utility.add-border-color;
+
+  border-bottom: tokens.$border-width transparent;
+  color: map-get(tokens.$grey, 1);
+
+  @include utility.add-hover-state;
+}
+
+@mixin tabs-bar {
+  display: flex;
+
+  &::after {
+    @include utility.add-border($sides: ("bottom"));
+    @include utility.add-border-color;
+    content: '';
+    display: block;
+    flex-grow: 1;
+  }
+}
+
+@mixin tabs-panel {
+  display: none;
+}
+
+@mixin tabs-panel--selected {
+  display: block;
+}

packages/chlorophyll/src/scss/mixins/utility/_border.scss

@@ -1,8 +1,19 @@
 @use '../../tokens';
+
 @mixin add-border-radius() {
   border-radius: tokens.$border-radius;
 }
 
-@mixin add-border() {
-  border: solid tokens.$border-width;
+@mixin add-border($sides: false) {
+  @if not $sides {
+    border: solid tokens.$border-width;
+  } @else {
+    @each $side in $sides {
+      border-#{$side}: solid tokens.$border-width;
+    }
+  }
 }
+
+@mixin add-border-color() {
+  border-color: tokens.$border-color-default;
+}

packages/chlorophyll/src/scss/mixins/utility/_focus.scss

@@ -19,6 +19,7 @@
 
   &:hover {
     background: $color;
+    color: white;
   }
 }
 

packages/chlorophyll/src/scss/mixins/utility/_spacing.scss

@@ -53,3 +53,7 @@
   padding-bottom: map-get(tokens.$spacing, $size);
   padding-top: map-get(tokens.$spacing, $size);
 }
+
+@mixin min-width($size) {
+  min-width: map-get(tokens.$spacing, $size);
+}

packages/chlorophyll/src/scss/tokens/_border.scss

@@ -1,2 +1,5 @@
+@use 'color';
+
 $radius: 4px;
 $width: 1px;
+$color-default: map-get(color.$grey, 4)

packages/chlorophyll/src/scss/tokens/_spacing.scss

@@ -8,4 +8,6 @@ $spacing: (
   6: 1.5rem,
   7: 2rem,
   8: 4rem,
+  9: 6rem,
+  10: 8rem
 );